
需要掌握哪些UI的基礎知識
大家都知道一個道理,無論從事哪個行業,都需要有大量的知識儲備,才能在工作中得心應手。那么,從設計師的角度來說,多層面的廣泛的知識儲備當然也是必須的。只有你在各知識領域都能“碾壓”客戶的時候,你才能作為他們的顧問和指導者。那么學習都是要從基礎開始的,那么在UI行業里,基礎的知識,有哪些是你必須要掌握的呢。
明確設計目標
所有的設計都必須在這個前提之下進行。以下提到的數值只是一個參考,更重要的是你想通過頁面傳遞給用戶的信息,明確設計目標,以此對你的設計進行調整。否則,設計的意義便不存在了。
字體大小
material design對方塊字主標題和內容文字的大小分別定為24sp和15sp,24/15=1.6,接近黃金比例;airbnb的主標題和內容文字的比例同樣接近黃金比例。
實際上黃金比例的字號對比在移動端是一個適合突出主題的比例,是一個“美”的比例,但并不一定是一種適合閱讀的比例。一個以閱讀為主的頁面在字號選擇上可能需要較小的比例,若是你在字號的選擇上缺乏信心,也可以用一些工具進行輔助選擇,比如Modular Scale(Adobe的排版負責人Tim Brown創建的工具),其中囊括了歷史上最令人滿意的幾種比例關系,通過這個比例進行匹配至少可以保證不出錯。
文字留白
留白:即在版面中留出空余的空間,處理好留白能使文本視覺流平順,提升閱讀舒適性。對于一篇文章而言,留白從小到大分別有文字中的空白、文字與文字之間的空白、行與行之間的空白、段與段之間的空白,留白面積的大小也要遵循這個順序。
行間距的設定:行間距的設定直接影響了視線從前一行末尾移動到下一行開頭的難易。行間距過高導致視線分散,容易游離;行間距過小則容易影響視線的移動,讓人找不到正在閱讀哪一行。普遍認可的做法是將行高設置為1.5em-2.0em。在這個基礎之上,字體樣式、大小、行寬還會對行間距的設定有一定的影響。
段間距的設定
段落與段落之間需要有一定的距離,如果這段距離過小,同樣影響視線的移動,過大則容易導致上下文的聯系變得松散。普遍做法也是將段間距設定為2.0em。
對齊方式
文本的對齊方式主要有四種:左對齊、居中對齊、右對齊以及兩端對齊。一般來說,移動端文本的對齊主要采用的是左對齊或兩端對齊,這里簡要談一談這兩種對齊方式的優劣。
左對齊:代表應用主要是「豆瓣、簡書、知乎」。左對齊容易造成右端留白過多,整體視覺失衡,但是這種對齊方式不破壞文字本身的起伏和韻律,能保證較好的閱讀體驗
兩端對齊:代表應用是「微信讀書、部分微信公眾號」。兩端對齊可以保證段落文字整齊劃一,成規整的塊狀,但是打破了文字和字間空白之間形成的韻律,閱讀起來未必舒適。(特別是在大量使用英文的情境下)
對比度
一個優質的頁面需要有足夠的文本對比度。對于閱讀的內容來說,對比度過于強烈和過于微弱都是不利于閱讀的,Material Design中推薦的文本對比度為7:1,最小值為4.5:1。