UI設計 10大排版原則打造優秀使用者體驗

2022-10-07 22:54:11 字數 2529 閱讀 6110

對於ui設計而言,良好的排版並非只是漂亮的字型,視覺效果與內容風格的一致性也並非那麼簡單。這些看似空泛的需求,其實不難做到。今天火星時代與大家分享的是來自carrie cousins的排版原則,幫助大家打造出優秀的使用者體驗。

1、可讀性原則

網頁必須使用非襯線體字型這種想法已經過時了,但是這種說法背後的核心思想並不過時:文字必須是易於閱讀的。想要挑選易於閱讀的字型,手寫字型、哥特字型和過於新穎的字型應當盡量避免使用。

當然,如果是需要藝術性字型來做裝飾的場景就另當別論了。

可讀性優秀的字型在可識別性上也不錯,並且他們通常不會特別的「顯眼」。這些字型應該是「透明」的,這樣可以讓使用者無障礙、下意識地接受,這就是他們的工作原理。

2、確保行間距足夠寬

行間距是影響使用者閱讀體驗的關鍵因素之一,太過緻密會令人閱讀困難,有呼吸感的行間距則會令人著迷。尤其是如今大量使用者在手機和平板上閱讀,相對寬一點的行間距對於緩解閱讀大量內容有相當的緩解作用。

而要控制好行間距需要牽涉到好幾個變數:

·字型尺寸·段落長度·字型樣式·螢幕寬度

而非常遺憾的一點在於,並不存在乙個固定的換算公式可以幫你搞定這一切,不過可以這麼做:

·對於絕大多數**而言,最佳行間距應該是字型高度的125%。

·對於絕大多數移動端裝置而言,最佳行間距是字型高度的150%。

·寬鬆的行間距(比如直接空一行作為行間距)能讓內容更易於被識別和掃瞄。

·控制行間距的鬆緊,用雙眼來瀏覽段落進行測試,基於感覺來進行調整。

3、選擇有字母含有大圓角的字型

對於西文字型,含有較大圓角和內空的字型更易於閱讀。明顯的圓角弧度讓b和r這樣的字型易於被識別,而內空則是o和q這樣字母的標誌。

緊湊和緻密的字型讓眼睛難於辨識,而曾經在紙媒上流行過的較寬的標題字型,識別度就相當不錯,因為當字型拉寬之後,不同字母的差異就越發明顯。圓角弧度更大的字型看起來更接近於給孩子們設計的字型,而幼年時期對於字型所構建起的美學認知,是會伴隨人的一生的。

4、讓字型更大一點

毫無疑問,字型適當的放大會讓人感覺更舒服。當然,字型的大小通常取決於你的實際需求,而在處理大段文字的時候,就需要注意了。

雖然不同的設計師在文字的處理上有著不同的想法,但是通常大家會認為每行的字元數量應當控制在45~60個之間(中文也有乙個約定俗成的數量),而在移動端上,這個數量通常需要減半看起來才足夠舒適。

5、找x高度較高的字型

和中文字型不同,西文字型有上伸區和下降區,小寫字母x的高度是這套字型的x高度,小寫字母的整體比例會直接影響到閱讀的體驗。

x高度相對比例更大的字型更易於閱讀,換句話來說,就是小寫字母的高度更接近大寫字母的高度。最理想的情況是,字型的x高度處於大寫字母高度的三分之二到四分之三之間。

6、顯示字型的字距調整

細緻到位的字距調整能創造好的排版。正文的內容如此之多,仔細調整所有的字母間的字距當然是不現實的,而且也沒有這個必要。但是對於標題字型和展示字型,字距的調整就相當有必要了。

不同字母的筆畫角度都不盡相同,每對字母之間的距離進行適當調整,讓它們看起來像是天生一對那樣,這樣的細節能讓你的設計在諸多**設計中脫穎而出。

