寫在前面的廢話

聲明：如果你是一個完全沒有接觸過ui的設計師，可以看一看這篇文章，如果不是就不用浪費時間了，勿謂言之不預。我真的很蛋疼，不信往下翻翻看。

如今越來越多的用戶依賴移動端的産品，而各種類型的移動端産品更是百花齊放，如曲面屏，全面屏，對于ui設計來說，挑戰難度不可謂不高，但是也不用為此擔心，這其中還是有一些基本的原則技巧可以幫助你越過這些難點的。

這句話的意思是讓用戶在使用産品時，無明顯的障礙感，我們要保證不同的人以及不同的操作方式都能做到最大化的便利。

用戶實際拿手機的方式主要有以下三種（如下圖所示），我們的目标即是讓用戶需要操作的元素位于這些區域内。

與PC端相比，移動端屏幕更小，因此怎麼在這樣小的屏幕上合理容納更多的信息，是不得不考慮的問題，一個可讀性強的頁面，會給用戶帶來更佳的體驗。

左側圖雖然在内容上做了進度分頁，但每個進度數字下方都有相應的名稱，導緻文字過多，增加了用戶閱讀負擔，而右側則在進度設計方式上進一步壓縮，把整個進度狀态放在左側，在右側實時更新每一步的信息，可讀性大大增加了不少。

長頁面的滾動，對用戶閱讀資訊或書籍時，保持專注的一個好方法，但是在某些情況下，（例如，當用戶需要按照提示完成任務時），有研究表明，滾動越多，用戶就越容易滾開，呸，離開頁面。

在這種情況下，設計師可以嘗試用操作擴展的方式（如滑動卡片）将任務分解為多屏，這樣在用戶看來，任務的數量就說可以接受的了。（子曰：賤人就是矯情，不服就是不行）

不同的字體可以給用戶帶來不同的情感體驗，同時也可以增加頁面的可讀性，以下是有關字體選擇的一些建議。

1，字體：選擇一種在多種尺寸和重量下均可正常使用的字體，以保持每種尺寸的可讀性和可用性。

2，字體大小：蘋果和谷歌建議至少22-24px，這樣用戶就可以在不縮放的情況下正常閱讀觀看。

3,顔色對比度，在使用字體時要避免字體顔色與背景色發生沖突，這裡可以參考色彩的6：3：1法則，即主要顔色應用于頁面的60％，輔助顔色應用于另外30％，最後10％作為與兩種主要顔色形成對比的強調顔色。

05

留出足夠的間距和填充

小屏幕不代表一定要用小文字，反而要更大放一些，留出更多的行間距來，如今科技日新月異，設計師需要保持随時更新自己的狀态，例如曲面屏的出現，需要在做設計時，增加相應的元素尺寸，以适應新的屏幕，避免誤操作。

如果按鈕較小，則很可能經常誤觸，所以按鈕尺寸一般至少在40pt以上，所以你現在知道某些無良商家為什麼把啟動頁上的跳過按鈕做這麼小了吧，就這麼湊表臉。下方圖中的px有誤，應該是pt。

每個app基本都會有标簽欄，但是設計的時候卻應該謹慎一點，如果一個圖标無法準确表達功能含義的時候，最好是用文字補充，而在标簽欄标簽過多時，則建議隻用文字，總之标簽欄設計的唯一标準就是要保持整潔精确。

對于移動端ui來說，用戶已經習慣固定的控件操作模式，所以設計師沒必要重新造輪子，例如tab或者抽屜導航。

越往後翻譯越覺得不對勁，這都是哪年的理論了，都2020年了還發這樣的文章，說好的國外的月亮比較圓呢，這是被狗啃過的月亮吧！

公衆号：知圖設計院

每天分享一篇國外優質翻譯文章以及設計視頻，歡迎關注。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!