文字是界面設(shè)計中最基本的構(gòu)成之一夺欲,如何定義網(wǎng)頁設(shè)計中的文字系統(tǒng)展运?可大體分為三步:
系統(tǒng)全面地了解文字的基礎(chǔ)知識播掷、顯示方式、影響因素及當(dāng)前網(wǎng)頁設(shè)計中適合的文字系統(tǒng)猜煮;
梳理出自己團(tuán)隊所有產(chǎn)品文字使用情況次员;
綜合第1步、第2步總結(jié)出適合團(tuán)隊業(yè)務(wù)的文字系統(tǒng)王带。
字符屏幕顯示原理
? 1. 字符
字符是指計算機(jī)中使用的字母翠肘、數(shù)字、標(biāo)點符號等等辫秧。
計算機(jī)最初發(fā)明出來是用來解決數(shù)字計算問題的束倍。
后來發(fā)現(xiàn),計算機(jī)還可以做更多的事盟戏,例如文本處理绪妹。其實計算機(jī)挺笨的,它讀到的所有字符都是由1和0組成的字符串柿究,因為計算機(jī)電路只有兩種狀態(tài)邮旷,「開」和「閉」,對應(yīng)「1」和「0」蝇摸。計算機(jī)也只可以直接存儲和處理二進(jìn)制數(shù)字婶肩。
? 2. 二進(jìn)制
「二進(jìn)制」是數(shù)字世界里的基本規(guī)則办陷。
下面這些不同格式的文件,在本質(zhì)上都是一串由1和0組成的代碼律歼,要了解這些文件首先要了解二進(jìn)制民镜。人有十根手指頭,但計算機(jī)電路只有「開」和「閉」兩種狀態(tài)险毁,所以滿十進(jìn)一位的計數(shù)方式更適合人類計算制圈,而滿二進(jìn)一的二進(jìn)制更適合計算機(jī)。計算機(jī)只需要1和0這兩個數(shù)字就可以傳遞一切信息畔况。
△ MP4
△ MP3
△ JPG
△ TXT
△ AVI
以圖像為例鲸鹦,我們用電腦或手機(jī)看到的圖像都是在某個角落里存儲著下面這樣的一串?dāng)?shù)據(jù)。開頭的16位翻譯過來就是 BMP文件開始的標(biāo)識跷跪。
BMP文件標(biāo)識后面的數(shù)字就是圖像的各項基本信息馋嗜。
△ 圖像的各項基本信息
△ 顏色深度
最開始的24位,都是1吵瞻,像素顯示為紅嵌戈、綠、藍(lán)三種顏色听皿,相加后顯示為白色。
接下來的24位宽档,前8位是1尉姨,后面都是0,像素顯示為紅色吗冤。
再后面24位的前16位都是1又厉,最后8位為0,像素顯示紅椎瘟、綠兩色,相加后顯示為黃色肺蔚。
根據(jù)這樣的規(guī)則整個55×55的格子鋪滿顏色就得到一張完整的圖片宣羊。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色璧诵。
△ 二進(jìn)制圖片生成方式
△ 色光三原色和顏料三原色區(qū)別
下面所有文件的顯示都和圖像顯示例子一樣,文件中的1和0按照人們事先設(shè)計好的規(guī)則排列好仇冯,只需要找到正確的打開方式按照特定的規(guī)則來解讀這些數(shù)據(jù)之宿,我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規(guī)則排列的苛坚?我們又要用怎樣的方式來解讀比被?這就用到了擴(kuò)展名色难,在文件的名字后面加幾個特定的字符,就可以幫助系統(tǒng)辨別出文件的類型等缀,從而提示電腦去按照某種特定的規(guī)則來正確解讀其中的信息枷莉。
△ MP4格式擴(kuò)展名
△ MP3格式擴(kuò)展名
△ JPG格式擴(kuò)展名
△ TXT格式擴(kuò)展名
△ AVI格式擴(kuò)展名
更多其他文件拓展名:
? 3. 字符編碼
為了在計算機(jī)上顯示字符,必須將字符轉(zhuǎn)換成二進(jìn)制數(shù)字项滑。所以就有了統(tǒng)一枪狂、標(biāo)準(zhǔn)字符轉(zhuǎn)換規(guī)則,即字符編碼泞当。字符編碼是給所有的漢字定一個獨一無二的數(shù)字編號,并用1和0來表示這個數(shù)字編號。
文字的一個字符對應(yīng)一個編碼(碼點)哑蔫,而編碼對應(yīng)字符集里的一個「字」,字符通過字符集與「字」相連腥沽。像圖中所示Unicode、GB 2312酣栈、Shift_JIS 都是字符集,其主要作用是為每一個「字」分配一個編碼窖维。
△ 文本編碼流程
字符集里的每一個編碼對應(yīng)的是一個「字」而不是「字形」鼻疮,也就是一個「字」在不同的地區(qū)或標(biāo)準(zhǔn)中可能有不同的「字形」,但字符集中只能對其分配一個編碼(除非相差過大挪哄,比如簡化字),要顯示其不同的「字形」要通過使用為不同地區(qū)或標(biāo)準(zhǔn)設(shè)計的字體來實現(xiàn)斯入。
△ 字異形(左簡體中文,右日文)
? 4. 編碼發(fā)展史
ASCII
ASCII(American Standard Code for Information Interchange磅摹,美國信息交換標(biāo)準(zhǔn)代碼)出現(xiàn)在上個世紀(jì)60年代的美國杀怠,ASCII 一共定義了128個字符橙依,包括英文字母 A-Z窗骑,a-z,0-9软族,一些標(biāo)點符號和控制符號掖疮。ASCII 采用的編碼模型是簡單字符集,在英語系國家里 ASCII 標(biāo)準(zhǔn)很完美搁宾。但是世界上有好幾千種語言猛铅,其他語言系的國家想使用計算機(jī),ASCII 就遠(yuǎn)遠(yuǎn)不夠了栗菜。所以編碼進(jìn)入了混亂的時代。
△ ASCII編碼
混亂時代
計算機(jī)的一個字節(jié)是8位而咆,可以表示256個字符。ASCII 使用了7位涯捻,所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規(guī)定好的128個字符沒有異議涛浙,但是不同語系的人對于其他字符的需求不一樣晾捏,所以對于剩下的128個字符的擴(kuò)展千奇百怪。而且在亞洲語言系統(tǒng)中有更多的字符胖齐。于是就又產(chǎn)生了各種多字節(jié)表示一個字符的方法,每個語系都有自己特定的編碼頁(code pages)添坊,這就使整個局面更加混亂不堪雨女。這時 Unicode 出現(xiàn)了。
Unicode
Unicode 就是給計算機(jī)中所有的字符各自分配一個代號野蝇。Unicode 可以認(rèn)為是字符的編號绕沈,它為每種語言中的每個字符設(shè)定了統(tǒng)一并且唯一的二進(jìn)制編碼赠摇,Unicode 字符集和編碼方式解決了跨語言抒蚜、跨平臺的交流問題操漠。但在 Unicode 里每一個字符都是用4個字節(jié)來編碼撞秋,原本英文字母僅需1個字節(jié)編碼,中文需2~3個字節(jié)編碼即可舅列,這對于存儲或傳輸資源而言是很不劃算的。
UTF-8
UTF-8 基于 Unicode 編碼的一種節(jié)約字節(jié)的編碼榨惠,是一種可變長度字符編碼方式。在UTF-8編碼中简烤,英文字母是一個字節(jié),中文(非生僻字)是2~3個字節(jié)枉侧。可以認(rèn)為翼虫, UTF-8 是對 Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節(jié)約了存儲空間和傳輸帶寬招拙,因而受到了極大的推廣應(yīng)用饰序。并且 UTF-8 兼容 ASCII 字符集。
UTF:Unicode Transformation Format
? 5. 中文編碼類型
△ 中文編碼類型
文字基礎(chǔ)知識
? 1. 文字
「文字」是信息交流的工具,可讀性是晨、易讀性至關(guān)重要。在網(wǎng)頁設(shè)計中文字使用需要考慮幾個要素:首先考慮字體箫章,其次是字重、字號桶至、行高、字間距女蜈、行間距、段間距等覆山。
△ 字體聊倔、字重
△ 字間距见妒、字號、行高
△ 行間距耻卡、段間距
? 2. 字體
「字體」是文字的外在形式特征,不同的字體有不同的性格。
字體種類
綜合中文瘸羡、英文都適用的廣義分類。
襯線、無襯線
△ 襯線和無襯線差異1
△ 襯線和無襯線差異2
字體 – 中文
字體構(gòu)成:
△ 筆畫
中宮,是指等分成九個小方格最中間的那一格雾棺。
△ 中宮
△ 中宮和字體關(guān)系
△ 中宮緊湊工秩、中宮松散
間架結(jié)構(gòu),漢字種類眾多,筆劃不等掉分,空間排布極為重要。字體的間架結(jié)構(gòu)可分為兩類:單體字不从、合體字。
△ 單體字 間架結(jié)構(gòu)
△ 合體字 間架結(jié)構(gòu)
漢字字形眾多撵颊,有些字形會產(chǎn)生視覺大小變化,頂格妻熊、縮格、出格就是針對不同結(jié)構(gòu)的字體筆畫特征進(jìn)行微調(diào)亿胸,讓他們看起來更加均衡、等大、視覺更完整潘悼。
△ 調(diào)整前
△ 調(diào)整后
字形調(diào)整實例:
襯線、無襯線字形演變:
△ 襯線 字形演變
△ 無襯線 字形演變
字體對比:
微軟雅黑、方正蘭亭黑簡體、思源黑體榄檬、蘋方-簡,筆畫寬度均勻舱殿,橫平豎直。同一字號冈绊,微軟雅黑最粗,小字號時閱讀會較為吃力毅该。方正蘭亭黑從微軟雅黑派衍生出來,可以更好地適應(yīng)其他應(yīng)用場合畏线。
黑體蒿叠、華文黑體、冬青黑體筆畫末端寬度不同施绎。
字體 – 英文
「字谷」概念來自西文字母設(shè)計,字谷指字母中部分或完全封閉的空間,即字母當(dāng)中留白部分遇八。
英文的字體結(jié)構(gòu)是由4條平行線組成,有時候是5條揽碘,但是一般大寫線會忽略∫磋耄「基線」在西文中是標(biāo)準(zhǔn),單個字母的所有立腳點都是在這條線上(除了 g雀久、j、p越庇、y)涩惑。英文文字結(jié)構(gòu)多種多樣,4條平行線的位置也會發(fā)生改變痊硕。
升部:上緣線和主線之間的內(nèi)容此衅。
降部:下緣線和基線之間的內(nèi)容骑歹。
字體對比:Helvetica Neue、Arial最域、DIN
Helvetica Neue:中性,無襯線薄翅,現(xiàn)代主義風(fēng)格字體。字體末端嚴(yán)格保持橫平豎直暑竟,性格嚴(yán)謹(jǐn)绩鸣、保守,沒有任何的修飾捡多,適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本科贬,擁有更多的字重,更易于不同場合的應(yīng)用憎账。字形則相對偏胖,筆畫更清晰反砌,而且小字號的情況下可讀性也很高。
Arial:Arial 是一套隨同多套微軟應(yīng)用軟件所分發(fā)森渐,無襯線。該字體比例及字重和 Helvetica 極相似耐齐,其實是 Monotype Grotesque 系列的衍變耸携。在字體及字距上都做了一些細(xì)微的調(diào)整和變動,以增加它在電腦屏幕的不同分辨率的可讀性沟沙。
DIN:字形瘦長,無襯線颊咬,適合顯示比較長的數(shù)字,但是小字號的情況下識別度較低杭隙。DIN 字體在德國有著悠久歷史票髓,是交通標(biāo)志以故、路牌、門牌和車牌的標(biāo)準(zhǔn)字體昆烁。雖然曾經(jīng)是德國納粹使用的字體,但是經(jīng)過設(shè)計和重新升級鼠渺。DIN 在雜志鹃祖、海報以及其他各種設(shè)計領(lǐng)域都被廣泛地使用。
Helvetica Neue楷兽、Arial、DIN 數(shù)字對比:
? 3. 字重
「字重」是同一種字體的不同字形粗細(xì)揭厚,即字體重量。字重的劃分根據(jù)不同字體廠商各有不同太援,不同的字重稱呼也可以不一樣,常見的劃分如下:
在排版中,一種字體會在標(biāo)題赛惩、正文、說明注釋等不同內(nèi)容下使用褒搔,單一的字重不能很好適應(yīng)排版需求走孽,于是衍生出了同一個字體的不同字重。
? 4. 字號
「字號」是字體的高度,不同平臺字號規(guī)范不同硕盹。
在界面設(shè)計中,文字字號決定了信息層次和權(quán)重。首先要設(shè)定基準(zhǔn)字號(最小字號)聘惦,然后可依據(jù)一定規(guī)律設(shè)定導(dǎo)航、標(biāo)題等稍大字號涂邀。一般網(wǎng)頁基準(zhǔn)字號有12px、14px、16px等臊恋。
字號也受閱讀距離影響,眼睛到屏幕距離40~70cm环凿,為較適合的閱讀距離。
Ant Design 定義的電腦顯示器閱讀距離(50 cm)從原先的12上升至14,以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。
? 5. 行高
「行高」可以理解為一個包裹在字體外面的無形的盒子悔雹。字號和行高決定著一套字體系統(tǒng)的動態(tài)與秩序之美。
西文:西文基本行高是字號的1.2倍左右,字體有上伸部(ascender)和下延部(descender)可來創(chuàng)造行間空隙闲询。
中文:中文因為字符密實且高度一致,所以一般行高需要更大浅辙,根據(jù)不同人群的特點(兒童扭弧、年輕人、老年人)以及使用環(huán)境记舆,可達(dá)到1.5~2倍甚至更大鸽捻。
Ant Design 受到5音階以及自然律的啟發(fā)定義了10個不同字號以及與之相對應(yīng)的行高厚满。
? 6. 字間距
「字間距」是指一組字母之間相互間隔的距離团搞,受字偶距和字體影響复隆。
字偶距:是指兩個字母(或其他字符,比如數(shù)字察署,標(biāo)點符號等)之間的空白扳埂。不同的字母有不同的外形克饶,所以字體使用相等的字間距是不協(xié)調(diào)的邀跃。所以需要調(diào)整字偶距來提升可讀性僵驰。
按字間距可分類為:比例字體(Proportional)和等寬字體(Monospaced)。
比例字體:根據(jù)字符外形特點設(shè)置不同字距的字體久信,這種字體外形協(xié)調(diào)痊项,可讀性好。
等寬字體:每個字符設(shè)置相同字距的字體,其優(yōu)點是可以很好的控制排版對齊十酣。
? 7. 行間距
行間距(line spacing / leading):行與行之間的距離搓彻,作為一段文本中的留白蜕提,行間距讓字與字之間有了可呼吸的空間,行間距對文章的易讀性有很大影響趁蕊。
排版推薦使用行間距1.2~2倍。
如何設(shè)定行間距参袱,如何規(guī)范行間距
行間距由行高決定竹观,為了確保可讀性增加行間距九默,就需要增加行高耳峦。舉個例子:字號12幸乒,行高設(shè)定20扮惦,那么行間距=「(行高-字號)÷2」×2等恐,除2又乘2同欠,我就簡單的簡化成行間距 = 行高 – 字號粮坞,那么行間距就是20-12=8,并且可以將這個數(shù)值固定下來痘番,重復(fù)使用。
注:至于為什么是20访惜,因為最初一個字節(jié)用8個二進(jìn)制位來表示窒篱,所以現(xiàn)在的很多網(wǎng)頁設(shè)計中常用到8观腊。12+8=20,參考 Ant Design信轿,網(wǎng)上有很多設(shè)計師總結(jié)的行間距計算方法绰疤,對于一個數(shù)學(xué)不好的我來說转捕,參考已有總結(jié)和經(jīng)驗得出的數(shù)值矾瑰,固定這個數(shù)值重復(fù)使用尊残,這樣最簡單惰赋。
? 8. 段間距
段間距(paragraphs spacing):段落與段落之間的距離球切,可保持頁面節(jié)奏怠堪,與字體邮破、行高相互關(guān)聯(lián)受裹。為保證文章易讀性滑蚯,正文段間距管钳,可以簡單地取一個空行(也就是一個行高),這是比較常規(guī)也比較合適的做法。舉個例子:字號12,行高設(shè)定20芥永,段間距 = 行高 + 行間距呼猪。
? 小結(jié)
要設(shè)置「有節(jié)奏感的文本內(nèi)容」就要遵循這些規(guī)則:段間距大于行高棕所,行高大于行間距截粗,行間距大于字間距珊蟀。
字體選用基礎(chǔ)原則
? 1. 網(wǎng)頁文字顯示方式
網(wǎng)頁設(shè)計內(nèi)容一般都是通過電腦各種瀏覽器來承載顯示的,瀏覽器顯示字體是直接讀取用戶操作系統(tǒng)里的字體外驱。
? 2. 字體選用原則
字體是界面設(shè)計中最基本的構(gòu)成之一育灸,科學(xué)的字體系統(tǒng):始終保證信息具有優(yōu)秀的易讀可讀性,提升用戶的閱讀體驗及工作效率略步。
原則一:字體優(yōu)先使用各操作系統(tǒng)默認(rèn)的字體描扯。
原則二:有版權(quán)、筆畫嚴(yán)謹(jǐn)趟薄、清晰可讀绽诚、經(jīng)典。
? 3. 操作系統(tǒng)
下圖數(shù)據(jù)來源:世界互聯(lián)網(wǎng)市場份額統(tǒng)計網(wǎng)站 Net MarketShare杭煎。
△ 操作系統(tǒng)市場占有率 TOP10
各操作系統(tǒng)默認(rèn)字體:
? 4. 瀏覽器
電腦瀏覽器直接讀取用戶操作系統(tǒng)里的字體恩够,不同瀏覽器對文字的渲染方式不同,因此了解市場瀏覽器使用情況很有必要羡铲。
下圖數(shù)據(jù)來源:世界互聯(lián)網(wǎng)市場份額統(tǒng)計網(wǎng)站 Net MarketShare
? 5. 字體版權(quán)
除了操作系統(tǒng)默認(rèn)字體蜂桶,其次需要優(yōu)先選擇使用的就是已購版權(quán)字體,如果沒有已購買的字體也切,可考慮一些免費字體扑媚,非免費字體使用時需謹(jǐn)慎。
△ 公司常購版權(quán)字體
文字規(guī)范
? 1. 字體規(guī)范
字體使用三原則
體系化:在同一個系統(tǒng)UI設(shè)計中先建立體系化的設(shè)計思路雷恃,對主疆股、次、輔助倒槐、標(biāo)題旬痹、展示等類別的字體做統(tǒng)一的規(guī)劃,再落地到具體場景中進(jìn)行微調(diào)。建立體系化的設(shè)計思路有助于強化橫向字體落地的一致性两残,提高字體應(yīng)用的性價比永毅,減少不必要的樣式浪費。
重復(fù):重復(fù)設(shè)計中出現(xiàn)的一個或多個內(nèi)容人弓。任何事情都可以重復(fù)沼死。字體、字重字號票从、顏色漫雕、一條線、各種形狀(如圓形峰鄙、正方形或三角形)等浸间。字體使用最好不要超過3種,一般同一個系統(tǒng)UI設(shè)計內(nèi)容的字體數(shù)量建議2種即可吟榴,中文一種魁蒜、英文數(shù)字一種。且字體樣式上也遵循重復(fù)原則吩翻,避免毫無意義的使用大量字號兜看、顏色、字重狭瞎、行高等细移。
韻律:在需要拉開差距的時候可以嘗試選擇對比大的字體字號,令字號之間產(chǎn)生一種微妙的韻律感熊锭。為保證良好的閱讀體驗弧轧,每行保持適當(dāng)?shù)淖址麛?shù)量。每行上擁有適當(dāng)?shù)淖址麛?shù)量是文本可讀性的關(guān)鍵碗殷。如果每行文字太短精绎,視線必須反復(fù)折回來,打破讀者的節(jié)奏锌妻。如果一行文字太長代乃,用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符仿粹,因為會大大延緩用戶掃描和閱讀的速度搁吓。
現(xiàn)有產(chǎn)品字體統(tǒng)計
字體規(guī)范
綜合考慮不同操作系統(tǒng)選用最佳字體體驗。
代碼聲明:
Font-family:Helvetica Neue, Helvetica, Arial, 「蘋方-簡」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif吭历。
英文字體:首先查找Helvetica Neue(Mac)擎浴,然后查找Helvetica(Win),都找不到就用Arial(Mac&Win)毒涧;若是以上三者都缺失,則使用當(dāng)前默認(rèn)的sans-serif字體(操作系統(tǒng)或瀏覽器指定);
中文字體:選用平臺默認(rèn)中文字體 蘋方-簡(Mac)契讲,微軟雅黑(Win)仿吞。
? 2. 字重規(guī)范
一般情況下會選用「一粗一細(xì)」兩種字重。
粗體:在視覺面積上較重捡偏,筆畫加粗唤冈,字腔(筆畫間空間)小,突出顯示银伟,產(chǎn)生強調(diào)作用你虹。常用于標(biāo)題和標(biāo)語。
細(xì)體:在視覺面積上較輕彤避,筆畫輕細(xì)傅物,字腔(筆畫間空間)大,結(jié)構(gòu)疏朗清透琉预,閱讀時不會讓讀者產(chǎn)生壓迫感董饰。常用于正文和說明。
中文圆米、英文推薦使用字重:
? 3. 字號規(guī)范
現(xiàn)有產(chǎn)品字號統(tǒng)計
字號規(guī)范
? 4. 行高規(guī)范
參考:Ant Design 受到5音階以及自然規(guī)律啟發(fā)定義了10個不同字號以及與之相對應(yīng)的行高卒暂。
? 5. 字間距規(guī)范
使用比例字體,根據(jù)字符外形特點設(shè)置不同字距的字體娄帖,這種字體外形協(xié)調(diào)也祠,可讀性好。
? 6. 行間距規(guī)范
顏色規(guī)范
? 1. Ant Design 兩大色彩體系
Ant Design 兩大色彩體系:系統(tǒng)級近速、產(chǎn)品級诈嘿。
系統(tǒng)級色彩體系
系統(tǒng)級色彩體系主要定義了螞蟻中臺設(shè)計中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板数焊。
基礎(chǔ)色板:12個主色(薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍(lán)/極客藍(lán)/醬紫/法式洋紅)以及衍生色共120個顏色永淌。
中性色板:黑、白佩耳、灰遂蛀,從白到黑共10個顏色。
數(shù)據(jù)可視化色板:敬請期待干厚。
產(chǎn)品級色彩體系
產(chǎn)品級色彩體系則是在具體設(shè)計過程中李滴,基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。
品牌色應(yīng)用:品牌色取自基礎(chǔ)色板的藍(lán)色#1890FF蛮瞄,應(yīng)用場景包括:關(guān)鍵行動點所坯,操作狀態(tài)、重要信息高亮挂捅,圖形化等場景芹助。
中性色:中性色主要應(yīng)用在文字部分,此外背景、邊框状土、分割線等場景中也非常常見无蜂。
功能色:功能色代表著明確的信息及狀態(tài),如成功蒙谓、出錯斥季、失敗夜矗、提醒驮履、鏈接等。
? 2. 系統(tǒng)級 中性色
中性色包含了黑讹挎、白谤专、灰躁锡。在網(wǎng)頁設(shè)計中被大量使用,合理的選擇中性色能夠令頁面信息具備良好的主次關(guān)系毒租,助力閱讀體驗稚铣。中性色板一共包含了從白到黑的10個顏色。
? 3. 產(chǎn)品級 中性色
Ant Design 的中性色主要應(yīng)用在文字墅垮、背景惕医、邊框、分割線等場景中算色。產(chǎn)品中性色的定義需要考慮深色淺色背景的差異抬伺,同時結(jié)合 WCAG 2.0標(biāo)準(zhǔn)。中性色在落地的時候是按照「透明度」的方式實現(xiàn)灾梦。
VIP大數(shù)據(jù)用戶體驗部 的中性色也是主要應(yīng)用在界面的文字峡钓、背景、邊框若河、分割線等場景中能岩。考慮到深淺色背景的差異萧福,中性色根據(jù)設(shè)計需求在落地的時候可按照色值和透明度兩種方式實現(xiàn)拉鹃,兩種方式優(yōu)先使用色值方式,盡量避免兩者混搭使用鲫忍。
? 4. 產(chǎn)品級 功能色
功能色代表了明確的信息以及狀態(tài)膏燕,比如成功、警告悟民、失敗坝辫、提醒、鏈接等射亏。
功能色的選取需要遵守用戶對色彩的基本認(rèn)知近忙。在一套產(chǎn)品體系下竭业,功能色盡量保持一致,不要有過多的自定義干擾用戶的認(rèn)知體驗银锻。
文案
文案內(nèi)容來源于 Ant Design永品,一文一字之間可研究琢磨的空間還很大。
分享一個感觸很深的例子击纬,里面有一個專業(yè)用語「閾yù值」和「閥fá值」,這兩個字一開始我看了很久才看出來區(qū)別钾麸,查資料了解到更振,其實「閥fá值」在專業(yè)行業(yè)里是一個錯別字,是一個錯誤的用詞饭尝,其正確用法是「閾值」是所屬行業(yè)認(rèn)可通用詞肯腕。「閾yù值」又叫臨界值钥平,是指一個效應(yīng)能夠產(chǎn)生的最低值或最高值实撒。
所以精準(zhǔn)、清晰的語言會更容易讓用戶理解涉瘾,合適的語氣更容易讓用戶建立信任感知态。因此在界面設(shè)計時,在使用和定義文案時要注意以下幾點:
從用戶角度出發(fā)立叛;
表述一致负敏;
重要的信息放在顯著位置;
專業(yè)秘蛇、精準(zhǔn)其做、完整;
精簡赁还、友好妖泄、正面。
在有限的空間內(nèi)將重要的信息放在最前面艘策,讓用戶第一眼看到最重要的內(nèi)容蹈胡。(或通過高亮、留白等方式突出重要信息)柬焕。
結(jié)語
因為硬件軟件一直在變化审残,設(shè)計規(guī)范和內(nèi)容也要定時更新,規(guī)范是為了在繁多復(fù)雜業(yè)務(wù)中尋求一種平衡斑举,幫助各團(tuán)隊更高效的完成任務(wù)搅轿,有些內(nèi)容適合強制規(guī)定,有些內(nèi)容適合規(guī)范一個范圍富玷,有些內(nèi)容適合制定一種規(guī)律方法……當(dāng)出現(xiàn)特殊情況時需要重新審視和不斷完善靈活使用璧坟。