旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI設(shè)計師告訴你新人的九個要點

UI設(shè)計師告訴你新人的九個要點

時間:2018-03-01來源:m.lb577.com點擊量:作者:吳冬冬
時間:2018-03-01點擊量:作者:吳冬冬
在平時的工作中,我會接觸到很多“下層頁面設(shè)計”。下層頁面設(shè)計就是,根據(jù)主設(shè)計師設(shè)計的主頁面進行下層頁面的制作。對于頁面較多的網(wǎng)站,會經(jīng)常這樣分工協(xié)作。在拿到首頁設(shè)計時,首先要對整體仔細確認。如果這一步?jīng)]有認真做,接下來的頁面就會陷入不斷修正的麻煩之中。
這一次,為了避免設(shè)計之中的麻煩,總結(jié)了一些需要注意的要點。雖然都是理所應(yīng)擔的內(nèi)容,還是希望大家能夠重視起來,不要忘記。
 
149145879727798200_17
 

目錄

需要確認的要點

  • 1、網(wǎng)站的目的
  • 2、使用的字體
  • 3、文本的規(guī)則
  • 4、色彩
  • 5、排版、留白
  • 6、圖片
  • 7、icon
  • 8、裝飾
  • 9、動效

 

需要確認的要點

1、網(wǎng)站的目的

149180698089839700_09

入手下層頁面設(shè)計的第一件事,就是了解主設(shè)計師在設(shè)計主頁面時的思路。如果不了解這個思路,就可能會和原有的設(shè)計意圖有偏頗,導(dǎo)致返工。因此,不明白的地方和在意的細節(jié)都要好好確認。這樣,如果在設(shè)計的時候能有明確的目的,和主頁面有區(qū)別的地方也會比較容易思考了。

 

2、使用的字體

149145879159629700_04

一個網(wǎng)站給人的印象是會受字體所影響的。如果字體不統(tǒng)一,就會跟人一種進入了不同網(wǎng)站的感覺。標題和正文的字體一定要區(qū)分開來。另外,主頁面沒有使用的字體盡量不要使用。因此,在著手設(shè)計之前最好提前確認準備好。

 

3、文本的規(guī)則

149178855112859300_89

字體接下來就是樣式。這一點很容易造成不統(tǒng)一,所以要特別注意。細分一下需要確認的主要有三個重要點。
a.頁面標題、目錄和正文的字號
   一般來說下層頁面會使用和主頁面一樣的字號,每個頁面正文所使用的文本樣式都會相同。在PS中有“庫”的功能,登錄之后就可以很輕松地為開始制作做好準備。另外,在對字號進行調(diào)節(jié)的時候,也有為了保證印象將跳躍率調(diào)整為同樣的情況。
b.字間距、行間距
   文字的行間距如果發(fā)生變化,整個頁面給人的印象就會因此不同,所以下層頁面要保證和主頁面統(tǒng)一。在不得不隨著文字的多少和內(nèi)容發(fā)生變化的時候,也不要增加太多的規(guī)則。
c.語言的使用
   雖然不是直接和設(shè)計有關(guān),但是同樣的內(nèi)容卻使用不同的語言會造成混亂。詞尾也同樣,會根據(jù)持有的印象不同而變化,因此有注意的必要。

 

4、色彩

14914587841175900_69

確認使用的顏色。使用太多的顏色將會很難實現(xiàn)統(tǒng)一感,主要的部分也會變得不突出。
a.主色和點綴色
   要確認頁面中使用的主色和點綴色,記錄好色號。
b.文字色
   保證不同的頁面使用的文字顏色統(tǒng)一,掌握好不同位置的文字所用的顏色。根據(jù)想要醒目一些的內(nèi)容,注釋的內(nèi)容等,要有層次感的變化,根據(jù)各個頁面建立統(tǒng)一的規(guī)則。
 

 

5、排版、留白

149145878665048700_15

布局和排版要根據(jù)不同的目的而變化。為了引導(dǎo)視線,一個頁面中最想傳達的內(nèi)容要最醒目。這樣的規(guī)則要配合各個頁面得到統(tǒng)一。在這里面重要的劃分就是留白。若不確認好目錄與正文之間及目錄本身的留白,就會變得散亂而失去了設(shè)計的一貫性?;ㄙM時間去修改頁面的要素,可能就會耽誤整體的進度,所以在設(shè)計的時候要好好確認。

 

6、圖片

149145879591697000_08

下層頁面在使用圖片的時候,應(yīng)該使用和主頁面同樣風(fēng)格的圖片,整體調(diào)整色調(diào)。事先在決定使用哪些圖片的時候,最好先確認一下色調(diào),這樣后面就會順利很多。并且,還要事先考慮是否適用于移動設(shè)備上,尤其是響應(yīng)式頁面圖片的比例要保持一致,在移動設(shè)備上是否能夠完全顯示也必須考慮到,這樣會給之后減少很多工作量。

 

7、ICON

149145879889497300_41

ICON的設(shè)計也必須要保證統(tǒng)一。在追加新icon的時候要保證和原來的風(fēng)格統(tǒng)一。在設(shè)計每一個ICON的時候要確認好。并且,在高分辨率的屏幕上查看,ICON的畫質(zhì)會變糟,所以要制作大一點的尺寸,然后再轉(zhuǎn)成 web font 。這樣就可以保證在任何環(huán)境下顯示效果都會好。在這里也要事先考慮好移動設(shè)備的情況。

 

8、裝飾

149145879446012400_64

例如,有圓角的按鈕,圓角的大小和線條的粗細,按鈕的尺寸和使用的場合都應(yīng)該基本保持統(tǒng)一。無視主頁面已經(jīng)使用的元素,在下層頁面制作新的元素就會打破整體的規(guī)則。一般會要么都是圓角,要么都是直角,基本沒有混合使用的情況,所以不要讓破壞整體風(fēng)格的元素出現(xiàn)。

 

9、動效

按鈕點擊的動效,頁面收起展示目錄的動效,整體從左右移動的方向和上下移動的方向一般都要保持一致,以保證統(tǒng)一。要注意頁面中不應(yīng)該出現(xiàn)和整體動效原則相違背的元素。
 

總結(jié)

以上就是設(shè)計下層頁面時候最起碼應(yīng)該注意的地方。
下層頁面的設(shè)計大體要遵循主頁面已經(jīng)確定好的規(guī)則,所以可發(fā)揮的空間很小,但每一個頁面的要素都不相同,因此也不是和主頁面完全相同。做的多了,自己也能決定規(guī)則的時候,就會變得越來越有趣了。
相關(guān)文章--《
UI大牛教你做3D環(huán)繞空心球

 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