其實中文和日文的字型排版中也同樣用到了字距調整的技巧,使用平假名和片假名尤其多的日本,在標題和展示字型的排版上經常會用到字距調整,來確保整體的視覺體驗。

7、仔細思考比例

當你在為乙個專案挑選字型樣式的時候,將不同部分的尺寸比例想清楚對於後續的設計相當有幫助。可能聽起來好像有許多計算工作要做,但是並不一定麻煩,並且會對你的整個專案有極大的幫助。

我們之前所提到的行間距的設定,就是需要考慮的比例之一。除此之外,標題、副標題和正文的字型大小比例應當如何設定,怎麼樣設定尺寸大小才能營造出視覺的和諧感。剛剛開始把控比例的時候可能還不是太跟手,但是tut plus有乙個不錯的教程,可以幫你理解這件事。

8、筆畫統一的字型最理想

再看字型筆畫樣式,筆畫的寬度無疑是最重要的事情。超細的筆畫由於缺乏對比度大多難於識別,而筆畫太過於粗壯的字型可能存在同樣的問題,閱讀起來也相當的費眼睛。如果字型的粗細部分對比過於強烈、過於突然也可能帶來一定的顯示問題。

其實解決方案也不難,挑選字母筆畫粗細適中,且筆畫相對比較一致的字型就好了。這類字型可以相容更多的背景,在可讀性和適用性上相對更強。

9、克制地使用字型

只用兩種字型,再強調一次,只能用兩種字型。

控制字型型別的數量應該是每乙個專案的目標。太多使用者喜歡在乙個介面當中瘋狂地塞進各種不同型別的字型,這對於眼睛是災難性的,閱讀困難,甚至招致使用者厭倦。

你可以挑選兩個字型族作為常用字型——最多再挑選一款藝術字型用作展示之用——然後堅持使用這幾種字型。想清楚每個字型在什麼時候使用,在什麼地方使用,這其中應當涉及到字型的顏色、大小和位置。另外,在不同的頁面、不同裝置上,字型的使用應該是一致的。

10、提公升對比度

有許多時尚的網頁設計會讓背景和文字之間的對比度降低,營造出炫酷和融合的效果,但是內容的識別度就很低了,對於使用者而言並不友好。你的內容是**的核心之一,所以重要性是毋庸置疑的。將內容和背景之間的對比度提公升起來,讓每個詞都能在螢幕上清晰的識別出來,讓使用者輕鬆地獲取資訊。

**所包含的文字內容越多,排版設計的重要性就越突出。排版結構舒適穩定、對比度明顯和諧、安全用色都是你必須做到的事情。

UI設計流程

總結 1.產品定位與市場分析這一類工作大多都是由新產品研發部門以及市場需求完成的,但ui設計師應了解產品的市場定位 產品定義 客戶群體 運營方式等。2.使用者研究與分析這個過程是非常重要的,設計師應該找到合適的方法來完成此環節。你可以蒐集相關資料分析目標使用者的使用特徵 情感 習慣 心裡 需求等,提...

學UI必看ui設計教程之ui學習方法

當前我國移動網際網路等新興網際網路產業進入了高速發展的階段,產業規模不斷擴大,增速飛快,使用者體驗至上的時代已經來臨。隨著技術領域的逐步拓展,產品生產的人性化意識日趨增強,使用者介面設計師 即ui設計師 也成為了人才市場上十分緊俏的職業。ui設計月薪多少錢?需要招聘該型別人才的企業不僅僅侷限於移動網...

UI設計規範

一 設計原則 1 以使用者為中心。設計由使用者控制的介面,而不是介面控制使用者。2 清楚一致的設計。所有介面的風格保持一致,所有具有相同含義的術語保持一致,且易於理解和使用。3 擁有良好的直覺特徵。以使用者所熟悉的現實世界事務的抽象來給使用者暗示和隱喻,來幫助使用者能迅速學會軟體的使用。4 較快的響...