新浪体育手机新浪网一
UI中的文字設計總結與分析
技術文檔    發布日期:2017-06-19 10:16   來源:

對于設計師來說,文字是一個可以很好提升產品用戶體驗的武器,希望這篇文章能夠給各位設計師帶來收獲。

文字是UI設計中一個重要的組成元素,文字使用的好壞會極大影響產品的用戶體驗。想象一下用戶打開你的app,發現界面中的文字都是同一個字體,同樣大的字號,連顏色都是一樣的。這樣的文字搭配用戶讀起來會很累,費時費力。用不了多久他們就可能會卸載你的產品,轉而使用另一個界面設計更加友好,文字搭配更加合理的產app。文字對界面設計的重要性可見一斑,但是文字經?;岜晃頤嗆鍪?,這篇文章中我對UI設計中文字的使用做了一個簡單的分析和總結。

建立視覺層級

設計師的一個主要職責就是將頁面中的元素整合起來,以一種清晰可見的形式呈現給用戶。當然我們都知道一個頁面中不同元素的重要性是不一樣的,有優先級之分。文字也是一樣,有些文字比較重要,我們更希望用戶看到,有些文字比較雞肋我們不希望用戶看到。為了達到這個目的,我們給界面的文字建立視覺層級,將文字大致分為三類:主標題,次標題和正文。

主標題

主標題是對于整個頁面內容的一個總結,合格的主標題用戶看了一眼就應該知道這個頁面的大致內容。主標題是用戶進入一個頁面第一眼就應該看到的文字。主標題應該用字號要足夠的大,要加粗,這樣才可以更好的吸引用戶的注意力。此外,為了更好的節約用戶時間,主標題應該簡練。根據Jacob Nielsen的一項研究表明,主標題5-6個單詞(英文狀態下)最合適,最長不要達到一句話的長度。

我們強調要突出主標題來吸引用戶注意力,但是不要過度突出。因為用戶對于具象元素(插畫,icon,圖像或攝影圖等)的感知能力遠比文字要強得多。如果我們想宣傳一款產品,那么最好的方案就是直接給用戶展示產品圖片。文字和圖片搭配使用的時候,文字起到的只是輔助說明的作用。我們不能過度放大主標題的尺寸造成對圖片的遮蓋,這樣是本末倒置的。

次標題

將所有的信息都塞進主標題是不太現實的,這也是我們需要次標題的原因。次標題的要求和主標題類似,都要求文字簡潔干練,概括性強。和主標題一樣,次標題也要進行加粗處理,當然為了和主標題區分,字號要稍微小點。

正文

正文是提供詳細說明和解釋的文字,從頁面層級的角度來說重要性要低于主標題和次標題。正文文字長度沒有定論,有人認為長的文案可以給用戶提供更為詳細的信息,而且看起來更加正規嚴謹。但是也有人認為用戶不喜歡閱讀過長的文字。兩種觀點都有自己的道理,對于使用長文案還是短文案我做了以下總結:

設備

短文案適用于移動端。移動端相對來說空間有限,文字太多會顯得比較擁擠,影響頁面美觀程度的同時也會降低用戶的閱讀體驗。

長文字更適用于PC端,PC有足夠的空間來展示特定內容的詳細信息或者用戶不太熟悉的內容(需要用戶仔細閱讀)。

這是一個家禽百科全書網站,這里面雖然包含了大量的文字,但是設計師將文字在邏輯上分為了許多簡短而集中的文字塊。這些文字塊配以突出的標題和引人入勝的插圖就變得具有活力。這種設計模式打破了傳統教育類網站沉悶的頁面布局,更能吸引用戶特別是青少年的注意力。

產品定位

產品的定位對于正文文案的選用是具有決定性意義的。例如,你要設計一個讀書,旅行這類偏文藝小眾的界面,正文文案要足夠的短,頁面中要有大量的留白,這樣的頁面會給用戶一種透氣、從容、開放、平靜、自由的感覺,而這些感覺都是與產品的風格相契合的。相反,如果這類頁面中元素都擠在一起,就會導致視覺壓力,引發用戶緊張。當然并不是所有擁擠的頁面設計都會引發緊張情緒,如果文字和頁面中其他元素之間的空間處理的合適,行間距留的足夠大,那么也可以做到做保持內容的可讀性的同時保留了頁面的“呼吸感”。

PS:正文因為字體尺寸比較小,所以我建議使用無襯線字體。因為設備顯示器的像素不足以表現小字體上細小的襯線,會出現鋸齒效果,對易讀性影響很大。所以我建議正文使用無襯線字體,如果非要使用襯線字體,需要在不同的設備上測試字體的實現效果。

行為召喚元素

想讓自己設計出來的界面不那么死板,具有可交互性,我們就要學會使用行為召喚元素。當然一些行為召喚元素不需要文字也可以完成,比如我們的接電話按鈕或者短信提示,都是使用圖標來完成。但是在一些特點情況下,內容過于抽象無法用圖標來詮釋的時候,我們應該使用文字。

行為召喚元素對于文字長度的要求極其嚴苛,最好是一個單詞或者2-4個單詞組成的短語(英文狀態下)。

輕型文字的趨勢

從2016年開始,源于對干凈精致界面的追求,輕型文字越來越受到設計師的歡迎。歸根結底,輕型文字是簡約設計趨勢的產物,字體越來越細長。但是我們要記住,這種過于狹長字體在節省頁面空間的同時,犧牲的是文字的易讀性,這是我們在權衡是否使用輕型文字時需要考慮的問題。

不過iOS10的Apple Music界面中開始對字體加粗,所以未來字體是變得越來越粗還是越來越細,我們拭目以待。

總結

總而言之,對于設計師來說,文字是一個可以很好提升產品用戶體驗的武器,希望這篇文章能夠給各位設計師帶來收獲。

#關于作者#

王M爭,人人都是經理關于作者,資深互聯網人。

本文未經許可,禁止轉載。

?
地址:深圳市南山區創業路南光商務大廈2-1114    Email:[email protected]    Tel:0755-86176995    中國 · 深圳
Copyright ? 2006 -2020 深圳匯網在線 All Right Reserved.    粵ICP備14062458號-1


咨詢電話:0755-86176995
{ganrao} 铃木一彻 麻将玩法详解 日本a片王 河北省十一选五 模拟炒股和真的一样吗 全国最大的色情网坫 幸运飞艇论坛 湖南幸运赛车 北京单场sp值即时指数 干里马排列三预测 新浪足球比分直播500万 麻将外挂真的假的 爵士vs 天津福彩快乐10分钟开奖查询 手机麻将上分能玩吗