UI設計之頁面設計的九個要點!

標籤：

剛入行的UI設計師，會做一些輔助的工作，大多數時間做的都是等待安排，完成工作。主要就是根據主設計師的設計和規範來製作下層頁面，而在這個過程中有很多需要注意的地方，今天就和大家一起細數下層頁面設計過程中必須要注意的要點。希望今天的UI設計教程能夠協助到大家。

在平時的工作中，會接觸到很多“下層頁面設計”。下層頁面設計就是，根據主設計師設計的首頁面進行下層頁面的製作。對於頁面較多的網站，會經常這樣分工協作。在拿到首頁設計時，首先要對整體仔細確認。如果這一步沒有認真做，接下來的頁面就會陷入不斷修正的麻煩之中。

這一次，為了避免設計之中的麻煩，總結了一些需要注意的要點。雖然都是理所應擔的內容，還是希望大家能夠重視起來，不要忘記。

目錄

需要確認的要點

1、網站的目的

2、使用的字型

3、文本的規則

4、色彩

5、排版、留白

6、圖片

7、icon

8、裝飾

9、動效

需要確認的要點

1、網站的目的

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

2、使用的字型

一個網站給人的印象是會受字型所影響的。如果字型不統一，就會跟人一種進入了不同網站的感覺。標題和本文的字型一定要區分開來。另外，首頁面沒有使用的字型盡量不要使用。因此，在著手設計之前最好提前確認準備好。

3、文本的規則

字型接下來就是樣式。這一點很容易造成不統一，所以要特別注意。細分一下需要確認的主要有三個重要點。

a.頁面標題、目錄和本文的字型大小

一般來說下層頁面會使用和首頁面一樣的字型大小，每個頁面本文所使用的文本樣式都會相同。在PS中有“庫”的功能，登入之後就可以很輕鬆地為開始製作做好準備。另外，在對字型大小進行調節的時候，也有為了保證印象將跳躍率調整為同樣的情況。

b.字間距、行間距

文字的行間距如果發生變化，整個頁面給人的印象就會因此不同，所以下層頁面要保證和首頁面統一。在不得不隨著文字的多少和內容發生變化的時候，也不要增加太多的規則。

c.語言的使用

雖然不是直接和設計有關，但是同樣的內容卻使用不同的語言會造成混亂。詞尾也同樣，會根據持有的印象不同而變化，因此有注意的必要。

4、色彩

確認使用的顏色。使用太多的顏色將會很難實現統一感，主要的部分也會變得不突出。

a.主色和點綴色

要確認頁面中使用的主色和點綴色，記錄好色號。

b.文字色

保證不同的頁面使用的文字顏色統一，掌握好不同位置的文字所用的顏色。根據想要醒目一些的內容，注釋的內容等，要有層次感的變化，根據各個頁面建立統一的規則。

5、排版、留白

布局和排版要根據不同的目的而變化。為了引導視線，一個頁面中最想傳達的內容要最醒目。這樣的規則要配合各個頁面得到統一。在這裡面重要的劃分就是留白。若不確認好目錄與本文之間及目錄本身的留白，就會變得散亂而失去了設計的一貫性。花費時間去修改頁面的要素，可能就會耽誤整體的進度，所以在設計的時候要好好確認。

6、圖片

下層頁面在使用圖片的時候，應該使用和首頁面同樣風格的圖片，整體調整色調。事先在決定使用哪些圖片的時候，最好先確認一下色調，這樣後面就會順利很多。並且，還要事先考慮是否適用於行動裝置上，尤其是響應式頁面圖片的比例要保持一致，在行動裝置上是否能夠完全顯示也必須考慮到，這樣會給之後減少很多工作量。

7、ICON

ICON的設計也必須要保證統一。在追加新icon的時候要保證和原來的風格統一。在設計每一個ICON的時候要確認好。並且，在高解析度的螢幕上查看，ICON的畫質會變糟，所以要製作大一點的尺寸，然後再轉成 web font 。這樣就可以保證在任何環境下顯示效果都會好。在這裡也要事先考慮好行動裝置的情況。

8、裝飾

例如，有圓角的按鈕，圓角的大小和線條的粗細，按鈕的尺寸和使用的場合都應該基本保持統一。無視首頁面已經使用的元素，在下層頁面製作新的元素就會打破整體的規則。一般會要麼都是圓角，要麼都是直角，基本沒有混合使用的情況，所以不要讓破壞整體風格的元素出現。

9、動效

按鈕點擊的動效，頁面收合展示目錄的動效，整體從左右移動的方向和上下移動的方向一般都要保持一致，以保證統一。要注意頁面中不應該出現和整體動效原則相違背的元素。

總結

以上就是UI設計下層頁面時候最起碼應該注意的地方。

下層頁面的設計大體要遵循首頁面已經確定好的規則，所以可發揮的空間很小，但每一個頁面的要素都不相同，因此也不是和首頁面完全相同。做的多了，自己也能決定規則的時候，就會變得越來越有趣了。那今天的UI設計教程之頁面設計的九個要點就結束了，喜歡or不喜歡，它就在那裡不離不棄。

 

 

來源：ui中國

UI設計之頁面設計的九個要點!