在上一篇《UI設計入門如何學習》中我提到的一些書籍和網站,我近一個月來都有看,進度比較慢,那幾本書還沒看完,不過我覺得我對UI設計還是漸漸地多了一些想法。一個好的設計師,平常要做到多看,多想,多練。要把看到的學到的運用到實踐中才是自己的,所以在4月初的時候師父就布置給我一個作業(yè),網頁版的簡歷設計,用PS把藍圖做出來。
交了5次稿給師父,評價從開始的好丑(粵語“好肉孫”),到最后的感覺挺舒服,從“垃圾”作品到比普通的UI設計要好,每次完稿都進步一點,就像看著自己成長,很開心。
第一步應該是大量地參考優(yōu)秀的網站,you should understand why they do it like that,learn color palettes,interface ideas,layouts and typography...
第二步,自己在白紙上或者在PS上把自己網頁的主元素畫個框架出來。例如(書上截圖):

第三步,往上面添加具體的內容,字體,圖片等。我覺得有必要強調一下使用PS制作的時候應該使用參考線和網格,排版出來才比較好看,不會參差不齊。

具體的內容。
1.字體方面。
一開始我制作的是中文簡歷,字體選擇方面把握得不好,加上平時看的都是英文書籍和英文網站,中文的字體真不知該如何選擇。第二稿開始就轉為英文版。使用了Arial字體作為大標題personal resume的字體,ubuntu字體作為導航欄的字體,Hiragino Sans GB(蘋果的麗黑字體)作為正文的字體。我最為喜歡ubuntu和Hiragino Sans GB字體了,追捧ubuntu系統(tǒng)和蘋果產品的群眾那么多,我相信大家也會覺得它們的字體讓人看著舒服。

讀書筆記:1、標題和正文字母大小寫不同粗細不同 2、網頁字體種類不能太多,不超3種,可以是標題一種,正文一種,圖表列表一種,字體的搭配要和諧,看著舒服 3、推薦的字體,Google Fonts,Proxima Nova,Futura,Lato,Montserrat,Open Sans, Conbert...

選擇好字體后還要注意要調整字體的字間距和行距、對齊方式?。?!
2.配色方面。
我現(xiàn)在還是以參考、模仿為主。綠色為主色要慎重,稍有不慎就會變得很難看,黑,白,灰,藍比較容易搭配。
最全的中文色彩庫
http://www.peise.net/
配色神器
- Adobe Color CC
https://color.adobe.com/ - Color Scheme Designer
http://www.peise.net/tools/web/
另外,大家可以看我上一篇《UI設計入門如何學習》提到的一些網站,新增推薦: - UI設計導航網,包含了界內知名的相關設計類素材網站,學習網站,干貨下載等多版塊,更快速的提升自我。
http://hao.xueui.cn/ - 設計師網址導航網
http://www.userinterface.com.cn/
3.排版布局方面。
我的感受最大的是黃金分割布局和留白。
黃金分割是設計的利器,應用范圍很廣。
黃金分割是指將整體一分為二,較大部分與整體部分的比值等于較小部分與較大部分的比值,其比值約為0.618。這個比例被公認為是最能引起美感的比例,因此被稱為黃金分割。
黃金分割具有嚴格的比例性、藝術性、和諧性,蘊藏著豐富的美學價值,這一比值能夠引起人們的美感,被認為是建筑和藝術中最理想的比例。
畫家們發(fā)現(xiàn),按0.618:1來設計的比例,畫出的畫最優(yōu)美,在達·芬奇的作品《維特魯威人》、《蒙娜麗莎》、還有《最后的晚餐》中都運用了黃金分割。而現(xiàn)今的女性,腰身以下的長度平均只占身高的0.58,因此古希臘的著名雕像斷臂維納斯及太陽神阿波羅都通過故意延長雙腿,使之與身高的比值為0.618。建筑師們對數(shù)字0.618特別偏愛,無論是古埃及的金字塔,還是巴黎的圣母院,或者是近世紀的法國埃菲爾鐵塔,希臘雅典的巴特農神廟,都有黃金分割的足跡。——百度百科


上面只做了簡單的介紹,想深入了解的朋友自己百度找資料吧。我在布局排版的時候一直想著1/3、2/3,1/3、2/3......雖然最后也沒有用得很精確,不過看著也不會不舒服。
學會留白
從前總是覺得留白太多會顯得畫面很空,就會不斷地往上面塞東西,結果適得其反。
留白是藝術設計中需要遵循的重要視覺準則之一。網頁設計中留白使元素之間保持距離,擁有呼吸的空間。
- 留白在網頁設計中的合理使用
http://www.uisdc.com/13-examples-of-whitespace - 五個訣竅幫你快速掌握留白的藝術
http://www.uisdc.com/5-design-skill-improve-blank

4.整體做好以后可以添加小圖片加以點綴
這點心得沒有很多,歡迎指點。
說了那么多,最后還是得附上自己設計的簡歷吧(__)
頁頭是模仿別人網站的http://www.barkpr.com/

時間線的使用上我開始有些誤解,有興趣的朋友可以看看《在設計中或許你誤用了時間線》
寫得不對的地方還請各路大神指正,我設計的簡歷還有哪里需要改進的地方,還請各路大神指點一二。謝謝!