圖標(biāo)在界面設(shè)計(jì)中，雖然很小，但是卻是界面中重要組成部分之一。通過(guò)將顯示物體圖形化的形式，將功能本意高度濃縮成一個(gè)圖標(biāo)，再通過(guò)視覺(jué)隱喻更快地讓用戶理解功能，同時(shí)圖形與文字相比，圖形更加生動(dòng)形象，視覺(jué)能力更強(qiáng)、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時(shí)代的發(fā)展，圖標(biāo)不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁(yè)面，也不斷延伸出不同的圖標(biāo)類型與圖標(biāo)設(shè)計(jì)風(fēng)格。
圖形與復(fù)雜的文字相比，更加簡(jiǎn)潔，相應(yīng)的識(shí)別效率也會(huì)更高。圖標(biāo)可以將復(fù)雜的文字描述高度濃縮成一個(gè)圖標(biāo)，通過(guò)視覺(jué)隱喻的方式讓用戶聯(lián)想到現(xiàn)實(shí)生活中的物體，更直觀地呈現(xiàn)圖標(biāo)代表的功能，更快理解功能的意義
1.2 減輕頁(yè)面負(fù)擔(dān)
像一些通用常見(jiàn)的圖標(biāo)，如搜索、播放按鈕、更多等，僅需要一個(gè)圖標(biāo)就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁(yè)面空間與閱讀壓力。
1.3 更快定位功能位置
圖標(biāo)與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺(jué)沖擊也就更強(qiáng)，也能更快地被識(shí)別出來(lái)，當(dāng)用戶熟悉了產(chǎn)品后，只需要通過(guò)圖標(biāo)就能快速找到想要的功能，當(dāng)功能位置發(fā)生變化時(shí)，不需再重新閱讀枯燥的文字找到對(duì)應(yīng)的功能，只需從圖標(biāo)形狀、顏色上區(qū)別，找到對(duì)應(yīng)的功能。
2.裝飾層面
2.1 傳遞品牌調(diào)性
隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產(chǎn)品越來(lái)越多，要在各個(gè)產(chǎn)品中突圍，除好用的功能外還要有特色的外觀。在圖標(biāo)中融入能代表產(chǎn)品品牌的符號(hào)，強(qiáng)化品牌調(diào)性，保持圖標(biāo)的獨(dú)特性，給用戶留下深刻的印象，一看圖標(biāo)就知道是哪個(gè)產(chǎn)品。
2.2 增強(qiáng)產(chǎn)品吸引力
如今用戶對(duì)產(chǎn)品的要求除了要有好用、有用的功能外，還希望有更好的視覺(jué)享受。一組好看、有趣的圖標(biāo)可以帶給用戶更好的第一印象，增強(qiáng)產(chǎn)品對(duì)用戶的吸引力。
2.3 渲染氣氛
根據(jù)不同的節(jié)日或運(yùn)營(yíng)活動(dòng)，設(shè)計(jì)相應(yīng)氛圍的圖標(biāo)，幫助產(chǎn)品渲染節(jié)日氛圍或加強(qiáng)用戶對(duì)產(chǎn)品主題運(yùn)營(yíng)活動(dòng)的感知力度
二、圖標(biāo)繪制的基本原則
1. 可識(shí)別性
圖標(biāo)與文字在一定程度上起到相同的作用，都是通過(guò)特定的表現(xiàn)形式來(lái)傳達(dá)某種信息給用戶。順著時(shí)代發(fā)展，圖標(biāo)的設(shè)計(jì)更精細(xì)化，產(chǎn)生了更多的設(shè)計(jì)風(fēng)格，但圖標(biāo)的本質(zhì)還是沒(méi)變的，是用戶進(jìn)入功能的入口。因此，一個(gè)能被用戶快速識(shí)別、快速理解的圖標(biāo)相當(dāng)重要，是圖標(biāo)設(shè)計(jì)的基本要求。我們繪制圖標(biāo)時(shí)要盡量去掉輔助、無(wú)用的元素，保留最清晰、直接、有代表性的元素。
2. 風(fēng)格統(tǒng)一
設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)，除了會(huì)根據(jù)產(chǎn)品類型、用戶群體、品牌調(diào)性等因素決定使用哪種圖標(biāo)風(fēng)格外，還要根據(jù)圖標(biāo)的具體使用位置，因此在一個(gè)產(chǎn)品中，常常會(huì)出現(xiàn)多種風(fēng)格類型的圖標(biāo)，而風(fēng)格統(tǒng)一指的是在某個(gè)特定功能模塊內(nèi)的圖標(biāo)風(fēng)格要保持一致，是面性的圖標(biāo)就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統(tǒng)一
圓形、正方形、三角形，在這三個(gè)圖形雖然高度相同，但是整體上三個(gè)圖形的視覺(jué)重量并不相同。在實(shí)際的操作中，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺(jué)體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)方向缺得越多，就往那個(gè)方向移動(dòng)一點(diǎn)。
4. 色彩統(tǒng)一
色彩的統(tǒng)一指的是圖標(biāo)色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內(nèi)發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標(biāo)，通常使用的都是產(chǎn)品的主題色，而多彩圖標(biāo)，常會(huì)以主題色為主，拓展出臨近色、相似色、對(duì)比色，目前市面上大多數(shù)的圖標(biāo)顏色會(huì)使用同類色與鄰近色。對(duì)于飽和度與明度的調(diào)節(jié)，我通過(guò)利用灰度模式進(jìn)行輔助，使圖標(biāo)視覺(jué)更統(tǒng)一柔和，不會(huì)出現(xiàn)其中一個(gè)亮眼或暗沉。
5. 占比統(tǒng)一
5.1 正負(fù)形占比統(tǒng)一
正負(fù)形的合理使用是圖標(biāo)能否傳達(dá)準(zhǔn)確意思的關(guān)鍵，因此也是常會(huì)出現(xiàn)的組成元素。在繪制圖標(biāo)的正負(fù)形，注意保持占比統(tǒng)一，其中某個(gè)圖形正負(fù)形太大或太小，會(huì)顯得突兀、別扭，失去統(tǒng)一性，界面整體質(zhì)感會(huì)大大降低。
5.2 顏色占比統(tǒng)一
在繪制圖標(biāo)時(shí)，確定圖標(biāo)中的主色和輔色，繪制時(shí)盡量保證主色和輔色占比相同，保持圖標(biāo)的統(tǒng)一性。
6. 疏密統(tǒng)一
有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺(jué)風(fēng)格。同時(shí)，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標(biāo)，縮小后反而會(huì)影響識(shí)別。同時(shí)，給圖標(biāo)留出一些空間，使線與線之間不會(huì)太擠，增強(qiáng)圖標(biāo)的呼吸感。
安利一個(gè)國(guó)外的圖標(biāo)大神Myicons?，簡(jiǎn)單的線性圖標(biāo)一樣可以很精致。
三、不同風(fēng)格的圖標(biāo)
目前市面上的圖標(biāo)主要有四種類型，分別是：線性圖標(biāo)、面性圖標(biāo)、寫(xiě)實(shí)擬物圖標(biāo)和三維立體圖標(biāo)。而不同的圖標(biāo)中組合的元素都會(huì)有一些差異，相同類型的圖標(biāo)中也會(huì)有不同的圖標(biāo)風(fēng)格。
1. 線性圖標(biāo)
線性圖標(biāo)主要還是由線性組成，設(shè)計(jì)師可以通過(guò)改變線的粗細(xì)、線的端點(diǎn)、圓角大小或加入一些面性元素在里面來(lái)使線性圖標(biāo)更加豐富、有趣，但整體來(lái)說(shuō)純線性圖標(biāo)更纖細(xì)、簡(jiǎn)潔，使得視覺(jué)沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎(chǔ)的表達(dá)方式，這種設(shè)計(jì)風(fēng)格單調(diào)、視覺(jué)沖擊較差，但是制作難度低，設(shè)計(jì)所耗費(fèi)的時(shí)間頁(yè)更斷，因此常常會(huì)出現(xiàn)在個(gè)人中心頁(yè)中，僅需要有圖標(biāo)顯示功能入口，設(shè)計(jì)要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標(biāo)與單色圖標(biāo)相比，視覺(jué)沖擊力更強(qiáng)，應(yīng)用范圍更廣，通常會(huì)融入品牌主色，是除了線面圖標(biāo)外出現(xiàn)在首頁(yè)中的線性圖標(biāo)。因?yàn)殡p色圖標(biāo)可以加入品牌色，增強(qiáng)品牌感的同時(shí)，使圖標(biāo)增加了設(shè)計(jì)感，不會(huì)像單色圖標(biāo)那么單調(diào)乏味，因此雙色圖標(biāo)也會(huì)以“次要功能”的形式出現(xiàn)在首頁(yè)當(dāng)中。
像在“去哪兒旅行App”和“平安銀行App”中，頁(yè)面已經(jīng)存在一組視覺(jué)沖擊、視覺(jué)層級(jí)更高的一組面性圖標(biāo)，但是因?yàn)闃I(yè)務(wù)需求露出更多功能入口，因此就可以使用線性圖標(biāo)這種視覺(jué)沖擊力弱一點(diǎn)的圖標(biāo)搭配，既不會(huì)搶走主視覺(jué)，也能滿足業(yè)務(wù)需求。
1.1.3 斷點(diǎn)圖標(biāo)
斷點(diǎn)圖標(biāo)在目前的app圖標(biāo)設(shè)計(jì)上較少使用。雖然斷點(diǎn)風(fēng)格圖標(biāo)在表達(dá)上有一定的局限性，但是圖標(biāo)設(shè)計(jì)感更強(qiáng)，圖標(biāo)更有趣味性。
斷點(diǎn)圖標(biāo)并不是隨便刪除某個(gè)描點(diǎn)，在斷點(diǎn)的位置選擇上和斷點(diǎn)的大小都是要注意的地方。斷點(diǎn)位置的選擇要注意兩點(diǎn)：
1 ) 保持相同角度，能更好地增強(qiáng)圖標(biāo)的協(xié)調(diào)性，避免造成圖標(biāo)的視覺(jué)混亂降低用戶的視覺(jué)體驗(yàn)。
2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺(jué)連貫性，保持圖形整體性。
1.1.4 線面結(jié)合
在原本的線性圖標(biāo)上加入色塊，就會(huì)產(chǎn)生新的設(shè)計(jì)風(fēng)格--線面圖標(biāo)。線面圖標(biāo)比較特殊，圖標(biāo)的視覺(jué)層級(jí)會(huì)隨著圖標(biāo)中包含的色塊大小而變化，色塊越大，視覺(jué)沖擊力也越強(qiáng)。因此在設(shè)計(jì)線面結(jié)合圖標(biāo)時(shí)，要先確定圖標(biāo)在該頁(yè)面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標(biāo)中的線主要由兩個(gè)元素組成，一個(gè)是線的粗細(xì)，一個(gè)是線的端點(diǎn)，而這兩個(gè)元素也是主要控制線性圖標(biāo)的性格。以常用的48px圖標(biāo)盒子為例，常用線的粗細(xì)有2px、3px、4px，圖標(biāo)的線越粗圖標(biāo)越有力量感反之圖標(biāo)越纖細(xì)；而圖標(biāo)的圓角越小時(shí)圖標(biāo)越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產(chǎn)品，圖標(biāo)的圓角就比較小。圓角越大圖標(biāo)越飽滿親和力更強(qiáng)，像一些兒童學(xué)習(xí)類軟件就會(huì)使用大圓角的圖標(biāo)設(shè)計(jì)。
因此，圖標(biāo)的線粗細(xì)與圓角大小，都根據(jù)不同產(chǎn)品類型與目標(biāo)用戶確定。而大多數(shù)線性圖標(biāo)主要有四種基礎(chǔ)造型：纖細(xì)+小圓角、纖細(xì)+大圓角、粗描邊+小圓角/無(wú)圓角、粗描邊+大圓角。
1.2.1 纖細(xì)+小圓角
精致、嚴(yán)謹(jǐn)，多用在銀行、新聞?lì)怉PP。沒(méi)有圓角，會(huì)使圖標(biāo)更加尖銳，對(duì)于銀行類APP會(huì)給人一種威脅，但是太大的圓角，顯得有點(diǎn)輕浮、可愛(ài)，不符合銀行莊嚴(yán)的感覺(jué)，所以稍微添加一些圓角，使圖標(biāo)更有親和力的同時(shí)，也保留一些莊嚴(yán)的感覺(jué)。
1.2.2 纖細(xì)+大圓角
更加精致、有親和力，這種風(fēng)格是目前市面上軟件使用得最多的一種線性圖標(biāo)風(fēng)格。
1.2.3 粗描邊+無(wú)圓角/小圓角
粗曠、個(gè)性、有很強(qiáng)的力量感。更多的用在運(yùn)動(dòng)、汽車這類主要用戶傾向男性的軟件，同時(shí)也會(huì)在一些潮流類電商軟件中出現(xiàn)，凸顯更有個(gè)性的設(shè)計(jì)風(fēng)格。
1.2.4 粗描邊+大圓角
圓潤(rùn)、可愛(ài)、親和力強(qiáng)，常用在偏向兒童的產(chǎn)品
2. 面性圖標(biāo)
面性圖標(biāo)時(shí)軟件使用的最多的一種圖標(biāo)類型，設(shè)計(jì)師通過(guò)改變色塊、圖形圓角、正負(fù)形和底托等元素，讓面性圖標(biāo)呈現(xiàn)不同的設(shè)計(jì)風(fēng)格，但無(wú)論是哪種設(shè)計(jì)風(fēng)格，面性圖標(biāo)設(shè)計(jì)沖擊力相比面性圖標(biāo)更強(qiáng)，因此市面上大多數(shù)核心功能都會(huì)用到面性圖標(biāo)來(lái)提高功能的設(shè)計(jì)層級(jí)，讓功能在頁(yè)面中更加突出。
2.1 扁平風(fēng)格扁平風(fēng)格的圖標(biāo)常為單色圖標(biāo)，圖標(biāo)整體沒(méi)有漸變、高光、陰影等裝飾性設(shè)計(jì)效果，因此更加簡(jiǎn)潔，更突出功能本身，圖標(biāo)功能性更強(qiáng)，圖標(biāo)制作成本低，曾經(jīng)也是風(fēng)靡一時(shí)。但扁平風(fēng)格的圖標(biāo)缺少亮點(diǎn)與制作成本的原因，導(dǎo)致圖標(biāo)同質(zhì)化嚴(yán)重，缺少特點(diǎn)，很難被人記住，因此現(xiàn)在很少被使用。
2.2 漸變色塊
在扁平風(fēng)的基礎(chǔ)上，在色塊上添加漸變色，在保留了扁平圖標(biāo)的功能性外，使圖標(biāo)色彩更加豐富，在不同類型的軟件中都可以使用這種風(fēng)格，算是一個(gè)比較百搭的圖標(biāo)風(fēng)格。同時(shí)漸變色塊也是很多面性圖標(biāo)的組合基礎(chǔ)，在漸變色塊這個(gè)基礎(chǔ)上還可以添加不同的效果形成不同設(shè)計(jì)風(fēng)格。
在設(shè)計(jì)漸變色塊風(fēng)格的圖標(biāo)時(shí)要注意兩點(diǎn)：
1 ) 市面上的app都會(huì)選擇同類色作為漸變色，然后通過(guò)改變顏色的飽和度，使?jié)u變色的明亮對(duì)比更加明顯的同時(shí)，顏色過(guò)渡也更加柔和舒服，使圖標(biāo)更有通透感，增加視覺(jué)沖擊力。
2 ) 在設(shè)計(jì)這種有白色色塊在頂部的圖標(biāo)時(shí)，可以給色塊添加一個(gè)淺淺的透明漸變，讓色塊過(guò)渡自然一些，同時(shí)也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風(fēng)格的圖標(biāo)看上去像兩個(gè)透明圖層疊加在一起的感覺(jué)，圖標(biāo)層次感強(qiáng)，細(xì)節(jié)也更加豐富，圖標(biāo)風(fēng)格更新穎、更年輕化，因此如果在設(shè)計(jì)一個(gè)年輕人使用或者希望打造年輕化頁(yè)面感受的時(shí)候，可以嘗試使用圖層疊加風(fēng)格。
繪制圖層疊加風(fēng)格的圖標(biāo)時(shí)要注意：
1 ) 重疊在一起的那個(gè)色塊是通過(guò)布爾運(yùn)算得到的，并不是通過(guò)簡(jiǎn)單的透明圖層得到的。而重疊在一起的那個(gè)色塊也不宜過(guò)于顯眼，畢竟看的是圖標(biāo)的整體。因此可以參考一下“智行火車票”，通過(guò)改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標(biāo)的變化，同時(shí)也不會(huì)是色塊太突兀影響觀感。
2 ) 盡量統(tǒng)一疊加部分圖形與圖標(biāo)之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設(shè)計(jì)風(fēng)格，不僅設(shè)計(jì)風(fēng)格新穎、特別，而且還有很強(qiáng)的質(zhì)感表現(xiàn)，因此不僅在金融產(chǎn)品，還是生鮮產(chǎn)品或票務(wù)產(chǎn)品，都有毛玻璃風(fēng)格的圖標(biāo)。
而在設(shè)計(jì)毛玻璃圖標(biāo)時(shí)，里面也有很多細(xì)節(jié)需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺(jué)就可以。如果調(diào)太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標(biāo)，只需要將圖標(biāo)的主色調(diào)低飽和度后，就可以使用。這樣的好處是不僅讓圖標(biāo)顏色過(guò)渡更加自然，同時(shí)有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標(biāo)有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會(huì)被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時(shí)使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細(xì)節(jié)更加豐富。
2.5 晶白風(fēng)格
晶白類圖標(biāo)利用圓角正方形或圓形作為底托再在上面添加一個(gè)主色為白色的圖標(biāo)，然后通過(guò)調(diào)節(jié)透明度、投影、漸變給圖標(biāo)添加一些質(zhì)感，是常見(jiàn)的圖標(biāo)風(fēng)格，也是使用了很久的一種設(shè)計(jì)風(fēng)格。
后面也延伸出了另一種設(shè)計(jì)風(fēng)格圖標(biāo)主題通常不會(huì)是統(tǒng)一的造型，像喜馬拉雅這種圖標(biāo)，圖標(biāo)本身元素復(fù)雜、細(xì)節(jié)較多，形狀也更加不可控，因此用一個(gè)淺色圓形底托，將他們統(tǒng)一起來(lái)。不僅可以將復(fù)雜的圖形統(tǒng)一起來(lái)，還可以添加吸引人眼球的漸變色更好地增加圖標(biāo)的視覺(jué)占比，有更強(qiáng)的視覺(jué)沖擊感。
在繪制晶白風(fēng)格時(shí)，注意兩點(diǎn)：
1 ) 可以適當(dāng)改變底托圖形的形狀，增強(qiáng)差異化。
2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實(shí)物展示
這類圖標(biāo)會(huì)出現(xiàn)在生鮮類、藥品類、潮流電商類產(chǎn)品中，因?yàn)槭褂脠D標(biāo)很難將這些類型概括起來(lái)，直接使用圖片展示更加直觀，但因?yàn)閳D片細(xì)節(jié)、元素更多更復(fù)雜，如果使用太多會(huì)使圖標(biāo)看起來(lái)很雜亂。
3. 寫(xiě)實(shí)向圖標(biāo)
寫(xiě)實(shí)向圖標(biāo)模擬現(xiàn)實(shí)中的物體，更貼近生活，用戶對(duì)這類圖標(biāo)理解能力也更強(qiáng)，繪制難度也更高，繪制時(shí)間也更長(zhǎng)。寫(xiě)實(shí)向圖標(biāo)除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來(lái)增強(qiáng)實(shí)感。常常用在運(yùn)營(yíng)設(shè)計(jì)上，或用在一些特殊界面模塊從而增強(qiáng)視覺(jué)層級(jí)。
3.1 輕擬物圖標(biāo)
輕擬物圖標(biāo)是最近很好的的設(shè)計(jì)風(fēng)格，但是輕擬物圖標(biāo)出現(xiàn)在界面設(shè)計(jì)上還是比較少的。因?yàn)檩p擬物圖標(biāo)元素比較復(fù)雜，視覺(jué)沖擊力強(qiáng)，放在界面上有可能搶走用戶對(duì)核心內(nèi)容的關(guān)注度，通常會(huì)運(yùn)用在運(yùn)營(yíng)設(shè)計(jì)長(zhǎng)圖、彈窗、核心功能等。
而繪制輕擬物圖標(biāo)，主要注意的是光影的打造。光影主要由這幾個(gè)元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標(biāo)時(shí)，主要注意以下幾點(diǎn)：
1 ) 在繪制輕擬物圖標(biāo)時(shí)，不一定需要使用統(tǒng)一色相中的顏色，可以通過(guò)改變顏色的飽和度明度的對(duì)比和冷暖色的對(duì)比來(lái)營(yíng)造光影，使圖標(biāo)色彩更豐富、對(duì)比更明顯。
2 ) 反光可以使用圖標(biāo)主色的對(duì)比色，降低飽和度，提高明度，運(yùn)用在輕擬物圖標(biāo)邊緣，使邊緣更更清晰，不會(huì)糊在一起，圖標(biāo)整體立體感更強(qiáng)。
3 ) 明暗對(duì)比越明顯，輕擬物圖標(biāo)越顯通透、立體。
3.2 2.5D圖標(biāo)
2.5D曾經(jīng)是很火的一種設(shè)計(jì)風(fēng)格，但是現(xiàn)在已經(jīng)逐漸被輕擬物與建模替代。2.5D圖標(biāo)固定展示了三個(gè)面，有很強(qiáng)的立體感，常常運(yùn)用在科技類的網(wǎng)站設(shè)計(jì)中。
在繪制2.5D風(fēng)格圖標(biāo)時(shí)，要注意：
1)統(tǒng)一好圖標(biāo)的厚度。
3.3 3D圖標(biāo)
隨著時(shí)代進(jìn)步，3D逐漸成為一個(gè)主流的設(shè)計(jì)風(fēng)格。通過(guò)專業(yè)軟件給予了圖形材質(zhì)質(zhì)感、真實(shí)的光影，更加貼近生活真實(shí)物件，同時(shí)還可以配合動(dòng)效的設(shè)計(jì)，有很強(qiáng)的視覺(jué)沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中、運(yùn)營(yíng)設(shè)計(jì)中。目前繪制3D圖標(biāo)主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費(fèi)的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒(méi)有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標(biāo)需要注意以下幾點(diǎn)：
1 ) 統(tǒng)一主光源方向。建模里面會(huì)出現(xiàn)很多打光類型，如主光、輔光（有時(shí)不止一個(gè)）、邊緣光等。
2 ) 統(tǒng)一攝像機(jī)位置。攝像機(jī)與物體的距離、角度影響渲染的最終效果。
3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強(qiáng)調(diào)物體的數(shù)值大小，拉遠(yuǎn)看物體就是小，拉近看就是大，做一個(gè)物體時(shí)還好，但是要做一組3D圖標(biāo)時(shí)，就要定義好物體的大小，使圖標(biāo)更加統(tǒng)一。
四、如何確定使用哪種類型的圖標(biāo)
不同風(fēng)格的圖標(biāo)有著不同的特點(diǎn)，設(shè)計(jì)師要根據(jù)圖標(biāo)放置位置和功能選擇圖標(biāo)類型。其中最有決定性的因素就是圖標(biāo)的重量，而影響圖標(biāo)重量的因素有：占比、顏色、細(xì)節(jié)元素。線性圖標(biāo)在界面中占比較少，因此看起來(lái)會(huì)更加簡(jiǎn)潔，視覺(jué)沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標(biāo)占比更高，視覺(jué)上會(huì)更加飽滿，同時(shí)顏色色塊使圖標(biāo)更加顯眼，視覺(jué)沖擊力得到力增強(qiáng)，使用戶對(duì)圖標(biāo)的感知力更高，是最常用的圖標(biāo)類型，用在各個(gè)重要功能入口上；輕擬物和3D圖標(biāo)除了占比高、顏色豐富，還有各種光影、材質(zhì)的細(xì)節(jié)，圖標(biāo)元素更多，視覺(jué)沖擊力也更強(qiáng)了，也因?yàn)閳D標(biāo)復(fù)雜、視覺(jué)沖擊力強(qiáng)，因此很少出現(xiàn)在界面上，通常運(yùn)用在一些特殊運(yùn)營(yíng)入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會(huì)搭配出現(xiàn)。
五、圖標(biāo)的繪制
1. 圖標(biāo)盒子
圖標(biāo)盒子是輔助繪制圖標(biāo)的一個(gè)工具，幫助設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)更好地規(guī)范好各個(gè)圖標(biāo)的尺寸大小。而圖標(biāo)盒子也有很多種，我最常用的是48*48px，這個(gè)尺寸對(duì)于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺(jué)體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)地方缺得越多，哪個(gè)地方就拉伸一點(diǎn)。
2. 圖標(biāo)的繪制方法
圖標(biāo)中會(huì)存在標(biāo)準(zhǔn)化圖標(biāo)，像刪除就是一個(gè)垃圾桶、像首頁(yè)通常是一個(gè)家的圖標(biāo)、還有搜索則是放大鏡的圖，照片是兩個(gè)山一個(gè)太陽(yáng)，這些圖標(biāo)都習(xí)慣以這種表達(dá)方式出現(xiàn)，用戶已經(jīng)習(xí)慣了這種表現(xiàn)形式，因此對(duì)于標(biāo)準(zhǔn)化圖標(biāo)，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標(biāo)意思。
非標(biāo)準(zhǔn)化圖標(biāo)可以細(xì)分為具象與抽象，對(duì)于具象類圖標(biāo)，現(xiàn)實(shí)中有實(shí)物可以參照。這類圖標(biāo)的設(shè)計(jì)較為簡(jiǎn)單，可以在某度上尋找相關(guān)照片，根據(jù)實(shí)物的造型進(jìn)行提煉和簡(jiǎn)化。
抽象圖標(biāo)則較為復(fù)雜，通常是某些特定行為的名詞，沒(méi)有具體直接的參照物。因此在設(shè)計(jì)前，我們要先充分理解功能本身，這個(gè)功能是什么、用戶怎么用，然后提煉關(guān)鍵詞，接著根據(jù)關(guān)鍵詞發(fā)散思維，尋找相關(guān)聯(lián)的圖形來(lái)表示含義。例如“社區(qū)”功能，功能目的是提供一個(gè)讓用戶互相交流的環(huán)境，同時(shí)吸引無(wú)目的的用戶逛起來(lái)發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關(guān)鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進(jìn)行腦暴，聚在一起：一群人-圈子-同一個(gè)世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠(yuǎn)鏡-雷達(dá)-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標(biāo)的使用場(chǎng)景
圖標(biāo)運(yùn)用在功能入口上是最基礎(chǔ)的使用場(chǎng)景之一，如首頁(yè)中的金剛區(qū)、個(gè)人中心都會(huì)用到很多圖標(biāo)作為功能入口。
1. 金剛區(qū)
目前國(guó)內(nèi)的APP包含的功能有很多，而金剛區(qū)的作用就整合產(chǎn)品功能并放置在首頁(yè)中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產(chǎn)品功能，增強(qiáng)用戶對(duì)產(chǎn)品的粘性。像美團(tuán)，很多人對(duì)他的了解是一個(gè)外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務(wù)。
金剛區(qū)圖標(biāo)通常會(huì)有1～3行，根據(jù)業(yè)務(wù)具體需求做調(diào)整，在每行中會(huì)有4～5個(gè)圖標(biāo)。尺寸范圍一般在40px～48px左右（@1x），同時(shí)會(huì)根據(jù)具體的業(yè)務(wù)需求，調(diào)整大小，最終都是一預(yù)覽效果為準(zhǔn)。
2. 個(gè)人中心
個(gè)人中心是個(gè)人類型功能、運(yùn)營(yíng)活動(dòng)入口和工具的集合地，是除了金剛區(qū)外，含圖標(biāo)最多的一個(gè)地方。個(gè)人中心中包含很多不同類型的功能，可以使用卡片式的設(shè)計(jì)，將功能圖標(biāo)更好地分類。在圖標(biāo)風(fēng)格的選擇上，個(gè)人類型功能是最重要的功能，通常會(huì)以面性風(fēng)格放置在頂部，如果個(gè)人中心中需要展示運(yùn)營(yíng)入口時(shí)，需要減弱個(gè)人類型功能圖標(biāo)的視覺(jué)沖擊，會(huì)使用線性風(fēng)格圖標(biāo)。
3. 運(yùn)營(yíng)入口
運(yùn)營(yíng)入口主要作用是讓用戶點(diǎn)擊后跳轉(zhuǎn)到產(chǎn)品活動(dòng)頁(yè)，因此具有強(qiáng)視覺(jué)沖擊力的圖標(biāo)，會(huì)更吸引用戶眼球，從而提高點(diǎn)擊運(yùn)營(yíng)入口的機(jī)會(huì)。
因此運(yùn)營(yíng)入口上，通常會(huì)使用面性圖標(biāo)、寫(xiě)實(shí)向圖標(biāo)或3d圖標(biāo)。因?yàn)閷?xiě)實(shí)向圖標(biāo)或3D圖標(biāo)可以提高視覺(jué)層級(jí)，因此經(jīng)常運(yùn)用在主要運(yùn)營(yíng)板塊上，而面性圖標(biāo)相比下較弱，當(dāng)頁(yè)面已存在一個(gè)主視覺(jué)或主要功能時(shí)，運(yùn)用在運(yùn)營(yíng)板塊上。
4. 主題板塊
在軟件中會(huì)有很多不同主題的信息板塊，同時(shí)信息板塊間有較大的差異，如果全部展示出來(lái)會(huì)使頁(yè)面樣式不同統(tǒng)一、信息混亂導(dǎo)致降低用戶的閱讀體驗(yàn)。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關(guān)鍵信息在頁(yè)面中，保證視覺(jué)統(tǒng)一的同時(shí)，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗(yàn)。
純文字的排版在信息流中略顯枯燥，而圖標(biāo)在主題板塊中起到潤(rùn)色主題的作用，渲染主題氣氛，提高不同主題板塊的識(shí)別度與差異化。對(duì)于一些長(zhǎng)標(biāo)題的主題板塊，只需要記住圖標(biāo)就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數(shù)量通常在2～5個(gè)，在設(shè)計(jì)時(shí)，要設(shè)計(jì)點(diǎn)擊前和點(diǎn)擊后兩個(gè)圖標(biāo)狀態(tài)，同時(shí)幫助兩個(gè)狀態(tài)是有明顯的變化。底部tab欄圖標(biāo)大小通常在22px（@1x）左右，而圖標(biāo)底下的文字時(shí)10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達(dá)產(chǎn)品品牌感、提升產(chǎn)品辨識(shí)度、記憶點(diǎn)的重要區(qū)域，很多產(chǎn)品都會(huì)在底部tab欄的圖標(biāo)設(shè)計(jì)上加入品牌元素，增強(qiáng)辨識(shí)度。
七、如何提高圖標(biāo)設(shè)計(jì)能力
1. 階段一：臨摹
臨摹是人類學(xué)習(xí)一個(gè)新技能開(kāi)始，就像嬰兒學(xué)習(xí)父母說(shuō)話一樣。但是一開(kāi)始很多都不會(huì)臨摹，或者照著畫(huà)也不會(huì)，那我們應(yīng)該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標(biāo)，可以上追波看看目前流行的設(shè)計(jì)風(fēng)格，不行的話就去看看大廠都在畫(huà)怎樣的圖標(biāo)。
2 ) 明確自己的能力，對(duì)自己目前的設(shè)計(jì)水平有一個(gè)客觀的評(píng)價(jià)，到一個(gè)怎樣的水平。很多人都急于求成，最基礎(chǔ)的線性圖標(biāo)都不會(huì)就上來(lái)搞輕擬物，畫(huà)來(lái)畫(huà)去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫(huà)了許多時(shí)間去畫(huà)一組圖標(biāo)，就很容易被自己催眠，以為自己已經(jīng)畫(huà)得很好了，其實(shí)還會(huì)有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫(huà)完后多去對(duì)比原作，自 己有哪些地方?jīng)]有原作做得好的
1.2 會(huì)了，但沒(méi)完全會(huì)
什么是會(huì)了，指的是可以繪制出于優(yōu)秀原作一樣的圖標(biāo)；什么是沒(méi)完全會(huì)，指的是不知道原作是怎么達(dá)到這個(gè)好看的效果的。而且很重要的一點(diǎn)是，你臨摹的作品可能也有一些不好，需要改進(jìn)的地方，以此在這個(gè)階段我們要做的是：
1 ) 多看別人總結(jié)的知識(shí)點(diǎn)，知道如何去判斷一個(gè)圖標(biāo)是否還有可以改進(jìn)的地方，這樣繪制是不是正確的
2 ) 懂得總結(jié)與思考，原作是用來(lái)什么樣的手法讓我覺(jué)得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創(chuàng)
臨摹是一個(gè)提升自己的手法，但不代表可以直接用到自己的作品中，直接復(fù)制別人的設(shè)計(jì)，并不叫設(shè)計(jì)師，復(fù)制粘貼誰(shuí)不會(huì)啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說(shuō)的半原創(chuàng)不是指在別人圖標(biāo)的基礎(chǔ)上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標(biāo)的優(yōu)點(diǎn)后，重新設(shè)計(jì)出一個(gè)有相同特點(diǎn)的圖標(biāo)。那我們應(yīng)該如何半原創(chuàng)呢？
1 ) 還是多看，但是不同于臨摹階段，我們?cè)谂R摹的時(shí)候還要多想，這個(gè)圖標(biāo)的特點(diǎn)是什么、怎么做、還能怎么用，積累圖標(biāo)不同的表現(xiàn)形式2 ) 多練，這個(gè)建立在多臨摹上，目的知道別人的技法是什么做的，練習(xí)了不同的技法后，將它們?cè)偃诤显谝黄?
3. 階段三：原創(chuàng)
第三個(gè)階段，也是最難得階段。目前很多情況都是只能成為融圖設(shè)計(jì)師，將不同作品優(yōu)秀的點(diǎn)組合起來(lái)。但如果要建立自己的風(fēng)格也是要做融圖設(shè)計(jì)師的基礎(chǔ)上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點(diǎn)，為自己的作品打上自己標(biāo)簽，輸出具有差異化特點(diǎn)的設(shè)計(jì)。最有印象的就是夸克的設(shè)計(jì)，品牌特色很明顯，其實(shí)我們每個(gè)人也可以成為一個(gè)品牌，只要我們足夠努力
作者：阿恒的設(shè)計(jì)筆記 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
有人說(shuō)它是全世界最牛逼的APP，因?yàn)樗乃惴y度和春運(yùn)期間訪問(wèn)量幾乎是全球之最；但有人說(shuō)它是全世界最垃圾的APP，因?yàn)樵谑褂眠@個(gè)產(chǎn)品的過(guò)程中，遇見(jiàn)很多奇葩、憤怒的體驗(yàn)。關(guān)于這兩種說(shuō)法，眾說(shuō)紛紜，本期設(shè)計(jì)大偵探，就來(lái)全面拆解鐵路12306APP，一起來(lái)看看這個(gè)產(chǎn)品到底是如何設(shè)計(jì)的，用戶體驗(yàn)如何。
1. 內(nèi)容結(jié)構(gòu)
全文9700字，分為六個(gè)部分，分別是導(dǎo)讀、產(chǎn)品畫(huà)像、出行服務(wù)、內(nèi)容服務(wù)、思考總結(jié)和后記，你可以通過(guò)下面的思維導(dǎo)圖對(duì)本文內(nèi)容快速的了解。
2. 適合人群
第一類，UI/交互設(shè)計(jì)師，可以跳出執(zhí)行層，全方位體驗(yàn)12306的產(chǎn)品設(shè)計(jì)，多維度去思考和總結(jié)如何規(guī)避類似的陷阱；第二類，產(chǎn)品經(jīng)理/運(yùn)營(yíng)，通過(guò)全面的產(chǎn)品設(shè)計(jì)拆解、體驗(yàn)反饋，獲取產(chǎn)品設(shè)計(jì)參考；第三類，旅游及出行相關(guān)行業(yè)從業(yè)者，通過(guò)對(duì)12306的全面拆解，獲取競(jìng)品設(shè)計(jì)參考。
3. 分析模型
第一個(gè)，增長(zhǎng)模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對(duì)應(yīng)用戶生命周期中的5個(gè)重要環(huán)節(jié)，主要用于拆分和分析產(chǎn)品的功能價(jià)值。
第二個(gè)，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設(shè)計(jì)中最基礎(chǔ)、最重要的設(shè)計(jì)原則，任何產(chǎn)品的設(shè)計(jì)，都可以通過(guò)這十個(gè)原則進(jìn)行指導(dǎo)設(shè)計(jì)。尼爾森十大原則包括即系統(tǒng)可見(jiàn)性原則、環(huán)境貼切原則、撤銷重做原則、一致性原則、防錯(cuò)原則、易取原則、靈活高效原則、易掃原則、容錯(cuò)原則、人性化幫助原則，通過(guò)這十大原則，可以對(duì)12306的產(chǎn)品設(shè)計(jì)體驗(yàn)進(jìn)行全面的校驗(yàn)和偵查。
第三個(gè)，設(shè)計(jì)心理學(xué)。包括常見(jiàn)的格式塔原理、費(fèi)茨定律、巴甫洛夫反應(yīng)、7±2效應(yīng)、席克定律等常見(jiàn)設(shè)計(jì)基礎(chǔ)理論。
1. 產(chǎn)品介紹
鐵路12306是中國(guó)鐵路客戶服務(wù)中心推出的官方手機(jī)購(gòu)票應(yīng)用軟件，主要為全國(guó)各地的乘客提供火車票預(yù)定、機(jī)票預(yù)訂、汽車票預(yù)訂等購(gòu)票業(yè)務(wù)，首個(gè)版本發(fā)布于2012年10月16日，根據(jù)易觀千帆數(shù)據(jù)，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬(wàn)。
2. 用戶畫(huà)像
鐵路12306的用戶群體主要以男性用戶居多，占比65.04%，女性占比34.96%；從年齡分布看，以24-30歲的用戶群體最多，占比36.52%，31到35歲的用戶占比24.23%，36到40歲占比20.27%，41歲以及以上占比10.30%；從用戶消費(fèi)能力看，中高消費(fèi)者占比33.48%，中等消費(fèi)者占比30.43%，高消費(fèi)者占比14.70%；從地域分布看，新一線城市用戶最多，占比27.93%，一線城市占比19.93%，二線城市占比19.00%，其中廣州用戶最多，其次為深圳、杭州和北京。
3. 信息結(jié)構(gòu)
鐵路12306的一級(jí)菜單包含首頁(yè)、出行服務(wù)、訂單、鐵路會(huì)員和用戶中心?！甘醉?yè)」主要為用戶提供火車票、飛機(jī)票和汽車票的購(gòu)買，其次還提供各種快捷功能入口和酒店預(yù)訂等服務(wù)；「出行服務(wù)」主要為用戶提供約車、酒店、訂單等服務(wù)；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會(huì)員」是12306的會(huì)員版塊，提供車票兌換、會(huì)員活動(dòng)等內(nèi)容；用戶中心提供個(gè)人資料管理、出行向?qū)Ш统Ｓ霉δ艿葍?nèi)容。
4. 重要迭代記錄
根據(jù)七麥數(shù)據(jù)統(tǒng)計(jì)，鐵路12306的APP首個(gè)版本發(fā)布于2012年10月16日，截止到2023年1月12日，APP版本已經(jīng)更新至V5.6.3版本，近一年版本更新次數(shù)為5次。
版本重要迭代記錄
2021年9月，發(fā)布V5.4.0版本，新增無(wú)障礙功能、老人及障礙人士購(gòu)票更便捷，即愛(ài)心版；
5. 產(chǎn)品生命周期
作為中國(guó)鐵路客戶服務(wù)中心的官方購(gòu)票平臺(tái)，鐵路12306距離首個(gè)版本發(fā)布時(shí)間已經(jīng)過(guò)去10年。從易觀千帆數(shù)據(jù)觀察，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬(wàn)，日均活躍人數(shù)811.65萬(wàn)。由于是國(guó)有企業(yè)運(yùn)營(yíng)，而且是壟斷業(yè)務(wù)，12306沒(méi)有任何商業(yè)變現(xiàn)的壓力，從產(chǎn)品發(fā)布時(shí)間和活躍用戶人數(shù)看，目前處于產(chǎn)品生命周期的成熟期。
6. 競(jìng)爭(zhēng)圖譜
截止到2022年10月，易觀千帆數(shù)據(jù)顯示，鐵路12306APP在蘋(píng)果的APP Store應(yīng)用市場(chǎng)APP總排名71位，旅游類排名第一，汽車火車船票預(yù)定類第一，月活躍用戶人數(shù)幾乎是其他APP的總和。
三、出行服務(wù)
作為12306最核心、最重要以及實(shí)現(xiàn)商業(yè)變現(xiàn)的服務(wù)，出行服務(wù)主要為用戶提供火車票、飛機(jī)票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場(chǎng)景提供了便捷的服務(wù)。
1. 票務(wù)
「票務(wù)」是12306最核心的服務(wù)，主要為用戶提供火車票、飛機(jī)票和汽車票的查詢以及銷售，其次12306還對(duì)三種產(chǎn)品進(jìn)行了組合，推出了空鐵聯(lián)運(yùn)、鐵水聯(lián)運(yùn)這樣的服務(wù)。
1.1 火車票
「火車票」就是為用戶提供火車和動(dòng)車的票務(wù)銷售，用戶輸入出發(fā)站、終點(diǎn)站和時(shí)間以后，就可以進(jìn)行查詢，其次還支持對(duì)已購(gòu)買的車票進(jìn)行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁(yè)
當(dāng)用戶輸入目標(biāo)站點(diǎn)以后，就進(jìn)入了售票頁(yè)。在這個(gè)頁(yè)面，可以看到當(dāng)天列車的所有車次，包括直達(dá)、中轉(zhuǎn)、出發(fā)時(shí)間和剩余票數(shù)。在底部，有一個(gè)菜單欄，包含了篩選、耗時(shí)最短、發(fā)時(shí)最早、顯示票價(jià)和候補(bǔ)下單五個(gè)功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發(fā)車站、出發(fā)時(shí)間等。
體驗(yàn)陷阱
這個(gè)頁(yè)面的操作體驗(yàn)不太友好，底部的菜單欄不僅沒(méi)有實(shí)現(xiàn)全屏手機(jī)設(shè)備的兼容，而且?guī)缀鹾捅尘暗脑刭N合在一起，不夠醒目，如果用戶不注意，根本無(wú)法發(fā)現(xiàn)底部竟然還有一排菜單欄幫助用戶進(jìn)行高效的檢索。
1.1.1.2 訂單頁(yè)
①在用戶選擇好車次以后，就進(jìn)入訂單頁(yè)。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡(jiǎn)單，在輸入用戶的真實(shí)姓名、身份證號(hào)碼和手機(jī)號(hào)碼以后，即可添加成功。首次使用12306的用戶需要進(jìn)行身份核驗(yàn)，用戶需要通過(guò)驗(yàn)證系統(tǒng)發(fā)送的核驗(yàn)信息才能添加成功。
細(xì)節(jié)偵查
「姓名」這里有一個(gè)非常友好的設(shè)計(jì)體驗(yàn)，那就是針對(duì)無(wú)法輸入的生僻字、名字超過(guò)30個(gè)字符，以及外籍用戶的極端情況都給出了詳細(xì)的指導(dǎo)，針對(duì)用戶可能出現(xiàn)的極端的情況給與及時(shí)的提示，這就是尼爾森十大原則中的容錯(cuò)原則，幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個(gè)「選擇受讓人」的功能。這個(gè)功能有很高的學(xué)習(xí)成本，會(huì)讓用戶摸不著頭腦。我也是通過(guò)百度查詢才了解到這是一個(gè)用戶權(quán)益功能，它主要是指用戶可以把平時(shí)購(gòu)買火車票獲得的積分轉(zhuǎn)讓給指定的用戶，積分又可以抵消火車票款，從而實(shí)現(xiàn)抵扣。
④選擇好乘車人以后，用戶可以進(jìn)行選座，就進(jìn)入了提交訂單、支付費(fèi)用的環(huán)節(jié)。
1.1.1.3 支付頁(yè)
①訂單生成后，用戶需要在付款限定時(shí)間內(nèi)支付火車票費(fèi)用，否則訂單將會(huì)取消。其次在支付頁(yè)，也向用戶推薦相關(guān)的保險(xiǎn)服務(wù)，比如鐵路乘意險(xiǎn)，又分為平安險(xiǎn)、行運(yùn)險(xiǎn)和順意險(xiǎn)，主要為乘客提供意外傷害疾病身故等保險(xiǎn)。
②「購(gòu)買返程」其實(shí)一個(gè)非常便捷的功能，但12306設(shè)計(jì)的層級(jí)太深了，而且沒(méi)有加上一鍵返回首頁(yè)或訂單頁(yè)的按鈕，用戶如果想退回到訂單頁(yè)或首頁(yè)，需要不斷點(diǎn)擊返回，操作路徑實(shí)在太長(zhǎng)。
體驗(yàn)陷阱
底部菜單設(shè)計(jì)了三個(gè)按鈕，違反了費(fèi)茨定律的設(shè)計(jì)原則。用戶在這個(gè)支付頁(yè)的主要目標(biāo)是支付費(fèi)用，但是菜單欄的三個(gè)按鈕權(quán)重設(shè)計(jì)得一樣高，取消訂單和購(gòu)買返程這兩個(gè)按鈕，嚴(yán)重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁(yè)
當(dāng)用戶支付成功以后，「支付成功頁(yè)」為用戶提供餐飲預(yù)訂、出行保險(xiǎn)、酒店入住、網(wǎng)絡(luò)約車等服務(wù)，非常便捷。不過(guò)內(nèi)容的規(guī)劃比較亂，體驗(yàn)稍差。
1.1.1.5 候補(bǔ)下單
「候補(bǔ)下單」是一個(gè)非常方便的功能，這個(gè)功能主要解決在當(dāng)前車次沒(méi)票的情況幫助乘客自動(dòng)排隊(duì)，如果有其他乘客退票，就自動(dòng)搶票，非常貼心。這個(gè)功能也被譽(yù)為黃牛的終結(jié)者，幫助乘客自主排隊(duì)。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標(biāo)站點(diǎn)，進(jìn)入訂單詳情頁(yè)后，點(diǎn)擊「變更到站」按鈕，點(diǎn)擊底部的「立即變更到站」就可進(jìn)入變更頁(yè)面。在變更頁(yè)面，乘客可以重新輸入目標(biāo)站點(diǎn)，然后再次進(jìn)入車票售票頁(yè)，選中需要變更的車次以后，進(jìn)入訂單頁(yè)提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗(yàn)陷阱
當(dāng)用戶點(diǎn)擊「變更到站」的時(shí)候，如果不注意觀察頁(yè)面，根本感受不出原來(lái)需要在底部菜單欄進(jìn)行操作，會(huì)讓乘客陷入焦躁，不知道下一步從哪里進(jìn)入。其次在變更到站頁(yè)面，下半部分設(shè)計(jì)了很多快捷入口，比如車站大屏、約車、餐飲特產(chǎn)等，把用戶的注意力分散了。這兩個(gè)設(shè)計(jì)都嚴(yán)重了違反了費(fèi)茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時(shí)間，改簽的流程和「變更到站」相似，進(jìn)入售票頁(yè)后，選中需要變更的車次，進(jìn)入訂單頁(yè)提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開(kāi)車前48小時(shí)以上，退票費(fèi)為票價(jià)5%，24小時(shí)至48小時(shí)之間為10%，不足24小時(shí)為20%。退票費(fèi)最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經(jīng)購(gòu)買的車票，退票流程比較簡(jiǎn)單，點(diǎn)擊退票后，進(jìn)入退票確認(rèn)頁(yè)，點(diǎn)擊確認(rèn)退票成功。需要注意是，距離開(kāi)車前8天以上的不收退票費(fèi)，其他的時(shí)段將會(huì)根據(jù)列車開(kāi)車前的時(shí)間收取手續(xù)費(fèi)，最高20%。
迭代建議
在用戶點(diǎn)擊退票的時(shí)候，應(yīng)該出現(xiàn)彈窗，再次提醒用戶是否確認(rèn)退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯(cuò)原則，幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。
1.1.5 購(gòu)票后
當(dāng)乘客購(gòu)買車票后，12306的首頁(yè)會(huì)加入一個(gè)行程的版塊，向用戶展示最近的行程詳情，其次一級(jí)菜單欄「出行服務(wù)」內(nèi)容也會(huì)同步更新。這個(gè)設(shè)計(jì)非常友好，直觀醒目地告訴乘客最近的行程信息，通過(guò)外部觸發(fā)避免乘客忘記行程。
1.1.5.1 行程頁(yè)
這個(gè)頁(yè)面從上至下包含四個(gè)部分，頭部是乘客詳細(xì)的車次信息，比如出發(fā)時(shí)間、經(jīng)停站、天氣等；中間是車票信息，包含檢票口、座位號(hào)、車次和乘車二維碼等信息；接下來(lái)按乘客出行前服務(wù)、車站/列車服務(wù)和到達(dá)服務(wù)三個(gè)場(chǎng)景為乘客推薦其他服務(wù)，比如餐飲預(yù)定、酒店預(yù)定等服務(wù)；底部是關(guān)于出發(fā)站、到達(dá)站的天氣預(yù)報(bào)信息和優(yōu)惠服務(wù)等信息。
細(xì)節(jié)偵查
行程頁(yè)把乘客的出行拆分為3個(gè)場(chǎng)景，出行前服務(wù)（提供重點(diǎn)客戶預(yù)約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規(guī)定）、車站/列車服務(wù)（提供臨時(shí)身份證證明、遺失物品查找、我要訂餐飲和站內(nèi)導(dǎo)航）和到達(dá)服務(wù)（遺失物品查找、我要訂酒店、接站約車、旅游景點(diǎn)預(yù)定、投訴建議和站內(nèi)導(dǎo)航），這就是以場(chǎng)景為中心的設(shè)計(jì)——將設(shè)計(jì)工作的焦點(diǎn)從“定義系統(tǒng)的操作”轉(zhuǎn)變到“描述什么人將使用該系統(tǒng)去完成什么任務(wù)”。
1.2 飛機(jī)票
「飛機(jī)票」就是為用戶提供飛機(jī)的票務(wù)銷售，用戶需要輸入出發(fā)站、終點(diǎn)站和出發(fā)時(shí)間，如果攜帶孩子或者嬰兒，還需要單獨(dú)勾選。飛機(jī)票同樣支持改簽和退票。
1.2.1 售票頁(yè)
售票頁(yè)的內(nèi)容非常簡(jiǎn)單，在頭部，用戶可以左右滑動(dòng)選擇時(shí)間，頁(yè)面內(nèi)容以Feed流向用戶展示詳細(xì)的航班信息，其次還為用戶提供了其他出行方案參考。底部設(shè)計(jì)了一個(gè)菜單欄，用戶可以進(jìn)行篩選設(shè)置，還可以根據(jù)價(jià)格高低和出發(fā)時(shí)間排序。
1.2.2 選擇艙位
選中航班班次以后，進(jìn)入到「選擇艙位頁(yè)」，在這個(gè)頁(yè)面可以查看到航班的詳細(xì)信息，比如航空公司、起飛時(shí)間、值機(jī)柜臺(tái)等。用戶需要選擇艙位等級(jí)，比如經(jīng)濟(jì)艙、商務(wù)艙和頭等艙，選中后，即可進(jìn)入預(yù)訂流程。
拓展閱讀
為什么同一架飛機(jī)同一個(gè)經(jīng)濟(jì)艙飛機(jī)票價(jià)格不一樣？這是因?yàn)橐粋€(gè)飛機(jī)的不同艙位實(shí)際上是不同的產(chǎn)品，所以座位有不同的等級(jí)，故而價(jià)格有了出入。其次他們主要的區(qū)別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁(yè)
在訂單頁(yè)，可以查看到訂單的詳細(xì)信息，包括收費(fèi)說(shuō)明、退改說(shuō)明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗(yàn)陷阱
當(dāng)乘客勾選了「攜帶兒童或嬰兒」的選項(xiàng)以后，在訂單頁(yè)準(zhǔn)備支付的時(shí)候，系統(tǒng)提示乘客需要返回添加兒童出行人信息。但卻并沒(méi)有告訴乘客如何添加，或直接給出對(duì)應(yīng)的功能跳轉(zhuǎn)鏈接，這讓用戶點(diǎn)擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯(cuò)原則，不僅在用戶犯錯(cuò)之前沒(méi)有給出提示，犯錯(cuò)了還不給與指導(dǎo)，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務(wù)銷售，用戶輸入出發(fā)站、終點(diǎn)站和時(shí)間以后，就可進(jìn)入售票頁(yè)。汽車票的訂單流程非常簡(jiǎn)單，在選中客車車次以后，添加乘客支付費(fèi)用后，訂單即可生成。
體驗(yàn)陷阱
用戶在選擇「達(dá)到地」搜索框輸入地名時(shí)候，應(yīng)該提供模糊搜索，比如輸入湖南的地名，應(yīng)該為用戶提示相關(guān)聯(lián)的車站。
1.4 空鐵聯(lián)運(yùn)
空鐵聯(lián)運(yùn)，顧名思義就是把飛機(jī)和高鐵這兩個(gè)產(chǎn)品組合在一起銷售，支持用戶一站式購(gòu)買“飛機(jī)+高鐵”的聯(lián)運(yùn)行程，只需一次購(gòu)票、一次支付。這個(gè)功能的使用場(chǎng)景主要是針對(duì)出發(fā)地和目的地沒(méi)有直飛的航班情況下，為用戶提供飛機(jī)+高鐵的轉(zhuǎn)運(yùn)方案。這個(gè)功能對(duì)于乘客來(lái)說(shuō)，支持一站式購(gòu)買“飛機(jī)+高鐵”車票，可以節(jié)省購(gòu)票時(shí)間，非常友好。
1.5 鐵水聯(lián)運(yùn)
和空鐵聯(lián)運(yùn)一樣，這也是一個(gè)組合產(chǎn)品的銷售，支持用戶一站式購(gòu)買“高鐵+水運(yùn)”的聯(lián)運(yùn)行程。使用場(chǎng)景、功能價(jià)值以及操作流程和空鐵聯(lián)運(yùn)一樣，我們就不必重復(fù)。
1.6 雪具快運(yùn)
12306還推出了一個(gè)雪具快運(yùn)的服務(wù)，為廣大旅客提供多種個(gè)性化雪具寄送產(chǎn)品服務(wù)，還支持隨車辦理或上門辦理寄送服務(wù)，目的是為用戶打造滑雪的新體驗(yàn)。「雪具快運(yùn)」的操作流程也比較簡(jiǎn)單，采用預(yù)約制，選中服務(wù)后，填寫(xiě)用戶詳細(xì)信息，支付成功后，訂單生成。
1.7 小結(jié)
作為12306最重要、最核心、最復(fù)雜的功能，從這個(gè)版塊的內(nèi)容拆解和實(shí)操體驗(yàn)來(lái)看，可以看出12306確實(shí)已經(jīng)解決被譽(yù)為全世界最復(fù)雜的搶票算法邏輯（筆者通過(guò)實(shí)操測(cè)試，幾乎都能買到票），特別是在春運(yùn)這種會(huì)出現(xiàn)超過(guò)上億用戶搶票場(chǎng)景，真可謂非常不容易。不過(guò)從用戶體驗(yàn)來(lái)看，非常一般，甚至有很多不合理的設(shè)計(jì)。
2. 出行
出行是12360結(jié)合了乘客在出行的場(chǎng)景中潛在產(chǎn)生的需求設(shè)計(jì)的服務(wù)，有結(jié)合車站商家的在線點(diǎn)餐，有結(jié)合當(dāng)?shù)氐赜蛱厣穆糜畏?wù)，還有約車、保險(xiǎn)、酒店等服務(wù)。這些服務(wù)，多數(shù)由第三方合作方提供。
2.1 餐廳特產(chǎn)
「餐廳特產(chǎn)」是一個(gè)為乘客提供在線點(diǎn)餐的服務(wù)，在乘客輸入列車車次以后，就可以進(jìn)行點(diǎn)餐，支持外賣配送至列車和到店自取兩種形式。這個(gè)功能設(shè)計(jì)得很友好，不僅解決乘客在乘車前的就餐問(wèn)題，為車站的商家引流，還可以增加平臺(tái)的變現(xiàn)方式。
2.2 鐵路游
「鐵路游」是12306結(jié)合旅游出行的場(chǎng)景，為乘客推出的一項(xiàng)旅游服務(wù)，包含旅游專列、跟團(tuán)游、周末游和自由行等。這個(gè)場(chǎng)景的鏈接其實(shí)非常好，但是版塊目前設(shè)計(jì)得比較簡(jiǎn)單，內(nèi)容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機(jī)、打車和租車的服務(wù)。這是一個(gè)強(qiáng)剛需的需求，用戶在出行的前后都有用車服務(wù)。為乘客提供約車服務(wù)，不僅能增加變現(xiàn)方式，還能方便乘客出行。通過(guò)實(shí)操體驗(yàn)，約車主要由第三方合作方提供服務(wù)，比如曹操出行、T3出行等公司，為乘客提供出租車、品質(zhì)專車和商務(wù)車等車型。
2.4 保險(xiǎn)
保險(xiǎn)分為乘意險(xiǎn)和出行保險(xiǎn)。鐵路乘意險(xiǎn)分為平安險(xiǎn)、行運(yùn)險(xiǎn)和順意險(xiǎn)，主要為乘客提供意外傷害疾病身故等保險(xiǎn)，在乘客購(gòu)買鐵路的訂單頁(yè)就會(huì)向乘客推薦，乘意險(xiǎn)價(jià)格低，保障項(xiàng)目包含意外身故、傷殘、醫(yī)療費(fèi)用、住院津貼等。出行保險(xiǎn)由第三方公司中國(guó)太平洋保險(xiǎn)提供，主要為乘客提供出行安心保、空鐵聯(lián)運(yùn)險(xiǎn)和旅程預(yù)定取消險(xiǎn)。
2.5 酒店
酒店這個(gè)版塊的內(nèi)容相對(duì)夯實(shí)，不僅有新客大禮包這樣的用戶權(quán)益，還有商旅專區(qū)、今夜甩賣、高端酒店這樣的內(nèi)容。甚至還設(shè)計(jì)了專門的酒店會(huì)員VIP，包含普通會(huì)員、銀卡會(huì)員、金卡會(huì)員、白金卡會(huì)員和黑金卡會(huì)員，相對(duì)其他版塊而言，這個(gè)版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉(xiāng)村振興·幫扶推介為主題打造的一個(gè)商城，包含了幫扶專區(qū)、優(yōu)選好物、兌換專區(qū)、今日特賣等內(nèi)容，其次還支持企業(yè)集采，批量購(gòu)買。
2.7 小結(jié)
從這個(gè)版塊，可以看出12360其實(shí)結(jié)合了用戶吃穿住行的剛需場(chǎng)景設(shè)計(jì)了對(duì)應(yīng)的服務(wù)，有自主運(yùn)營(yíng)也有完全依靠第三方提供。不過(guò)整體的用戶體驗(yàn)比較差，事實(shí)上可以參考像順豐速運(yùn)、智聯(lián)招聘這些APP，通過(guò)內(nèi)置小程序的形式來(lái)設(shè)計(jì)，完全可以把這些版塊讓第三方單獨(dú)設(shè)計(jì)和維護(hù)，同時(shí)還能為用戶帶來(lái)更好的體驗(yàn)。
3. 會(huì)員
鐵路暢行會(huì)員是中國(guó)鐵路統(tǒng)一對(duì)外會(huì)員服務(wù)品牌，開(kāi)通暢行會(huì)員不需要花錢，暢行會(huì)員主要是用于會(huì)員用戶積累乘車積分、用積分兌換車票等，主要包含積分權(quán)益，兌換車票、無(wú)票候補(bǔ)和會(huì)員活動(dòng)四大會(huì)員權(quán)益。這個(gè)頁(yè)面設(shè)計(jì)得比較簡(jiǎn)陋，也沒(méi)有太多價(jià)值的內(nèi)容，可以看出12306在用戶運(yùn)營(yíng)方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險(xiǎn)訂單、酒店訂單、空鐵聯(lián)運(yùn)訂單、計(jì)次定期票訂單、約車訂單、出站引導(dǎo)服務(wù)訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯(lián)運(yùn)訂單多達(dá)12種訂單，從這些訂單類型可以看出12306的服務(wù)特別多。
體驗(yàn)陷阱
這個(gè)設(shè)計(jì)實(shí)在太糟糕，嚴(yán)重違反了7±2效應(yīng)。琳瑯滿目，花枝招展，讓用戶在這個(gè)頁(yè)面幾乎迷失。更糟糕的是，當(dāng)你有一個(gè)非常重要的待支付訂單，這個(gè)頁(yè)面竟然沒(méi)有角標(biāo)提醒，最終你會(huì)因?yàn)檫@個(gè)糟糕的設(shè)計(jì)打亂自己的行程計(jì)劃。
內(nèi)容服務(wù)是幫助產(chǎn)品實(shí)現(xiàn)用戶留存和運(yùn)營(yíng)的版塊，不過(guò)從12306的內(nèi)容設(shè)計(jì)來(lái)看，整個(gè)產(chǎn)品的運(yùn)營(yíng)手段比較少，所以我把12306現(xiàn)有設(shè)計(jì)的功能拆分為便捷功能和向?qū)Чδ堋?/span>
1. 便捷功能
以下這七個(gè)功能，對(duì)用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個(gè)非常貼心的功能，通過(guò)這個(gè)功能，可以為用戶提供車站的實(shí)時(shí)列車信息，非常方便。大屏詳情頁(yè)可以拆分為三塊內(nèi)容，左上角可以切換全國(guó)各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內(nèi)容是當(dāng)前車站向西的車次信息，包含發(fā)車時(shí)間、候車室、檢票口和候車狀態(tài)等。
1.1.1 車次詳情頁(yè)
進(jìn)入列車的「車次詳情頁(yè)」，可以查看當(dāng)前車次的完整信息，比如檢票狀態(tài)、候車室、檢票口和全程?？空?、停留信息。在這個(gè)頁(yè)面，還提供了「關(guān)注列車」的功能（關(guān)注后并無(wú)關(guān)注數(shù)據(jù)，顯得很雞肋），以及直接預(yù)訂當(dāng)前車次的入口。
1.1.2 車站詳情頁(yè)
「車站詳情頁(yè)」就像一個(gè)站點(diǎn)的主頁(yè)，為用戶提供完整的車站信息查詢。這個(gè)頁(yè)面可以拆分為四塊，頭部可以切換其他站點(diǎn)，并提供當(dāng)前車站的天氣情況以及車站基礎(chǔ)信息。金剛區(qū)位8個(gè)功能入口，包含車站車次、站內(nèi)導(dǎo)航、重點(diǎn)旅游、餐飲服務(wù)、周邊酒店等。中間是當(dāng)前車站的起售時(shí)間和換乘時(shí)間，底部是車站附近周邊的酒店精選。
迭代建議
這個(gè)頁(yè)面把車站當(dāng)做一個(gè)主體，聚合了一個(gè)車站完整的功能，其實(shí)挺有創(chuàng)意，但頁(yè)面隱藏得很深，如果不去拆解，幾乎很難發(fā)現(xiàn)，很是可惜。我認(rèn)為完全可以提高權(quán)重，升級(jí)為一級(jí)欄目，代替會(huì)員，或者和出行欄目進(jìn)行整合升級(jí)。
1.2 站內(nèi)導(dǎo)航
「站內(nèi)導(dǎo)航」提供目標(biāo)車站的LBS導(dǎo)航，對(duì)于乘客來(lái)說(shuō)，到達(dá)一個(gè)陌生的站點(diǎn)，需要清晰的指引，這是一個(gè)非常便捷、溫馨的功能，能幫乘客解決很多問(wèn)題。不過(guò)這里有一個(gè)莫名其妙的設(shè)計(jì)，那就是進(jìn)入這個(gè)功能之前，系統(tǒng)提示請(qǐng)搖“8”字校準(zhǔn)手機(jī)，事實(shí)上這里是一個(gè)加載動(dòng)畫(huà)，但是畫(huà)面和內(nèi)容卻誤導(dǎo)了用戶，我甚至每次進(jìn)入都傻乎乎的搖動(dòng)手機(jī)。
1.3 臨時(shí)身份證
臨時(shí)身份證是一個(gè)非常重要的功能，12306現(xiàn)在支持APP在線申請(qǐng)，極大方便了乘客的出行。申請(qǐng)流程也比較簡(jiǎn)單，填寫(xiě)個(gè)人信息，驗(yàn)證審核通過(guò)后，就可以生成電子證照使用。每個(gè)人每個(gè)月有3次申請(qǐng)臨時(shí)乘車身份證機(jī)會(huì)。
1.4 遺失物品
這是一個(gè)非常貼心的功能，如果你在乘車的過(guò)程中不小心丟失物品，可以通過(guò)這個(gè)功能登記，輸入你的詳細(xì)信息就能登記成功。
1.5 重點(diǎn)旅客
這也是一個(gè)非常貼心的功能，主要為老年人、殘疾人服務(wù)，通過(guò)填入你的信息，列車會(huì)根據(jù)你的情況提供優(yōu)先進(jìn)站、協(xié)助乘降等服務(wù)。
1.6 愛(ài)心版
愛(ài)心版就是長(zhǎng)輩版，專門為中老年用戶設(shè)計(jì)的版本，在用戶中心切換后就可進(jìn)入愛(ài)心版。整個(gè)版本設(shè)計(jì)得非常簡(jiǎn)潔，操作步驟也比較簡(jiǎn)單，對(duì)中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設(shè)置點(diǎn)擊語(yǔ)言即可切換，整體的版本設(shè)計(jì)得直接簡(jiǎn)潔，用戶體驗(yàn)不錯(cuò)。
1.8 小結(jié)
從這個(gè)版塊可以看出，一個(gè)產(chǎn)品如果以用戶為中心去設(shè)計(jì)，是可以為用戶帶來(lái)很大的便捷和愉悅體驗(yàn)。比如像臨時(shí)身份證這樣的功能，過(guò)往我們只能提前出發(fā)去車站排隊(duì)辦理，但如今12306已經(jīng)把這樣的痛點(diǎn)解決，為用戶節(jié)省了大量的時(shí)間。
2. 向?qū)Чδ?/span>
以下8個(gè)功能，雖然屬于出行向?qū)?，不過(guò)體驗(yàn)下來(lái)，感覺(jué)用戶體驗(yàn)比較差，很多功能完全無(wú)法弄懂它的設(shè)計(jì)目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個(gè)功能的設(shè)計(jì)，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細(xì)信息，包括姓名、身份證號(hào)碼和手機(jī)，其次需要進(jìn)行人臉核驗(yàn)，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁(yè)面，用戶點(diǎn)擊退款后，沒(méi)有和用戶再次確認(rèn)就直接退票。整個(gè)流程體驗(yàn)下來(lái)，非常糟糕。
體驗(yàn)陷阱
這個(gè)功能和訂單頁(yè)的退票感受不出來(lái)有何區(qū)別？如果用戶要退款，不如直接去訂單頁(yè)進(jìn)行退票，操作步驟簡(jiǎn)單，一目了然。其次不支持自動(dòng)導(dǎo)入用戶的購(gòu)票信息實(shí)在太不方便，需要通過(guò)選擇車票購(gòu)買日期和車次，這個(gè)設(shè)計(jì)實(shí)在讓人生氣和憤怒（我在體驗(yàn)的過(guò)程中到了第三步只能退回到訂單頁(yè)把購(gòu)票日期和車次截圖下來(lái)，又再次重復(fù)前面兩個(gè)步驟才到這個(gè)步驟）。
2.2 聯(lián)系方式
這也是一個(gè)看不懂的功能，進(jìn)入頁(yè)面后，需要用戶輸入乘客的詳細(xì)信息，但是這個(gè)乘客信息和用戶在購(gòu)買車票時(shí)候需要添加到乘客信息有什么不同？更糟糕的是，當(dāng)你把自己的電話號(hào)碼、身份證信息填入后，系統(tǒng)會(huì)顯示核驗(yàn)成功，然而當(dāng)你再一次進(jìn)入，頁(yè)面內(nèi)容還是和之前并無(wú)區(qū)別，你不知道自己是不是還要重新輸一次？
2.3 時(shí)刻表
「時(shí)刻表」主要為乘客提供查詢列班車次的出發(fā)時(shí)間和到站信息，但這個(gè)功能「車站大屏」幾乎已經(jīng)包含了，這個(gè)功能顯得意義不大。
2.4 查票價(jià)
這個(gè)功能非常雞肋，因?yàn)樵诨疖嚻钡氖燮痹斍轫?yè)就可以清晰直觀地查詢到列車票價(jià)信息，相反在這個(gè)頁(yè)面，根本無(wú)法看到價(jià)格，因?yàn)閮r(jià)格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點(diǎn)
這個(gè)功能主要為用戶提供全國(guó)各地火車票代售點(diǎn)的查詢，不過(guò)在互聯(lián)網(wǎng)技術(shù)發(fā)展到今天，火車票代售點(diǎn)越來(lái)越少了。從12306采集的信息來(lái)看，部分代售點(diǎn)缺少電話等關(guān)鍵信息，對(duì)用戶來(lái)說(shuō)，比較雞肋。
2.6 起售時(shí)間
這個(gè)功能為用戶提供各車站每日的起售時(shí)間，屬于一個(gè)低頻功能，可以解決乘客某些極端場(chǎng)景的需求。不過(guò)在我體驗(yàn)下來(lái)，比如通過(guò)此功能查詢1月29日的車票，顯示北京站起售時(shí)間為10:00，但是在火車售票版塊，我也可以直接購(gòu)買1月29日的車票，這讓我比較疑惑這個(gè)功能的價(jià)值在哪里。
2.7 正晚點(diǎn)
「正晚點(diǎn)」同樣是一個(gè)雞肋功能，而且還需要輸入準(zhǔn)確的車次才能進(jìn)行查詢，車站大屏已經(jīng)完美可以取代這個(gè)功能。
2.8 列車狀態(tài)
「列車狀態(tài)」比正晚點(diǎn)都還雞肋，讓人憤怒，因?yàn)槟阈枰斎胝_的出發(fā)地、到達(dá)地和出發(fā)時(shí)間，對(duì)了，還有正確的車次才能進(jìn)行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結(jié)
從這個(gè)部分的內(nèi)容拆解和操作體驗(yàn)來(lái)看，12360的產(chǎn)品設(shè)計(jì)得不夠細(xì)致和貼心，很多功能就像是硬生生塞進(jìn)去一樣，濫竽充數(shù)。其次從他們的產(chǎn)品迭代記錄次數(shù)可以看出，近1年更新時(shí)間只有5次，也許每一次都是在做加法，沒(méi)有想過(guò)做減法，所以導(dǎo)致這部分的功能顯得雞肋而且有很大缺陷。
通過(guò)對(duì)鐵路12306的全面拆解，接下來(lái)我將從內(nèi)容層、功能層、體驗(yàn)層和視覺(jué)層進(jìn)行總結(jié)。
1. 內(nèi)容層
12306整個(gè)產(chǎn)品的內(nèi)容設(shè)計(jì)，用一句話總結(jié)，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購(gòu)票、出行的潛在需求場(chǎng)景都設(shè)計(jì)了對(duì)應(yīng)的服務(wù)，比如酒店、約車、點(diǎn)餐、商城等，甚至還有空鐵聯(lián)運(yùn)、鐵水聯(lián)運(yùn)這種多場(chǎng)景的組合售票方式，不過(guò)在實(shí)際的版塊內(nèi)容打造中，則顯得比較空洞，體驗(yàn)一般。這個(gè)產(chǎn)品，可以說(shuō)幾乎沒(méi)有創(chuàng)新點(diǎn)，這主要也是由于它是由國(guó)有企業(yè)設(shè)計(jì)運(yùn)營(yíng)，背景極其復(fù)雜，設(shè)計(jì)目標(biāo)也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔(dān)了被譽(yù)為歷史上人口遷移最大的春運(yùn)的搶票工作，那時(shí)候一票難求，春運(yùn)去12360就像是一場(chǎng)噩夢(mèng)。不過(guò)在經(jīng)過(guò)多年的升級(jí)和優(yōu)化以后，目前12360的購(gòu)票效率非常高，經(jīng)過(guò)筆者多次的測(cè)試和調(diào)研，目前通過(guò)12360購(gòu)票已經(jīng)不再是難事。而且還設(shè)計(jì)了候補(bǔ)搶票這樣的功能，幫助用戶解決買票痛點(diǎn)，可謂非常貼心、友好。
3. 體驗(yàn)層
鐵路12306的用戶體驗(yàn)，非常一般，我在這次的產(chǎn)品拆解中至少偵查出了20條體驗(yàn)陷阱，這些陷阱都會(huì)給用戶帶來(lái)極其糟糕和憤怒的體驗(yàn)。比如讓我像個(gè)傻瓜搖動(dòng)手機(jī)的站內(nèi)導(dǎo)航載入頁(yè)，這完全就是把用戶當(dāng)成傻子一樣看待，其次還有一堆數(shù)不清的雞肋功能，對(duì)用戶的操作體驗(yàn)造成了嚴(yán)重的干擾。我甚至認(rèn)為愛(ài)心版和英文版比標(biāo)準(zhǔn)版使用起來(lái)更愉悅，更能減少我的焦慮。
4. 視覺(jué)層
作為一個(gè)UI設(shè)計(jì)師，在拆解12306的產(chǎn)品過(guò)程中，我對(duì)整個(gè)產(chǎn)品的設(shè)計(jì)感到絕望。首先，沒(méi)有做到統(tǒng)一性，整個(gè)產(chǎn)品毫無(wú)設(shè)計(jì)規(guī)范，比如卡片的圓角、品牌色、版塊間距根本不統(tǒng)一，這樣的視覺(jué)體驗(yàn)一眼望去就非常糟糕；其次，圖標(biāo)、活動(dòng)圖、櫥窗圖以及詳情頁(yè)的設(shè)計(jì)毫無(wú)美感，滿滿的山寨APP風(fēng)格，特別是訂單頁(yè)的ICON，花花綠綠、琳瑯滿目，連最基礎(chǔ)的統(tǒng)一都沒(méi)有做到。
作為一款國(guó)民級(jí)用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學(xué)室友，每年春運(yùn)開(kāi)啟之前就為了回家的火車票犯愁，不僅要去遙遠(yuǎn)的火車站排隊(duì)，很多時(shí)候還可能空手而回，那便是最初對(duì)12306的記憶。
如今十年過(guò)去了，12306解決了億萬(wàn)人的出行搶票需求，讓我們?cè)诖哼\(yùn)的路上，可以輕松購(gòu)買一張回家的票。但下一個(gè)十年，我更希望12360的產(chǎn)品團(tuán)隊(duì)，可以重視用戶體驗(yàn)設(shè)計(jì)，讓我們不再掉入那些體驗(yàn)陷阱。
作者：設(shè)計(jì)大偵探 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
配圖是我們平時(shí)在設(shè)計(jì)工作中經(jīng)常用到的，一個(gè)好的配圖很多時(shí)候會(huì)直接影響到一個(gè)作品的好壞，圖片本身也是一種視覺(jué)語(yǔ)言，通過(guò)學(xué)習(xí)跨領(lǐng)域的知識(shí)可以幫助我們提升自身所處的領(lǐng)域設(shè)計(jì)能力，本篇文章和大家討論一些構(gòu)圖和景別知識(shí)，通過(guò)對(duì)這些知識(shí)的了解判斷如何選擇一個(gè)好的配圖以及怎么應(yīng)用好配圖，大多數(shù)設(shè)計(jì)師選擇配圖時(shí)都是憑著主觀意識(shí)在選擇配圖，你所選擇的配圖很大程度會(huì)受到你的主觀意識(shí)的影響，這些主觀意識(shí)來(lái)源于自身審美、文化、環(huán)境等因素的，因此在我們的主觀意識(shí)基礎(chǔ)上，應(yīng)該具備一定的客觀依據(jù)來(lái)幫助我們更好的選擇合適的配圖。
構(gòu)圖與景別知識(shí)在攝影、繪畫(huà)、影視中應(yīng)用很多，但很多設(shè)計(jì)師容易忽視這些知識(shí)，這些知識(shí)看似是攝影、繪畫(huà)、影視等行業(yè)的知識(shí)與設(shè)計(jì)好像沒(méi)太大關(guān)系，這些知識(shí)也是很有必要學(xué)習(xí)的的理論知識(shí)，對(duì)構(gòu)圖景別的理解很大程度會(huì)影響你能否把握好設(shè)計(jì)畫(huà)面中的配圖，配圖本身也是一種視覺(jué)語(yǔ)言，提升構(gòu)圖和景別知識(shí)對(duì)設(shè)計(jì)師整體綜合實(shí)力提升是有幫助的，當(dāng)你做三維和插畫(huà)等設(shè)計(jì)時(shí)同樣也會(huì)用到這些知識(shí)，了解這些知識(shí)會(huì)讓你以客觀依據(jù)的角度，運(yùn)用和判斷設(shè)計(jì)中配圖的好與壞。
目前來(lái)看幾乎所有的藝術(shù)或商業(yè)作品，無(wú)論是攝影、繪畫(huà)、CG等都離不開(kāi)畫(huà)面的構(gòu)圖與結(jié)構(gòu)，你甚至能在很多繪畫(huà)大師的的經(jīng)典作品中看到他們作品中也使用了構(gòu)圖理論，合理的構(gòu)圖作品，給觀眾美的視覺(jué)享受和與眾不同的情感體驗(yàn)，同時(shí)提升畫(huà)面表現(xiàn)，關(guān)于構(gòu)圖的知識(shí)很寬泛，構(gòu)圖方式方法也非常多，有的作品中可能包含多種構(gòu)圖形式，這里給大家大致介紹一些常見(jiàn)的構(gòu)圖知識(shí)，目的是拋磚引玉讓大家意識(shí)到良好的構(gòu)圖能平衡畫(huà)面同時(shí)，傳達(dá)出更清晰明確的圖像信息。
中心構(gòu)圖是將畫(huà)面主體放置在畫(huà)面的視覺(jué)中心，讓主體成為整個(gè)畫(huà)面的視覺(jué)焦點(diǎn)，通過(guò)周圍環(huán)境氛圍烘托畫(huà)面主體，這種構(gòu)圖形式聚焦主體，能更好的凸顯畫(huà)面主體。
一點(diǎn)透視構(gòu)圖有較強(qiáng)的空間感和縱深感，畫(huà)面的元素會(huì)向中心聚焦，會(huì)把觀眾的視覺(jué)引導(dǎo)向畫(huà)面中心，比較適合表現(xiàn)畫(huà)面空間感。
黃金法則構(gòu)圖遵循古希臘學(xué)者畢達(dá)哥拉斯的黃金分割比例進(jìn)行構(gòu)圖，也就是我們常說(shuō)的 0.618:1，黃金法則構(gòu)圖有采用像三分法那樣井字構(gòu)圖，還有采用黃金螺旋的構(gòu)圖方式，構(gòu)圖時(shí)將主題放置在黃金比例焦點(diǎn)或線上。
對(duì)角線構(gòu)圖中主體在畫(huà)面的對(duì)角線位置排列，對(duì)角線構(gòu)圖視覺(jué)沖擊強(qiáng)，具有動(dòng)感和不穩(wěn)定性，更使畫(huà)面更有趣味和視覺(jué)張力。
主體在畫(huà)面中呈三角形狀，正三角形構(gòu)圖畫(huà)面更具穩(wěn)定性，反之倒三角形構(gòu)圖會(huì)使畫(huà)面有緊張感和不穩(wěn)定性。
字母形構(gòu)圖畫(huà)面呈現(xiàn)字母形態(tài)，不同的字母構(gòu)圖會(huì)給觀眾帶來(lái)不同的視覺(jué)感受，S 形構(gòu)圖是一種比較常見(jiàn)的構(gòu)圖形式，S 形構(gòu)圖迂回延伸使畫(huà)面產(chǎn)生優(yōu)美、雅致、韻律感。
引導(dǎo)性構(gòu)圖利用畫(huà)面中有形或無(wú)形的線，引導(dǎo)觀眾的視覺(jué)聚焦到畫(huà)面的重點(diǎn)，引線不一定是一條線，它是一種具有引導(dǎo)性的東西，光影、道路、河流等都可以做為引導(dǎo)線，引導(dǎo)性構(gòu)圖視覺(jué)表現(xiàn)強(qiáng)，引導(dǎo)觀眾視線突出主體。
三分構(gòu)圖是最常用的構(gòu)圖方法，結(jié)構(gòu)由兩條豎線和兩條橫線構(gòu)成，形成一個(gè)井字，也叫井字構(gòu)圖法，在三分構(gòu)圖中主體通常放置在四個(gè)交點(diǎn)上或線條上，三分法是比較常見(jiàn)的構(gòu)圖形式，可以在很多攝影和繪畫(huà)作品中看到。
對(duì)稱構(gòu)圖是根據(jù)對(duì)稱軸，使畫(huà)面形成的對(duì)稱的構(gòu)圖形式，比較常見(jiàn)的對(duì)稱構(gòu)圖上下對(duì)稱、左右對(duì)稱，對(duì)稱構(gòu)圖具有平衡性、穩(wěn)定性、均衡性。
水平線構(gòu)圖也是比較常見(jiàn)的一種構(gòu)圖，水平線構(gòu)圖通常表現(xiàn)寬廣的場(chǎng)景，地平線、海面、湖面等主題，水平線構(gòu)圖給人寬闊、穩(wěn)定、平靜、舒適的感覺(jué)，水平線構(gòu)圖主要是是采用橫畫(huà)幅來(lái)表現(xiàn)。
垂直線構(gòu)圖中主體呈現(xiàn)為垂直的線條，垂直線構(gòu)圖給人高聳、莊嚴(yán)、挺拔的感覺(jué)，具有較強(qiáng)的視覺(jué)張力，錘子線構(gòu)圖常采用豎畫(huà)幅來(lái)表現(xiàn)。
十字形構(gòu)圖是水平線和垂直線的組合，十字形構(gòu)圖畫(huà)面會(huì)給人平穩(wěn)、安全、嚴(yán)肅、神秘的感覺(jué)。
夸張透視會(huì)以比較特別和夸張的的視角表現(xiàn)畫(huà)面和主體，使畫(huà)面整體都具有強(qiáng)大的視覺(jué)張力和沖擊力。
虛實(shí)對(duì)比通過(guò)主體和背景的間的虛與實(shí)對(duì)比，從而突出畫(huà)面主體，虛實(shí)對(duì)比使畫(huà)面更有層次和空間感。
明暗對(duì)比通常以暗襯托明，在視覺(jué)感受中越暗感覺(jué)離我們?cè)竭h(yuǎn)，越明亮感覺(jué)離我們?cè)浇?，明暗?duì)比對(duì)比可以使畫(huà)面更有立體感，層次感等，通過(guò)畫(huà)面中的明暗對(duì)比形成的強(qiáng)烈反差，可以凸顯畫(huà)面中主體，引導(dǎo)觀眾視線到主體上。
色彩對(duì)比中包含三個(gè)要素色相對(duì)比、純度對(duì)比、明度對(duì)比，同時(shí)根據(jù)色環(huán)中的色相變化，還可以分為同類色對(duì)比、鄰近色對(duì)比、對(duì)比色對(duì)比、互補(bǔ)色對(duì)比，色相角度變化越大對(duì)比月強(qiáng)烈，通過(guò)色彩對(duì)比可以突出畫(huà)面重點(diǎn)、豐富畫(huà)面、提升畫(huà)面層次，背景色彩與主體色彩形成對(duì)比，能凸顯畫(huà)面主體。
奇數(shù)原則畫(huà)面通常是一個(gè)、三個(gè)或五個(gè)主體，通常不超過(guò)七個(gè)，超過(guò)七個(gè)時(shí)觀眾會(huì)將其視為一個(gè)整體，當(dāng)畫(huà)面中為主體為奇數(shù)時(shí)，在視覺(jué)上會(huì)比偶數(shù)更和諧、更美觀。
視覺(jué)引導(dǎo)通過(guò)畫(huà)面內(nèi)容引導(dǎo)用戶視覺(jué)，視覺(jué)引導(dǎo)形式有很多種，人物或動(dòng)物直視、運(yùn)動(dòng)方向、肢體語(yǔ)言等，都可以引導(dǎo)用戶在觀看畫(huà)面時(shí)的視線運(yùn)動(dòng)。
通過(guò)大小對(duì)比使主體與周圍元素形成差異化的視覺(jué)沖突，同時(shí)大小對(duì)比中的次要元素還可以作為比例參考，突出主體的大小，強(qiáng)烈的視覺(jué)落差增強(qiáng)版面節(jié)奏。
裁剪圖片為不同景別的圖片對(duì)板式設(shè)計(jì)也有很大影響，不同景別的圖片傳達(dá)的視覺(jué)語(yǔ)言也是不同的，哪怕是圖片朝向的位置都值得我們仔細(xì)思考，在配圖時(shí)我們要思考通過(guò)圖片傳達(dá)什么視覺(jué)信息給觀眾，所以在我們做設(shè)計(jì)時(shí)，要想清楚當(dāng)前頁(yè)面要傳達(dá)什么樣的信息從而采用什么樣的景別。
大遠(yuǎn)景通常表現(xiàn)廣闊氣勢(shì)宏偉的場(chǎng)景，大遠(yuǎn)景的空間感非常強(qiáng)，強(qiáng)化景物與環(huán)境的關(guān)系，主體相對(duì)較小與場(chǎng)景形成強(qiáng)烈的大小對(duì)比。
遠(yuǎn)景營(yíng)造主體與場(chǎng)景的關(guān)系，通過(guò)畫(huà)面場(chǎng)景敘述主體和場(chǎng)景的關(guān)系，遠(yuǎn)景具有較強(qiáng)的空間感，具有開(kāi)闊的畫(huà)面場(chǎng)景。
全景通過(guò)場(chǎng)景來(lái)體現(xiàn)主體的處境，利用人物和場(chǎng)景的關(guān)系強(qiáng)化主題，全景中主體會(huì)被強(qiáng)化形成明顯的內(nèi)容中心，從而弱化場(chǎng)景。
中景表現(xiàn)主要表現(xiàn)人物膝蓋以上，在中景中人物在畫(huà)面中的占比更大更為突出，人物會(huì)被強(qiáng)化，同時(shí)弱化場(chǎng)景。
近景主要表現(xiàn)人物胸部以上，畫(huà)面中人物或主體會(huì)占有主導(dǎo)地位，強(qiáng)調(diào)人物的情感特征，通過(guò)細(xì)微人物的動(dòng)作、肢體語(yǔ)言、表情等表現(xiàn)畫(huà)面主題。
特寫(xiě)主要表現(xiàn)人物肩部以上或主體的細(xì)微部分，主體被放大，場(chǎng)景弱化到難以分辨，強(qiáng)調(diào)主體的情感、心理或產(chǎn)品的工藝結(jié)構(gòu)等。
大特寫(xiě)會(huì)將主題放的更大，展現(xiàn)主體的局部細(xì)節(jié)，大特寫(xiě)具有強(qiáng)調(diào)和突出主體細(xì)節(jié)特征的作用，具有極強(qiáng)的視覺(jué)效果。
配圖知識(shí)是設(shè)計(jì)師在平時(shí)工作或設(shè)計(jì)練習(xí)中必備知識(shí)，很多時(shí)候我們?cè)谶x擇配圖時(shí)完全是憑感覺(jué)在選，圖片也是一種視覺(jué)語(yǔ)言，作品整體質(zhì)量也會(huì)受到配圖的影響，本次配圖知識(shí)分享希望能幫助大家在之后選擇設(shè)計(jì)配圖時(shí)，在主觀意識(shí)判斷的基礎(chǔ)上有一個(gè)客觀的依據(jù)，寫(xiě)這篇文章的同時(shí)，我也正好根據(jù)文章大綱做了一套板式練習(xí)作為文章配圖，最后給大家分享幾個(gè)高質(zhì)量的圖片網(wǎng)站（需要翻墻）
攝影類圖片
https://unsplash.com/
https://burst.shopify.com/
CG類圖片
https://www.deviantart.com/
https://wallhaven.cc/
作者：Tomato76 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
同時(shí)也方便用戶再次消費(fèi)某個(gè)內(nèi)容時(shí)，減少再次記憶和查找的成本。比如我喜歡做菜，但是年紀(jì)大了記性不好，每次做一道菜我都會(huì)打開(kāi)我的某音收藏夾里找到視頻教程，這個(gè)老小子的視頻教出來(lái)的菜味道真不錯(cuò)。
收藏夾要解決用戶什么問(wèn)題
兩個(gè)關(guān)鍵詞：1.管理 2.分類
管理，就是我們所說(shuō)的增刪改查?！霸觥?，我們需要在用戶瀏覽信息時(shí)給該信息提供收藏功能，這里要注意的是收藏信息的顆粒度，什么信息可以收藏，一段話？一篇文章？一個(gè)用戶發(fā)布的完整內(nèi)容？還是一張圖片？產(chǎn)品對(duì)收藏最小單位的定義要明確，因?yàn)闀?huì)影響到對(duì)收藏內(nèi)容的分類。例如微信可收藏的最小單位很多，有鏈接（包含文章）、文件、圖片/視頻、音樂(lè)、語(yǔ)音、聊天記錄、筆記、位置，而像餓了么只能關(guān)注店鋪，對(duì)任何菜品、用戶評(píng)論等等都無(wú)法進(jìn)行收藏。b站你可以收藏視頻、漫畫(huà)、商品，但是不能他人的動(dòng)態(tài)。
刪沒(méi)什么好說(shuō)的，再來(lái)說(shuō)一下改和查。因?yàn)樗麄z會(huì)涉及到收藏的流程。我們知道不同產(chǎn)品的收藏流程是不同的，例如馬蜂窩、閑魚(yú)等產(chǎn)品，用戶收藏內(nèi)容后只給出收藏成功的toast/提示欄提示，并告知收藏到了哪里；
而騰訊視頻、抖音、攜程則是當(dāng)用戶進(jìn)行收藏后除了給出成功提示還會(huì)給出收藏列表的入口；
最后，像知乎、豆瓣在點(diǎn)擊收藏后直接給出滑出操作框讓用戶選擇收藏夾或創(chuàng)建收藏夾以及是否要轉(zhuǎn)發(fā)。
3種流程的區(qū)別
前兩種我認(rèn)為區(qū)別并不大，是否要在提示框里給用戶進(jìn)入收藏列表的入口，更多還是取決于產(chǎn)品是否想讓用戶離開(kāi)這個(gè)場(chǎng)景，還是讓用戶繼續(xù)瀏覽。之前我們提到過(guò)閉環(huán)，但是閉環(huán)一般針對(duì)任務(wù)而言，但是收藏嚴(yán)格來(lái)說(shuō)不算是“任務(wù)”，而是用戶的一種“行為”，感知起來(lái)區(qū)別還是很大的，因?yàn)槿蝿?wù)是有明確目標(biāo)的，比如給用戶安排一個(gè)任務(wù)，讓他對(duì)某個(gè)商品進(jìn)行分類收藏，那么用戶會(huì)根據(jù)這個(gè)分類收藏的目標(biāo)去進(jìn)行操作，任務(wù)結(jié)束后給用戶相關(guān)的引導(dǎo)和出口。但是在用戶自然的瀏覽場(chǎng)景中，對(duì)內(nèi)容的收藏并沒(méi)有具體目標(biāo)，所以要不要給用戶在點(diǎn)擊收藏后引導(dǎo)進(jìn)入收藏列表要具體情況具體分析。
其次是知乎、豆瓣，在用戶點(diǎn)擊收藏后給予是否要?jiǎng)?chuàng)建收藏夾的功能，相比于前兩種，對(duì)信息內(nèi)容的管理，更加明顯了。首先為什么他們和前兩種不同呢，像知乎用戶是有KOL效應(yīng)的，個(gè)人的收藏夾可以公開(kāi)，他人可以查看他人的收藏夾，有點(diǎn)類似于花瓣的畫(huà)板，同時(shí)對(duì)于這類知識(shí)、內(nèi)容類的應(yīng)用，對(duì)于分類的要求和需求更高更多，本身知識(shí)的維度就很多，顆粒度很小，所以在用戶進(jìn)行收藏行為時(shí)主動(dòng)提醒用戶可以創(chuàng)建收藏夾。
那淘寶是怎么做的，它在用戶收藏的時(shí)候也給出一個(gè)菜單，用戶可以選擇收入到某個(gè)收藏夾，也可以默認(rèn)不放入，還可以去創(chuàng)建并放入，這就是更個(gè)性化了。
但是咱們說(shuō)前兩種沒(méi)有給在收藏時(shí)給創(chuàng)建功能的就不個(gè)性化了嗎？也不是，個(gè)性化也要根據(jù)產(chǎn)品定位和用戶需求來(lái)的，比如馬蜂窩的一些機(jī)票車票、旅游產(chǎn)品，做一個(gè)收藏夾創(chuàng)建，好像沒(méi)必要，因?yàn)榭墒詹氐念愋筒欢?，個(gè)性化標(biāo)簽也不明顯，顯然是沒(méi)必要的。騰訊視頻、閑魚(yú)顯然也是。那我們?cè)賮?lái)聊一個(gè)細(xì)節(jié)。
知乎在點(diǎn)擊收藏某個(gè)回答的時(shí)候，頁(yè)面會(huì)喚起收藏模塊，讓用戶選擇你要收藏到哪里，但這里的體驗(yàn)不是很好，因?yàn)橛脩粝胍詹啬硞€(gè)內(nèi)容必須先選擇收藏夾，如果不選擇則無(wú)法收藏成功？
無(wú)論你當(dāng)前是否創(chuàng)建了收藏夾，都必須選擇或點(diǎn)擊完成，如果有創(chuàng)建過(guò)，那就需要經(jīng)歷：1.點(diǎn)擊收藏圖標(biāo) 2.點(diǎn)擊要收入的收藏夾 3.點(diǎn)擊完成，如果沒(méi)有創(chuàng)建過(guò)那么默認(rèn)會(huì)創(chuàng)建一個(gè)收藏夾。而淘寶則不是，無(wú)論你是否創(chuàng)建收藏夾，只要點(diǎn)擊收藏圖表那就已經(jīng)收藏成功，在這個(gè)前提下，你可以選擇是否要收入到某個(gè)收藏夾還是新創(chuàng)建一個(gè)。
所以知乎、豆瓣的收藏單位大多以回答、帖子為主，這樣的內(nèi)容系統(tǒng)無(wú)法幫助生成標(biāo)簽，所以需要用戶自己創(chuàng)建分類，在收藏時(shí)給予創(chuàng)建功能是合理的，但我認(rèn)為知乎這樣的設(shè)計(jì)還是不夠人性化，但是站在業(yè)務(wù)角度看，就是想引導(dǎo)用戶去創(chuàng)建分類，也是能理解的，雖然在體驗(yàn)和效率上并不是最優(yōu)。
創(chuàng)建、分類、搜索都是幫助用戶再次進(jìn)入收藏空間時(shí)能夠更好的查找想要的內(nèi)容。同時(shí)不同產(chǎn)品會(huì)有不同的篩選標(biāo)簽，比如微信閱讀，收藏其實(shí)就是書(shū)架，哦，應(yīng)該說(shuō)，書(shū)架就是收藏。篩選維度分為：更新、進(jìn)度、購(gòu)買、分類。所以我們?cè)谠O(shè)計(jì)收藏功能的時(shí)候，要根據(jù)用戶的篩選場(chǎng)景和內(nèi)容來(lái)制定合理的篩選維度。
收藏和點(diǎn)贊還有加入購(gòu)物車的區(qū)別
收藏的屬性就是收納、管理和分類，但是和點(diǎn)贊、購(gòu)物車不同，點(diǎn)贊意味著認(rèn)同，具有社交屬性，同時(shí)也為了幫助產(chǎn)品記錄用戶個(gè)偏好用作研究，而收藏則是用戶想對(duì)該內(nèi)容進(jìn)行收集，比如我正在準(zhǔn)備一個(gè)辯論賽，我抽了一個(gè)反方觀點(diǎn)，雖然我本身并不喜歡這個(gè)觀點(diǎn)，但是為了準(zhǔn)備辯論的素材和題目我會(huì)對(duì)這個(gè)內(nèi)容進(jìn)行收藏，但不會(huì)點(diǎn)贊，雖然收藏大部分時(shí)候也有對(duì)內(nèi)容的認(rèn)可，但不完全是。所以收藏更多的是用戶個(gè)人對(duì)信息的單方面管理，點(diǎn)贊則一個(gè)即時(shí)互動(dòng)。
收藏和購(gòu)物車也是一樣的，購(gòu)物車承載的是更多消費(fèi)、商品營(yíng)銷的表達(dá)、算價(jià)以及湊單活動(dòng)，購(gòu)物車和直接消費(fèi)強(qiáng)關(guān)聯(lián)，而收藏夾多關(guān)注與對(duì)商品的存儲(chǔ)管理、搜索查找，雖然也有一部分需求重合，但用處、和場(chǎng)景還是有很大區(qū)別的。
最后，總結(jié)一下，設(shè)計(jì)收藏夾時(shí)，我們首先得根據(jù)產(chǎn)品定位和用戶需求以及內(nèi)容的維度來(lái)選擇好收藏夾的顆粒度或最小單位，其次，根據(jù)業(yè)務(wù)或用戶需求設(shè)定好收藏夾的收藏邏輯和流程，最后，做好用戶對(duì)收藏內(nèi)容的查找以及分類篩選的體驗(yàn)。
作者：應(yīng)駿 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過(guò)程中，如果沒(méi)有系統(tǒng)的可視化知識(shí)，會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對(duì)你的設(shè)計(jì)過(guò)程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來(lái)表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過(guò)圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個(gè)例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個(gè)步驟：選擇適合的圖表，強(qiáng)化視覺(jué)層次，圖表響應(yīng)式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開(kāi)始作圖，往往會(huì)遇到一個(gè)困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過(guò)分析數(shù)據(jù)關(guān)系來(lái)選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。
1. 分析數(shù)據(jù)關(guān)系
根據(jù)數(shù)據(jù)分析的方式來(lái)看，每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見(jiàn)的還有流轉(zhuǎn)關(guān)系。
構(gòu)成關(guān)系
構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來(lái)為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級(jí)結(jié)構(gòu)，還會(huì)用矩形樹(shù)圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。
關(guān)鍵詞：“占比、比例、百分比”
比較關(guān)系
比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過(guò)對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類對(duì)比兩種形式，趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類對(duì)比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等；分類對(duì)比常用條形圖、柱狀圖、氣泡圖等。
關(guān)鍵詞：“增減、升降、漲跌、波動(dòng)”
分布關(guān)系
利用空間分區(qū)來(lái)展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。
常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等
關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等
關(guān)聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。
常用圖表：關(guān)系圖、?；鶊D、漏斗圖、進(jìn)度圖等
關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見(jiàn)數(shù)據(jù)特征有：變量特征、維度特征、層級(jí)特征、流程特征。
變量特征
分辨一個(gè)指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì)，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類
層級(jí)特征
多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱樹(shù)形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹(shù)圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場(chǎng)銷售額的來(lái)源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷售額，通過(guò)色調(diào)來(lái)區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對(duì)比一般結(jié)構(gòu)樹(shù)圖表，它的優(yōu)勢(shì)在于可以有效利用空間。
流程特征
流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和，同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。
二、強(qiáng)化視覺(jué)層次
選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。
1. 強(qiáng)化數(shù)據(jù)特性
使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差
2. 色彩視覺(jué)傳達(dá)
除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知，錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過(guò)不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。
我們?cè)谥暗奈恼吕镉薪榻B過(guò)圖表的取色模型，通過(guò)調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。
定性型：使用色調(diào)來(lái)進(jìn)行分類
數(shù)據(jù)內(nèi)在沒(méi)有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國(guó)家、行業(yè)等類型。如果希望圖表看起來(lái)更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：
定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序
如果在同一個(gè)分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來(lái)突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應(yīng)式設(shè)計(jì)
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來(lái)的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁(yè)端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來(lái)保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過(guò)改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。
2. 圖表元素適配
要適配移動(dòng)端，網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。
3. 極值適配
因B端平臺(tái)的特性，我們無(wú)法預(yù)知客戶傳入的數(shù)據(jù)量，可能會(huì)遇到因數(shù)據(jù)量過(guò)多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問(wèn)題。這種情況下，提前考慮數(shù)據(jù)極限場(chǎng)景，通過(guò)交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。
還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。
// 結(jié)語(yǔ)
數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。
二、什么是「組合手勢(shì)」
「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。
于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。
「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。
由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。
三、「長(zhǎng)按組合手勢(shì)」激活快捷菜單
1.項(xiàng)目背景
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
2.競(jìng)品調(diào)研及選型
通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型， 分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。
選型A
「長(zhǎng)按觸發(fā)獨(dú)立播控面板」：通過(guò)長(zhǎng)按手勢(shì)可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對(duì)視頻沉浸觀感體驗(yàn)有一定的打斷感；
選型B
「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」：通過(guò)長(zhǎng)按手勢(shì)可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
選型C
「長(zhǎng)按觸發(fā)特定播控功能」：通過(guò)長(zhǎng)按手勢(shì)觸發(fā)特定的某個(gè)播控功能（如長(zhǎng)按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對(duì)于長(zhǎng)按手勢(shì)的使用效率較低；
3.設(shè)計(jì)方案
1）長(zhǎng)按手勢(shì)交互擴(kuò)容
針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶。
那么如何在兼容用戶已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
step1：以“長(zhǎng)按手勢(shì)”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；
step2：若用戶未松開(kāi)手指，則系統(tǒng)默認(rèn)開(kāi)始識(shí)別用戶意圖，是否有以“拖拽手勢(shì)”滑選至目標(biāo)功能項(xiàng)以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長(zhǎng)按+向上滑選」快捷觸發(fā)對(duì)應(yīng)功能項(xiàng)；
「長(zhǎng)按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對(duì)于此功能的使用習(xí)慣）。
2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測(cè)試目標(biāo)、用戶類別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測(cè)試。
測(cè)試訪談的過(guò)程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/span>
同時(shí)，我們通過(guò)觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實(shí)時(shí)提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。
方案上線及驗(yàn)證
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：
「對(duì)照組」效果：長(zhǎng)按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實(shí)驗(yàn)組」效果：長(zhǎng)按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；
小流量實(shí)驗(yàn)上線后，經(jīng)過(guò)近半個(gè)月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長(zhǎng)按快捷菜單的上線推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢(shì)」拓展探索
手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類高級(jí)手勢(shì)，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。
以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。
1.「右滑返回手勢(shì)」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
2.「雙指手勢(shì)」激活“滿屏播放”
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫(huà)面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
五、結(jié)語(yǔ)
便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場(chǎng)景的手勢(shì)交互體驗(yàn)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
提到按鈕，大部分人印象就是文字加個(gè)背景框，并沒(méi)有太多需要設(shè)計(jì)的空間。但是作為B端設(shè)計(jì)師，相信很多同學(xué)在工作過(guò)程中都產(chǎn)生過(guò)以下問(wèn)題：
按鈕作為最基本的交互單位之一，幾乎在每個(gè)頁(yè)面中我們都會(huì)使用到。由于不同行業(yè)下業(yè)務(wù)場(chǎng)景的復(fù)雜性，很多時(shí)候很難直接參照其他產(chǎn)品的按鈕進(jìn)行復(fù)用，也無(wú)法用一套布置方案復(fù)用所有場(chǎng)景，所以作為B端設(shè)計(jì)師需要對(duì)按鈕控件具備足夠的認(rèn)知，理解其背后的使用邏輯和規(guī)范，才能滿足多層級(jí)跨場(chǎng)景的設(shè)計(jì)需要。
本文結(jié)合自身的工作經(jīng)驗(yàn)，對(duì)按鈕進(jìn)行了系統(tǒng)性的整理和總結(jié)，希望對(duì)各位B端設(shè)計(jì)師同學(xué)的日常工作和學(xué)習(xí)有所幫助。
在詳細(xì)介紹按鈕前，我們先簡(jiǎn)單了解下按鈕的發(fā)展歷史。按鈕的概念起初是源自現(xiàn)實(shí)物理世界的實(shí)體按鈕，在日常生活中如電源開(kāi)關(guān)、計(jì)算器、電話等都是通過(guò)實(shí)體按鈕進(jìn)行控制，由于其簡(jiǎn)單直觀易操作的特性，即使如今各種電子產(chǎn)品都逐漸發(fā)展為觸控屏操作，實(shí)體按鈕依舊被保留了下來(lái)。
當(dāng)數(shù)字屏誕生后，人機(jī)交互設(shè)計(jì)開(kāi)始走向數(shù)字屏幕后，為方便用戶理解，在很長(zhǎng)一段時(shí)間內(nèi)設(shè)計(jì)師都是采用擬物風(fēng)按鈕來(lái)暗示用戶可執(zhí)行的操作。伴隨著客戶端設(shè)備升級(jí)和開(kāi)發(fā)方式的變更，至2013年 Apple 在iOS7上第一次采用了扁平化設(shè)計(jì)，至此按鈕樣式開(kāi)始往扁平化發(fā)展。隨后歷經(jīng)了多年發(fā)展，按鈕的樣式開(kāi)始層出不窮，但是無(wú)論樣式如何變更，其背后的體驗(yàn)交互邏輯依舊是物理世界按鈕的映射。
在B端設(shè)計(jì)中什么樣的組件可以定義為按鈕？我們先來(lái)看看國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)中對(duì)按鈕組件的定義：
總結(jié)來(lái)說(shuō)，按鈕可以理解為用于承載即時(shí)操作和命令的組件。由于B端產(chǎn)品業(yè)務(wù)邏輯復(fù)雜、頁(yè)面流程多，相較于傳統(tǒng)意義上的按鈕，B端中的按鈕被設(shè)定為可復(fù)用、規(guī)范化的組件，通過(guò)對(duì)組件元素進(jìn)行拆解、歸納、重組，將其劃分為特定類型的組件方便管理和使用。
按鈕相較于輸入框、選擇器、單選框等控件無(wú)法進(jìn)行數(shù)據(jù)輸入，相較于標(biāo)簽、文字提示等控件也無(wú)法進(jìn)行信息瀏覽，其關(guān)鍵在于【即時(shí)性】和【承載操作】，既可單獨(dú)完成操作，也可與其他控件聯(lián)動(dòng)，作為觸發(fā)操作的行動(dòng)點(diǎn)。
雖然同樣翻譯為標(biāo)簽，但是此處指的是 Tag 標(biāo)簽，而非 Tabs 標(biāo)簽頁(yè)。標(biāo)簽在樣式上與按鈕幾乎相同，且同樣可以添加圖標(biāo)標(biāo)識(shí)和觸發(fā)操作。兩者的區(qū)別在于，標(biāo)簽側(cè)重于信息的選擇、篩選和分類，而按鈕則只是單純用于觸發(fā)即時(shí)操作，因此很多時(shí)候標(biāo)簽會(huì)設(shè)置不同顏色樣式以便信息區(qū)分。
和其他錄入控件相比，開(kāi)關(guān)Switch最顯著的特點(diǎn)便是和按鈕一樣觸發(fā)后立即生效，因此很多初級(jí)設(shè)計(jì)師很容易將其與按鈕歸為一類。
其區(qū)別是，開(kāi)關(guān)承載的是兩種互斥狀態(tài)的切換，如打開(kāi)/關(guān)閉、顯示/隱藏、啟用/禁用等，此外由于在視覺(jué)上符合用戶對(duì)現(xiàn)實(shí)世界中開(kāi)關(guān)的認(rèn)知，所以可以直接展示當(dāng)前項(xiàng)的狀態(tài)。
單選框和多選框一般用于狀態(tài)標(biāo)記，但是無(wú)法直接觸發(fā)操作，所以通常會(huì)和按鈕配合進(jìn)行使用。最常見(jiàn)的搭配場(chǎng)景便是在登錄頁(yè)，用戶勾選【記住密碼】或【自動(dòng)登錄】后標(biāo)記其狀態(tài)，再點(diǎn)擊按鈕進(jìn)行登錄。
相較于其他組件，按鈕的元素構(gòu)成較為簡(jiǎn)單，分為內(nèi)容層和容器層，通過(guò)將不同元素進(jìn)行搭配組合，即可設(shè)計(jì)出不同類型的按鈕類型和按鈕狀態(tài)。
內(nèi)容層：圖標(biāo)和文字自由組合。內(nèi)容層作為操作引導(dǎo)的核心必須存在。
容器層：控制顏色、圓角、描邊、投影等樣式，有些設(shè)計(jì)系統(tǒng)下還會(huì)加上交互動(dòng)效，提升用戶體驗(yàn)感。
在查閱大廠的設(shè)計(jì)規(guī)范時(shí)，相信以下按鈕名稱大家應(yīng)該都不陌生：主按鈕、懸浮按鈕、圖標(biāo)按鈕、危險(xiǎn)按鈕、下拉按鈕、文字按鈕、CTA按鈕……很多新手設(shè)計(jì)師會(huì)產(chǎn)生疑惑：
為什么要?jiǎng)澐秩绱硕嗟陌粹o類型？
這些按鈕間的區(qū)別是什么？
為什么各家設(shè)計(jì)系統(tǒng)下按鈕分類都不相同，我應(yīng)該選擇哪種作為參考？
為了區(qū)分好按鈕類型，關(guān)鍵要先明確類目劃分的邊界。這里為了方便大家學(xué)習(xí)，我從按鈕的強(qiáng)調(diào)程度和使用場(chǎng)景2個(gè)緯度將按鈕進(jìn)行劃分，基本涵蓋了常見(jiàn)的按鈕類型：
在同一個(gè)頁(yè)面中往往會(huì)存在多個(gè)行動(dòng)點(diǎn)，因此需要將按鈕依據(jù)強(qiáng)調(diào)程度進(jìn)行劃分，確保用戶可以依據(jù)設(shè)計(jì)的按鈕層級(jí)快速找到最需要操作的按鈕。常見(jiàn)的按鈕強(qiáng)調(diào)程度可以分為3個(gè)層級(jí)：
高度強(qiáng)調(diào)：承載頁(yè)面上最重要和突出的行動(dòng)點(diǎn)。為了保證視覺(jué)層級(jí)最高，通常會(huì)采用大面積主色填充或投影增加空間層級(jí)的方式進(jìn)行區(qū)分，例如主按鈕和FAB按鈕（懸浮按鈕）
中度強(qiáng)調(diào)：承載僅次于最重要行動(dòng)點(diǎn)的常規(guī)操作。為了避免太過(guò)吸引用戶注意，通常采用中性色進(jìn)行描邊或填充，也被稱之為次按鈕。
輕度強(qiáng)調(diào)：對(duì)頁(yè)面中其他操作補(bǔ)充或可選操作。為了確保視覺(jué)上不凸顯，通常不會(huì)填充背景色，常見(jiàn)于文字按鈕和圖標(biāo)按鈕。在輕度強(qiáng)調(diào)中還可以劃分為弱強(qiáng)調(diào)（內(nèi)容填充主色）和不強(qiáng)調(diào)（內(nèi)容填充中性色），由于文字按鈕填充中性色難以和正常文本進(jìn)行區(qū)分，所以一般內(nèi)容填充中性色只會(huì)用在圖標(biāo)上。
由此我們得到了依據(jù)強(qiáng)調(diào)程度劃分的幾個(gè)常見(jiàn)按鈕類型：主按鈕 > 次按鈕 > 文字按鈕 > 圖標(biāo)按鈕。接下來(lái)針對(duì)每種類型我們來(lái)展開(kāi)說(shuō)明。（FAB按鈕在B端頁(yè)面中屬于特定場(chǎng)景下使用的按鈕，不具有通用性，故劃分到使用場(chǎng)景中進(jìn)行討論）
主按鈕代表著頁(yè)面中的核心操作項(xiàng)，是視覺(jué)權(quán)重最高的按鈕，常用于突出提交、完成、確定等操作。為吸引用戶注意，常使用品牌色填充背景引導(dǎo)用戶視覺(jué)焦點(diǎn)。關(guān)于主按鈕的使用需要遵循以下2個(gè)原則：
次按鈕是使用最頻繁的按鈕，當(dāng)在頁(yè)面中不確定選擇哪種按鈕時(shí)，使用它往往是最安全的。次按鈕通常使用中性色，其樣式可以分為描邊型和填充型：描邊型使用最為廣泛，是次按鈕首選的樣式，而填充型相對(duì)特殊，在不同設(shè)計(jì)系體下會(huì)根據(jù)業(yè)務(wù)場(chǎng)景選擇是否使用。
相較于描邊型，早年在B端產(chǎn)品中很少會(huì)見(jiàn)到使用填充型樣式作為次按鈕使用的，但是可以發(fā)現(xiàn)近幾年國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)如Arco Design、Marterial等，開(kāi)始陸續(xù)將填充型次按鈕納入到按鈕組件庫(kù)中。
填充型次按鈕更多的使用場(chǎng)景是在移動(dòng)端上，其視覺(jué)強(qiáng)調(diào)程度弱于主按鈕但又高于描邊型，可以更好的表達(dá)組件的整體性和吸引用戶注意。
伴隨著硬件設(shè)備的發(fā)展，桌面端和移動(dòng)端的操作邊界開(kāi)始逐漸模糊，各產(chǎn)品開(kāi)始追求全生態(tài)環(huán)境下的統(tǒng)一性。為降低用戶在設(shè)備切換時(shí)的體驗(yàn)隔閡，一套設(shè)計(jì)系統(tǒng)需要能同時(shí)滿足多端設(shè)備的兼容，而填充型樣式更符合其場(chǎng)景需求。最典型的便是iPadOS連接鼠標(biāo)操作時(shí)，懸停態(tài)下填充型按鈕明顯比描邊型更容易被識(shí)別。
基于以上考慮，在工作中選擇次按鈕樣式時(shí)可以參考以下建議：
如果當(dāng)前項(xiàng)目上已經(jīng)有在使用的開(kāi)源庫(kù)，盡量以原有組件庫(kù)為主。除非自身產(chǎn)品有設(shè)備互通的場(chǎng)景或需要同一套設(shè)計(jì)語(yǔ)言兼顧不同端，否則增加多余的次按鈕樣式只會(huì)更加復(fù)雜且影響用戶的體驗(yàn)一致性。
如果是項(xiàng)目是0～1搭建組件庫(kù)，根據(jù)自身業(yè)務(wù)場(chǎng)景選擇其中一種樣式使用即可。一般桌面端產(chǎn)品使用描邊型，如果產(chǎn)品生態(tài)中有移動(dòng)端，為了保持設(shè)計(jì)語(yǔ)言的統(tǒng)一更建議采用填充型。
此外還需考慮前端修改組件庫(kù)樣式時(shí)的開(kāi)發(fā)成本。
文字按鈕適合承載如取消、還原等無(wú)需特意強(qiáng)調(diào)的操作，通常使用在表格操作欄、表單頁(yè)等場(chǎng)景。為了和普通文本做區(qū)分，提示當(dāng)前內(nèi)容可交互，需要加上鏈接色（一般是藍(lán)色）提醒用戶。
文字按鈕和鏈接（Link）的默認(rèn)樣式一致，在搭建組件庫(kù)時(shí)很容易發(fā)生混淆。其區(qū)別在于按鈕用于發(fā)起動(dòng)作，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯，而鏈接的作用是導(dǎo)航，作為頁(yè)面跳轉(zhuǎn)或錨點(diǎn)定位的觸點(diǎn)。為了更好的區(qū)分，可以在交互樣式上進(jìn)行處理：
文字按鈕：指針懸停時(shí)容器添加背景色。
鏈接：指針懸停時(shí)文本添加下劃線。
圖標(biāo)按鈕的視覺(jué)層級(jí)最弱，但是由于占據(jù)空間小，常用于同時(shí)展示多個(gè)操作項(xiàng)時(shí)使用。由于缺少文字解釋，單純的圖標(biāo)可能會(huì)造成用戶的理解偏差，故建議在指針懸停時(shí)加上Tooltip的文字提示進(jìn)行輔助說(shuō)明，對(duì)于特定操作還可加上快捷鍵指引。
在依據(jù)強(qiáng)調(diào)程度劃分的基礎(chǔ)上，還有部分按鈕只應(yīng)用于在特定的業(yè)務(wù)場(chǎng)景中，所以各設(shè)計(jì)系統(tǒng)下的按鈕分類會(huì)有所不同。以下按鈕的應(yīng)用場(chǎng)景較為頻繁，故被單獨(dú)劃分為一類方便交流和管理。
功能按鈕順應(yīng)用戶心智，采用綠色、橙黃色、紅色代表了成功、警告、危險(xiǎn)三種功能按鈕，用戶無(wú)需瀏覽按鈕內(nèi)容，直接通過(guò)色彩即可識(shí)別當(dāng)前操作可能導(dǎo)致的后果。
由于功能按鈕的視覺(jué)權(quán)重往往比主按鈕還高，在頁(yè)面中需謹(jǐn)慎使用，避免對(duì)其他頁(yè)面信息造成干擾。
相較于普通的描邊型按鈕，虛線按鈕只承載傳輸文件或新增配置項(xiàng)等操作，為方便用戶感知，將其描邊設(shè)計(jì)為虛線樣式。
由于虛線按鈕只能支持單純的觸發(fā)操作，在很多上傳情景下不能滿足其業(yè)務(wù)需求，故逐漸衍生出單獨(dú)的上傳組件，相較于虛線按鈕：
上傳組件支持批量上傳
通常有更大的交互區(qū)域且允許支持拖拽上傳，以降低用戶的操作門檻
搭配展示文件列表，用于對(duì)已上傳文件進(jìn)行預(yù)覽、重新上傳、刪除等操作
顧名思義，幽靈按鈕不具備實(shí)體性，一般底色為透明，其按鈕的內(nèi)容反色，通常使用在復(fù)雜或顏色較深的背景中，例如 banner 圖、官網(wǎng)首圖等，避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場(chǎng)景不固定，因此無(wú)須嚴(yán)格遵循現(xiàn)有規(guī)范，只要滿足其特定場(chǎng)景下的業(yè)務(wù)需求即可。
CTA，即“Call to Action”的縮寫(xiě)，意思是行為召喚。該詞原本是營(yíng)銷領(lǐng)域的術(shù)語(yǔ)，后來(lái)逐漸引用至互聯(lián)網(wǎng)領(lǐng)域中，即目的在于給用戶一個(gè)明確的反饋：當(dāng)前事件的操作流程已經(jīng)完成或即將發(fā)起一個(gè)新的流程。
CTA按鈕之所以會(huì)被單獨(dú)歸類，因?yàn)楫?dāng)按鈕作為吸引用戶采取點(diǎn)擊行為的載體時(shí)，時(shí)常在事件操作的最后一步出現(xiàn)，作為產(chǎn)品的關(guān)鍵觸點(diǎn)之一，可以有效提高頁(yè)面或屏幕的轉(zhuǎn)化。也因此當(dāng)頁(yè)面中存在多個(gè)按鈕時(shí)，CTA按鈕的優(yōu)先級(jí)往往是最高的，可以通過(guò)色彩對(duì)比、元素點(diǎn)綴等方式引導(dǎo)用戶點(diǎn)擊。
懸浮按鈕FAB，即Floating Action Buttons的縮寫(xiě)，其特點(diǎn)是會(huì)始終懸浮在頁(yè)面的固定位置，不會(huì)隨著頁(yè)面滾動(dòng)而消失。
在B端產(chǎn)品中，F(xiàn)AB按鈕更多的使用場(chǎng)景是承載全局性的附屬功能，常見(jiàn)操作包括咨詢、客服、快捷鍵、點(diǎn)贊、收藏、分享、回到頂部等。在設(shè)計(jì)FAB按鈕時(shí)需注意以下要點(diǎn)：
不能干擾用戶在當(dāng)前頁(yè)的正常操作和瀏覽。盡量放置在頁(yè)面的固定位置，當(dāng)操作數(shù)過(guò)多時(shí)可將其他操作下鉆至更多按鈕中。
承載操作須是當(dāng)前頁(yè)的全局操作，無(wú)須與其他頁(yè)面元素發(fā)生聯(lián)動(dòng)即可觸發(fā)。如不能承載保存、刪除、清空等操作。
按鈕組不是單獨(dú)的按鈕類目，而是按鈕組的集合體，當(dāng)多個(gè)同級(jí)操作項(xiàng)同時(shí)出現(xiàn)，但不想占有太多頁(yè)面空間時(shí)使用。通常按鈕組會(huì)將最關(guān)鍵的主操作露出，其他操作收入更多操作項(xiàng)中。
嚴(yán)格來(lái)說(shuō) 下拉菜單Dropdown 并不屬于按鈕類型，但因?yàn)槠涫褂脠?chǎng)景較為頻繁且時(shí)常用來(lái)承載多個(gè)按鈕操作，故在此處作為單獨(dú)類型進(jìn)行講解。下拉菜單作為操作命令集合使用時(shí)，可以簡(jiǎn)單理解成按鈕組：將多個(gè)操作按鈕收納到同一菜單下。在使用時(shí)有兩點(diǎn)需要額外注意：
選擇器Select 屬于錄入控件，在基本形態(tài)上和 下拉菜單Dropdown 高度相似，都是通過(guò)下拉浮層來(lái)容納更多信息，在實(shí)際應(yīng)用時(shí)經(jīng)常容易被混淆。要區(qū)分兩種組件，最關(guān)鍵是理解其使用場(chǎng)景：
下拉菜單：當(dāng)頁(yè)面上的操作命令過(guò)多時(shí)，用此組件可以收納操作元素。核心是菜單導(dǎo)航和命令集合
選擇器：用于一組選項(xiàng)中選擇一個(gè)或多個(gè)數(shù)值。核心表單填寫(xiě)和數(shù)據(jù)篩選
當(dāng)下拉菜單用來(lái)承載操作項(xiàng)時(shí)，各操作項(xiàng)關(guān)聯(lián)性也會(huì)引起下拉菜單樣式上的區(qū)別，這里用實(shí)際的案例輔助大家理解：
乍一看似乎都是差不多的樣式，在工作中很多設(shè)計(jì)師也是隨機(jī)選擇其中一種進(jìn)行使用，但是作為設(shè)計(jì)師，就是應(yīng)該從細(xì)節(jié)之處見(jiàn)真章，每一處設(shè)計(jì)都應(yīng)有理有據(jù)。
簡(jiǎn)單來(lái)說(shuō)，以上三種組合按鈕中的操作關(guān)聯(lián)性是逐漸疏遠(yuǎn)的，這一點(diǎn)從按鈕樣式上也可以看出。
新建一：合并同類項(xiàng)。突出新建操作本身，更多操作項(xiàng)是新增的數(shù)據(jù)類型進(jìn)行區(qū)分，減少重復(fù)文案的出現(xiàn)。
新建二：操作延展。強(qiáng)調(diào)的是數(shù)據(jù)導(dǎo)入的形式，提供更多操作渠道供用戶選擇。
新建三：信息收納。各操作項(xiàng)之間并沒(méi)有關(guān)聯(lián)性，只是緩解空間壓力或突出使用最頻繁的操作。
在了解了以上按鈕類型，我們來(lái)看看按鈕的交互狀態(tài)。不管哪種按鈕類型都會(huì)存在相應(yīng)的交互狀態(tài)，設(shè)計(jì)師在交付設(shè)計(jì)稿時(shí)需要將不同狀態(tài)下的按鈕樣式進(jìn)行標(biāo)注，方便前端開(kāi)發(fā)。
在剛開(kāi)始接觸按鈕時(shí)也曾被一堆狀態(tài)給亂花了眼，光是理解不同狀態(tài)的區(qū)別已經(jīng)頭大。其實(shí)回頭來(lái)看，開(kāi)始只要記住4種最關(guān)鍵的按鈕狀態(tài)便可滿足大部分的使用場(chǎng)景，即按鈕的正常態(tài)、懸停態(tài)、點(diǎn)擊態(tài)和禁用態(tài)。
在日常工作中，沒(méi)有設(shè)置聚焦態(tài)和加載態(tài)并不會(huì)影響用戶的正常使用，但是加上后可提升用戶的產(chǎn)品使用體驗(yàn)，大家可以根據(jù)開(kāi)發(fā)成本和實(shí)際的業(yè)務(wù)情況考慮是否加上。
按鈕的初始狀態(tài)，即默認(rèn)情況下的基礎(chǔ)樣式，此處不多做介紹。
當(dāng)鼠標(biāo)指針移入按鈕時(shí)的狀態(tài)。為了暗示用戶鼠標(biāo)指針已進(jìn)入按鈕的可交互區(qū)域，按鈕相較于正常狀態(tài)在背景色彩等樣式上會(huì)有明顯的區(qū)別。懸停態(tài)通常還會(huì)配合鼠標(biāo)指針變化輔助用戶理解，在前端CSS樣式表中常用 cursor:pointer ，指針變化為伸出食指的手。
由于懸停態(tài)是由鼠標(biāo)指針移動(dòng)引起，故只有設(shè)計(jì)桌面端產(chǎn)品時(shí)需要考慮到，而在移動(dòng)設(shè)備上通過(guò)手指操作故按鈕不存在懸停的狀態(tài)。（在iPadOS更新至13.4版本后開(kāi)始支持連接鍵鼠操作，但是在日常工作中很少會(huì)出現(xiàn)，此處不予以討論）
鼠標(biāo)點(diǎn)擊即按下按鈕時(shí)的狀態(tài)。激活態(tài)是在懸停態(tài)基礎(chǔ)上發(fā)生變化，鼠標(biāo)指針樣式和懸停態(tài)保持一致，按鈕背景色發(fā)生變化，提示用戶已觸發(fā)點(diǎn)擊操作。
按鈕無(wú)法操作被鎖定時(shí)的狀態(tài)。該狀態(tài)是為避免用戶誤操作而設(shè)立，如在登錄頁(yè)未完成信息填寫(xiě)時(shí)將提交按鈕禁用，提示用戶無(wú)法點(diǎn)擊，只有填寫(xiě)完必填字段后才可以點(diǎn)擊提交。在鼠標(biāo)懸停時(shí)指針變化為禁用狀態(tài)，在前端CSS樣式表中常用 cursor: not-allowed，通常會(huì)配合tooltip文字解釋說(shuō)明行動(dòng)點(diǎn)不可用的原因，避免用戶疑惑。
值得一提的是，禁用按鈕并非只有置灰一種樣式，只降低色彩飽和度和明度也是禁用按鈕的表現(xiàn)手法之一，且相較于置灰更方便用戶識(shí)別主次按鈕。
以上是針對(duì)不同按鈕狀態(tài)的說(shuō)明，這里并沒(méi)有針對(duì)不同狀態(tài)的樣式進(jìn)行詳細(xì)說(shuō)明，因?yàn)椴煌脑O(shè)計(jì)體系下可能會(huì)采用不同狀態(tài)樣式進(jìn)行展示。為方便對(duì)比，這里將常見(jiàn)組件庫(kù)中的按鈕狀態(tài)進(jìn)行了整理：
可以發(fā)現(xiàn)，除了TDesign中描邊按鈕激活態(tài)下增加了中性色填充外，基本按鈕狀態(tài)都是保持著一致的梯度變化。這里以正常態(tài)的按鈕樣式為基準(zhǔn)，將懸停和激活狀態(tài)下的色彩變化進(jìn)行整理：
總結(jié)來(lái)看，在不同色彩的按鈕上按鈕狀態(tài)會(huì)按照不同梯度分布：
主色（品牌色）按鈕色彩梯度從淺到深：激活 〉正常 〉懸停
中性色按鈕色彩梯度從淺到深：激活 〉懸停 〉正常
之所以出現(xiàn)這種情況，主要是因?yàn)樵诖罱óa(chǎn)品色彩體系時(shí)，品牌色一般會(huì)采用色板中間色作為主色（通常是第六個(gè)顏色），故不管往淺往深都有更多靈活調(diào)整的空間。而背景使用的中性色為了避免干擾視覺(jué)層級(jí)，通常選擇色彩較淺的中性色，因此沒(méi)有再往下延伸色彩梯度的空間。
以上介紹的四種狀態(tài)建議采用色彩組件庫(kù)中色卡進(jìn)行配色，上圖標(biāo)注了不同按鈕狀態(tài)的配色選擇，下面是AntD和ArcoD的色板生成工具（關(guān)于產(chǎn)品取色未來(lái)會(huì)專門出一期文章進(jìn)行講解）。
ArcoDesign Palette 色彩工具
Ant Design 色板生成工具
該狀態(tài)用于指示電腦光標(biāo)的位置。在有些場(chǎng)景下不操控鼠標(biāo)，只通過(guò)鍵盤方向或Tab切換選擇頁(yè)面元素進(jìn)行操作，反而是更高效的操作方式。常見(jiàn)的聚焦態(tài)按鈕樣式為增加描邊，有的設(shè)計(jì)系統(tǒng)下會(huì)采用和懸停態(tài)一樣的樣式。鍵盤操控快捷鍵推薦：
【Tab】前進(jìn)
【Shift + Tab】后移
【Enter】激活
表明用戶操作后系統(tǒng)正在處理的狀態(tài)。由于服務(wù)器響應(yīng)或網(wǎng)絡(luò)延遲等問(wèn)題，有時(shí)候用戶操作完需要間隔一段時(shí)間才能響應(yīng)，加載態(tài)可緩解用戶的焦慮情緒，避免用戶由于未收到反饋而反復(fù)操作的情況。
源自 Arco Design-組件按鈕
接下來(lái)便到了本文的最關(guān)鍵部分，也是按鈕設(shè)計(jì)中出現(xiàn)最頻繁和令人頭痛的問(wèn)題：我的按鈕究竟應(yīng)該放在哪里？
在此之前先要理解按鈕設(shè)計(jì)的目標(biāo)是引導(dǎo)用戶采取我們希望用戶采取的行動(dòng)。這就需要盡量幫助用戶快速找到需要操作的按鈕并了解執(zhí)行該操作的結(jié)果，同時(shí)盡可能避免誤操作?；谝陨夏繕?biāo)，我們從用戶實(shí)際操作路徑的視角來(lái)梳理按鈕設(shè)計(jì)時(shí)應(yīng)考慮的問(wèn)題：
按鈕區(qū)在頁(yè)面中的什么位置——空間位置
有多個(gè)按鈕時(shí)采用怎樣的閱讀順序更合適——排列順序
按鈕采用怎樣的樣式更合適——視覺(jué)樣式
當(dāng)用戶進(jìn)入頁(yè)面時(shí)，除了瀏覽當(dāng)前頁(yè)的信息內(nèi)容還需要尋找接下來(lái)可執(zhí)行操作的可交互區(qū)域，即按鈕區(qū)。除了單純通過(guò)視覺(jué)差異區(qū)分按鈕和頁(yè)面其他元素外，還需考慮到用戶在信息瀏覽過(guò)程中的視覺(jué)動(dòng)線。結(jié)合古騰堡法則和格式塔原理，給出以下設(shè)計(jì)建議：
在沒(méi)有其他視覺(jué)效果引導(dǎo)時(shí)，F(xiàn)型和Z型網(wǎng)頁(yè)瀏覽模式可以作為用戶視覺(jué)動(dòng)線的基礎(chǔ)指導(dǎo)，關(guān)于以上2種瀏覽模式網(wǎng)上有太多相關(guān)介紹，此處就不再贅述。
將關(guān)聯(lián)性強(qiáng)的信息放在一起，可以降低閱讀成本，提高用戶的感知效率。
這里先討論一下開(kāi)頭提到的問(wèn)題：主操作項(xiàng)放在左邊合適還是右邊合適？我們先來(lái)看看一些案例：
可以發(fā)現(xiàn)，即使是業(yè)內(nèi)頂尖的互聯(lián)網(wǎng)公司也并沒(méi)有遵從同一套確定方案。我們?cè)倏纯催@位在英國(guó)學(xué)人機(jī)交互的研究生所做的課題實(shí)驗(yàn)：https://www.woshipm.com/pd/3104897.html。具體的實(shí)驗(yàn)過(guò)程不再詳細(xì)贅述，直接來(lái)看結(jié)果：對(duì)于新用戶而言，確定按鈕的位置對(duì)操作時(shí)間和錯(cuò)誤率影響并沒(méi)有太大差別。并由此得出更關(guān)鍵的結(jié)論：不要輕易改變當(dāng)前產(chǎn)品中用戶已經(jīng)習(xí)慣的按鈕位置。
在此基礎(chǔ)上對(duì)于操作項(xiàng)不固定的頁(yè)面，給大家整理了以下建議：
最典型的案例便是編輯器類產(chǎn)品的操作項(xiàng)，將同類操作區(qū)整理分組，方便用戶查找。
此處的閱讀順序并非特指從左往右、從上往下，而是依據(jù)用戶當(dāng)前視覺(jué)動(dòng)線，優(yōu)先滿足用戶預(yù)期或操作可能性最大的按鈕需要最先被用戶發(fā)現(xiàn)。
考慮到人體工程學(xué)操作習(xí)慣和操作后果的影響，還需注意一些特定的場(chǎng)景：
流程屬性的按鈕如上一步、返回、后退等操作用戶習(xí)慣在左邊，而下一步、前進(jìn)、更多等操作在右邊。
如刪除或清空按鈕，盡可能放置在遠(yuǎn)離主按鈕的位置，甚至可以下鉆至更多按鈕中，避免誤觸。
在文章開(kāi)始基于強(qiáng)調(diào)程度劃分按鈕類型時(shí)，按鈕的視覺(jué)樣式便是基于其強(qiáng)調(diào)程度劃分的，頁(yè)面中越是需要強(qiáng)調(diào)的按鈕其視覺(jué)權(quán)重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標(biāo)按鈕這4種基本類型，此外還可以通過(guò)文本粗細(xì)、內(nèi)容量等方式進(jìn)一步細(xì)分。
按鈕的尺寸優(yōu)先體現(xiàn)在其高度上，而寬度一般根據(jù)內(nèi)容區(qū)大小自動(dòng)適配。通常會(huì)將按鈕分為大、中、小三個(gè)規(guī)格，以滿足不同場(chǎng)景下的使用需求。
關(guān)于按鈕寬度需要注意的是，由于按鈕內(nèi)容的不固定，同規(guī)格按鈕可能因?yàn)閮?nèi)容量差異引起視覺(jué)上的層級(jí)誤判。故為了減少按鈕錯(cuò)綜不齊的情況，建議設(shè)置按鈕最小寬度的界限，一般為4個(gè)文字+左右內(nèi)邊距。
相較于其他方面，似乎大家對(duì)產(chǎn)品文案總是保持著“點(diǎn)到為止”的態(tài)度，但是并不意味著文案不重要，錯(cuò)誤的文案會(huì)讓用戶產(chǎn)生疑惑，嚴(yán)重影響用戶體驗(yàn)。相反好的按鈕文字甚至可以做到即使不去閱讀上下文，單憑按鈕文案即可做出正確的判斷。在一些關(guān)鍵節(jié)點(diǎn)的CTA按鈕，文案的優(yōu)化可以帶來(lái)轉(zhuǎn)化率大幅度的提升。因此關(guān)注文案細(xì)節(jié)也是設(shè)計(jì)師平時(shí)需要考慮的問(wèn)題。優(yōu)秀的按鈕文案包含以下幾個(gè)要點(diǎn)：
按鈕區(qū)域寸土寸金，每一個(gè)字都要有其存在的意義，如果刪除也不影響信息表達(dá)即沒(méi)必要存在。
文字表達(dá)清晰，避免使用用戶難以理解的專業(yè)術(shù)語(yǔ)。
常見(jiàn)的“登陸&登錄”、“收獲&收貨”、“即時(shí)和及時(shí)”都是容易打錯(cuò)的詞。
以下給大家整理了常見(jiàn)易錯(cuò)的按鈕文案表，建議保存收藏。
如統(tǒng)一采用動(dòng)賓結(jié)構(gòu)：修改價(jià)格、提交工單、查看更多等。
結(jié)合自身品牌特性，在按鈕中融入適當(dāng)?shù)那楦谢陌福彩撬茉炱放菩闹堑挠|點(diǎn)之一。
當(dāng)前市面上主流的互聯(lián)網(wǎng)產(chǎn)品大多都采用了圓角設(shè)計(jì)，因?yàn)?strong>圓角矩形相較于直角更具安全感和親和力、在相似內(nèi)容中識(shí)別度更高，且圓角對(duì)信息的聚焦性更強(qiáng)。同樣B端設(shè)計(jì)中通常也會(huì)在按鈕中加入圓角，方便用戶更高效的辨別和獲取信息，但是需要注意的是圓角并非越大越好，過(guò)大的圓角會(huì)導(dǎo)致按鈕操作熱區(qū)的縮窄，更不易被點(diǎn)擊觸發(fā)。如在移動(dòng)端產(chǎn)品上都是采用手指按壓，而桌面端采用鼠標(biāo)指針單擊，相較之下后者對(duì)點(diǎn)擊按鈕的觸發(fā)精度要求更高，也因此全圓角按鈕（也被稱為膠囊按鈕）更適合在移動(dòng)端產(chǎn)品上使用。
此外按鈕的圓角設(shè)置還需考慮到產(chǎn)品整體的視覺(jué)一致性，在不同場(chǎng)景下都要保證統(tǒng)一的感官體驗(yàn)，如在大尺寸的按鈕上圓角的曲率也應(yīng)設(shè)置更大。
作者：蝦米的設(shè)計(jì)筆記 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言：
1886年，由卡爾·本茨發(fā)明的第一輛汽車距今已經(jīng)有130多年了，汽車座艙的發(fā)展已經(jīng)來(lái)到了一個(gè)新的階段，現(xiàn)階段我們稱其為智能座艙。它不僅有著先進(jìn)的數(shù)字化儀表中控大屏，還有流媒體后視鏡、抬頭顯示、智能空調(diào)、智能氛圍燈等功能，看得見(jiàn)的看不見(jiàn)的地方無(wú)不凸顯著科技進(jìn)步帶來(lái)的變化。
作為HMI設(shè)計(jì)師，在這個(gè)領(lǐng)域也工作了許久，對(duì)于智能座艙、HMI的設(shè)計(jì)有了些見(jiàn)解和思考，本文試圖通過(guò)總結(jié)實(shí)車座艙、工作經(jīng)驗(yàn)、設(shè)計(jì)來(lái)展望未來(lái)的HMI設(shè)計(jì)趨勢(shì)，以及嘗試分析作為HMI設(shè)計(jì)師我們應(yīng)該如何在設(shè)計(jì)這一領(lǐng)域去趕上智能汽車發(fā)展的風(fēng)口。希望這些想法能讓剛?cè)胄谢蛘呦肴胄械脑O(shè)計(jì)師同學(xué)們對(duì)于HMI設(shè)計(jì)有一個(gè)幫助。
一、時(shí)代變革下的智能座艙——“第三空間”
二、科技發(fā)展帶來(lái)的設(shè)計(jì)需求改變
三、用戶體驗(yàn)帶來(lái)更高的設(shè)計(jì)要求
四、情感需求引領(lǐng)新的設(shè)計(jì)方向
五、總結(jié)
隨著自動(dòng)駕駛等技術(shù)的進(jìn)步，智能座艙最后將圍繞座艙電子、座艙內(nèi)飾全面升級(jí)到移動(dòng)的“第三空間”，將信息、娛樂(lè)、互聯(lián)等功能進(jìn)行全面融合，為消費(fèi)者提供更便捷的體驗(yàn)。汽車將不再是代步工具，用戶在車內(nèi)即可實(shí)現(xiàn)娛樂(lè)和辦公，汽車有望進(jìn)化成為家庭、辦公場(chǎng)所之外的“第三空間”。
盡管也有人認(rèn)為汽車只是個(gè)代步工具，但更智能化更數(shù)字化的智能座艙就是大勢(shì)所趨，各家車企八仙過(guò)海各顯神通，不停進(jìn)行車輛的智能化升級(jí)，提升智能座艙的體驗(yàn)，軟件定義汽車，這是行業(yè)的共識(shí)，許多互聯(lián)網(wǎng)公司也加入了這場(chǎng)戰(zhàn)爭(zhēng)。
在這樣的背景下，作為設(shè)計(jì)師的角度，看著智能座艙的智能化在不斷提升，我們對(duì)于HMI設(shè)計(jì)有了些思考。我們認(rèn)為會(huì)有這幾個(gè)方面帶來(lái)HMI設(shè)計(jì)需求或要求的的變化：
硬件技術(shù)的革新帶來(lái)體驗(yàn)形式的改變，而完善的設(shè)計(jì)升華用戶對(duì)于新科技的體驗(yàn)。在“未來(lái)”還沒(méi)有到來(lái)的時(shí)候，發(fā)揮設(shè)計(jì)的主觀能動(dòng)性能，能讓現(xiàn)在成為更好的現(xiàn)在。好的視覺(jué)體驗(yàn)不應(yīng)只是數(shù)字化的體驗(yàn)，硬件能夠給予視覺(jué)更加完整，更加豐富的體驗(yàn)感受。智能座艙科技能力不斷提高對(duì)設(shè)計(jì)有了不一樣的需求。作為設(shè)計(jì)師，關(guān)注科技和車機(jī)硬件技術(shù)的進(jìn)步能夠拓寬我們的視野，延展設(shè)計(jì)的畫(huà)卷。
傳統(tǒng)的HMI由中控系統(tǒng)，屏幕，?向盤控制等模塊組成，受限于應(yīng)?場(chǎng)景?多只滿?于?駛功能，強(qiáng)調(diào)的只有?和?的關(guān)系，但隨著??駕駛解放了?的雙?，?和?的關(guān)系將被重新思考定義。
1、通過(guò)設(shè)計(jì)提升自動(dòng)駕駛的體驗(yàn)，增強(qiáng)用戶的使用信心：
自動(dòng)駕駛模式下，通過(guò)攝像頭特、毫?波雷達(dá)、超聲波雷達(dá)等掃描記錄下當(dāng)前?輛所處的環(huán)境信息，將路況信息和道路周圍環(huán)境車輛等信息進(jìn)行可視化呈現(xiàn)在屏幕上。在這個(gè)過(guò)程中，除了硬件的可靠性能否掃描出周圍環(huán)境車輛物體之外，可視化的視覺(jué)設(shè)計(jì)也會(huì)影響到用戶的信心。
交互層面，需要有更多自動(dòng)駕駛可視化圖像的交互思考和創(chuàng)新，例如當(dāng)開(kāi)啟自動(dòng)駕駛的車輛在一個(gè)復(fù)雜的十字路口等待紅綠燈是，周圍復(fù)雜的情況會(huì)讓用戶恐慌，特斯拉的fsd就會(huì)在停下等紅綠燈時(shí)，抬高視角，這種方式可以通過(guò)屏幕的可視化信息觀察到更多路況車輛信息，從而讓用戶對(duì)機(jī)器產(chǎn)生信任感。
視覺(jué)層面上，一般來(lái)說(shuō)識(shí)別度比較重要，能更直觀的展示模型可視化信息就好，但是可視化信息的表現(xiàn)形式可以作為視覺(jué)設(shè)計(jì)的重點(diǎn)，可以是線性模型，也可以是白模等等，要去契合車機(jī)的主題、顏色、概念，又要達(dá)到可視化的要求。
2、不同的主題模式以及新的視覺(jué)風(fēng)格：
作為決策者的汽車用戶當(dāng)然需要更多的主題顏色或主題風(fēng)格選擇，他們不再簡(jiǎn)單要求能用就行，不僅僅是更好用的交互，對(duì)視覺(jué)設(shè)計(jì)當(dāng)然也有了新的要求。
一般來(lái)說(shuō)，現(xiàn)在的車機(jī)系統(tǒng)最少都要有一套黑白模式，分別匹配白天黑夜的的駕駛場(chǎng)景；有的更是需要在越野、城市、長(zhǎng)途情況下有不同的視覺(jué)主題界面；或者是運(yùn)動(dòng)和沉浸駕駛有不同的界面風(fēng)格，這些根據(jù)需求都是需要去考慮的，如何匹配視覺(jué)設(shè)計(jì)。最常見(jiàn)的黑白模式來(lái)說(shuō)，在設(shè)計(jì)其中一套的過(guò)程中，就要去考慮如何適配成另一套，比如白色模式下的卡片投影，在黑色模式下如何顯示，如果不顯示投影如何去區(qū)分卡片。
設(shè)計(jì)的視覺(jué)風(fēng)格的趨勢(shì)不是一成不變的，我們認(rèn)為他的發(fā)展是螺旋式上升的，手機(jī)的UI最開(kāi)始的擬物風(fēng)格滿滿的向著扁平化發(fā)展，但扁平化后大家又開(kāi)始追求擬物，后面就誕生了輕擬物風(fēng)格和2.5d等風(fēng)格，現(xiàn)在又流行簡(jiǎn)約3d風(fēng)格。以前由于車載芯片性能等問(wèn)題，隨著車載芯片、屏幕性能的不斷發(fā)展，未來(lái)的HMI設(shè)計(jì)風(fēng)格絕對(duì)不會(huì)一塵不變，他同樣也會(huì)追求不同的設(shè)計(jì)風(fēng)格，輕擬物、簡(jiǎn)約3d圖標(biāo)甚至3d界面的交互都會(huì)不斷產(chǎn)生甚至已經(jīng)產(chǎn)生，也要求設(shè)計(jì)師去了解和掌握更多的設(shè)計(jì)風(fēng)格。
電動(dòng)汽車行業(yè)飛速發(fā)展,智能AI和人際互聯(lián)等人車交互概念也跟著興起,對(duì)于中控臺(tái)的需求和功能復(fù)雜度也跟著越發(fā)精細(xì)起來(lái)，全液晶顯示和HUD已經(jīng)成了基本操作，炫酷、科技感爆棚的HMI設(shè)計(jì)成為標(biāo)配。
1、越來(lái)的大的車載屏幕：
燃油車時(shí)代評(píng)價(jià)一輛車不可避免的會(huì)討論汽車三大件：發(fā)動(dòng)機(jī)、底盤和變速箱。但是智能座艙時(shí)代，不少人戲稱新的三大件是：彩電、冰箱和沙發(fā)。雖然是戲稱，但是我們也可以看出來(lái)大屏幕車機(jī)等提升座艙體驗(yàn)的設(shè)備越來(lái)越成為用戶購(gòu)買汽車的一個(gè)指標(biāo)。當(dāng)然也有人不這么認(rèn)為，但是市場(chǎng)是很誠(chéng)實(shí)的，大屏幕的車機(jī)就是更受歡迎，筆者曾問(wèn)過(guò)一個(gè)剛畢業(yè)幾年準(zhǔn)備買自己人生中第一輛車的朋友，你買車會(huì)在意車的中控屏大小嗎？他的回答是：當(dāng)然會(huì)，大就是好。
可以看出，作為HMI設(shè)計(jì)師，面對(duì)的情況就是越來(lái)越大的屏幕尺寸和分辨率以及越來(lái)越多屏幕數(shù)量。這也給了設(shè)計(jì)師更多的發(fā)揮空間。交互上可以有更多的交互形式，同時(shí)也有了更高的視覺(jué)要求，需要有場(chǎng)景、有主題、有氛圍等等等。作為座艙內(nèi)最顯眼的屏幕，也不簡(jiǎn)單是呈現(xiàn)功能那么簡(jiǎn)單，它也成為汽車內(nèi)飾的一部分，除了車內(nèi)的氛圍燈，屏幕內(nèi)也需要呈現(xiàn)更多的設(shè)計(jì)美感。
2、虛擬現(xiàn)實(shí)技術(shù)的發(fā)展：
雖然前文提到了駕駛員不再是單單駕駛者，但是首先駕駛這一需求是不會(huì)消失的，其次且隨著自動(dòng)駕駛的發(fā)展，用戶也希望能通過(guò)虛擬現(xiàn)實(shí)技術(shù)看到更多的信息來(lái)幫助自己完成抉擇決策。未來(lái)虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)將在安全駕駛方面扮演著更為重要的角色。虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)對(duì)于用戶而言，具有很大的直觀性，通過(guò)結(jié)合現(xiàn)實(shí)路況信息，實(shí)時(shí)出現(xiàn)一些虛擬箭頭來(lái)直觀地引導(dǎo)我們前進(jìn)，從而避免在駕駛中出現(xiàn)開(kāi)過(guò)路口和分散駕駛員注意力的情況。
其實(shí)目前大面積應(yīng)用的hud也算是虛擬現(xiàn)實(shí)技術(shù)的一種，AR-hud早已經(jīng)成為了現(xiàn)在智能汽車的標(biāo)配，未來(lái)幾年，我認(rèn)為會(huì)有越來(lái)越的的用戶擺脫低頭看儀表的習(xí)慣，hud可以幫助駕駛者更便捷更安全的獲取駕駛、車輛、車道等信息。
我們都知道hud這一技術(shù)最早是作用于軍用戰(zhàn)斗機(jī)的，隨著技術(shù)的進(jìn)步虛擬現(xiàn)實(shí)技術(shù)會(huì)不斷下放到民用汽車上，所以作為設(shè)計(jì)師對(duì)這方面的技術(shù)也需要有更多的了解，如何運(yùn)用在汽車上，設(shè)計(jì)出更加符合汽車操作和行駛邏輯的虛擬現(xiàn)實(shí)技術(shù)的視覺(jué)信息。
另一個(gè)方面就是虛擬成像，科幻電影中的虛擬成像來(lái)進(jìn)行互動(dòng)和對(duì)話或許也會(huì)成為未來(lái)的HMI設(shè)計(jì)趨勢(shì)，但這可能要很久以后才能實(shí)現(xiàn)了，或許同元宇宙一樣久-_- !!!
以用戶更能理解、更能接受的方式展現(xiàn)全新的智能化座艙，提升操作的舒適性和高效：用更簡(jiǎn)單的方式傳達(dá)更直觀的信息。這是我們?cè)谟脩趔w驗(yàn)基礎(chǔ)上做設(shè)計(jì)需要做到的。
用戶對(duì)于智能座艙的操作不熟悉，產(chǎn)生不信任感，我們需要以設(shè)計(jì)為連接點(diǎn)，和用戶溝通?？萍紳M足人的基本需求，藝術(shù)升華體驗(yàn)。在科技飛速進(jìn)步的當(dāng)下，科技研發(fā)固然關(guān)鍵，以眼睛為窗戶讓用戶體驗(yàn)到科技的進(jìn)步同樣不可缺少，幫助用戶用視覺(jué)感受未來(lái)、提高體驗(yàn)是作為設(shè)計(jì)價(jià)值的最高追求。
·沉浸式的體驗(yàn)感
當(dāng)車輛從工具變?yōu)橐粋€(gè)能夠讓人沉浸和享受的空間，在原有的交通屬性之外增強(qiáng)智能座艙的空間的娛樂(lè)屬性。當(dāng)在車內(nèi)等待或者不想下車在車內(nèi)躺一會(huì)，小憩、k歌、電影等可能都是會(huì)干的事，露營(yíng)、閑聊等也可以是智能汽車提供的環(huán)境。所以我們需要將有限的畫(huà)面變成無(wú)限的遐想空間。
1、契合功能的氛圍設(shè)計(jì)：
不要好奇為什么有人為什么會(huì)在車上睡覺(jué)，會(huì)在車上看電影，但是這個(gè)需求是一定存在的，作為“第三空間”，這是智能座艙應(yīng)該要?jiǎng)偃蔚哪芰Α?
設(shè)計(jì)師需要做的就是打造契合這些場(chǎng)景下的氛圍感，通過(guò)氛圍燈音效可以打造出一個(gè)適合觀影、聊天的氛圍，前文提到屏幕也是車輛內(nèi)飾的一部分，也需要通過(guò)視覺(jué)畫(huà)面、動(dòng)效去一起營(yíng)造這個(gè)可以沉浸的氛圍。
2、視覺(jué)設(shè)計(jì)的畫(huà)面感：
當(dāng)科技滿足了基本需求后，我們需要更出色視覺(jué)設(shè)計(jì)來(lái)升華用戶的視覺(jué)體驗(yàn)。屏幕作為一幅畫(huà)框呈現(xiàn)我們想要的畫(huà)面，我們認(rèn)為HMI的界面設(shè)計(jì)會(huì)更多的趨向于整體的畫(huà)面感以及場(chǎng)景化，通過(guò)打造一個(gè)屏幕內(nèi)的場(chǎng)景空間，在服務(wù)和交互體驗(yàn)上突破創(chuàng)新，給用戶體驗(yàn)智能座艙的沉浸式體驗(yàn)空間。
目前已經(jīng)有不少汽車的都已經(jīng)用場(chǎng)景化的UI來(lái)上到自己的中控儀表上。場(chǎng)景主題的HMI已經(jīng)不只是單單的概念無(wú)法落地，虛幻引擎技術(shù)的加入也能讓更多的三維場(chǎng)景能夠落地到實(shí)車上。
·信息內(nèi)容需化繁為簡(jiǎn)
智能座艙的一個(gè)很大的特點(diǎn)就是幾乎將所有車內(nèi)功能按鍵、報(bào)警都搬進(jìn)了屏幕內(nèi)，那么幾乎所有的信息都要通過(guò)屏幕獲取，所有的功能都需要通過(guò)屏幕點(diǎn)擊操作完成，但是當(dāng)所有的內(nèi)容信息功能都堆積在一起時(shí)，任誰(shuí)看著都會(huì)產(chǎn)生信息焦慮。
通過(guò)設(shè)計(jì)去凸顯重要消息和重要功能是解決問(wèn)題的重要方法。許多汽車中控屏都將空調(diào)和座椅的快捷操作加入到了屏幕的底部dock欄，因?yàn)榭照{(diào)是使用頻率十分高的功能。交互層面的設(shè)計(jì)需要做到簡(jiǎn)化常用功能的使用層級(jí)步驟，視覺(jué)設(shè)計(jì)需要做到讓重要功能顯眼易操作。
·一觸即動(dòng)的反饋
我相信所有人都會(huì)認(rèn)為如果車機(jī)使用起來(lái)如果不流暢，體驗(yàn)會(huì)很糟糕，特別是如果極其卡頓，會(huì)不愿意使用，這也是許多人駕駛車輛的時(shí)候?qū)幵阜胖蟮闹锌仄敛挥?，而去用手機(jī)導(dǎo)航的一個(gè)重要原因。受制于車載芯片的性能和屏幕的質(zhì)量，過(guò)去確實(shí)這種卡頓是沒(méi)有辦法解決的。但是這些隨著芯片性能和技術(shù)能力的提升，或許芯片已經(jīng)不是造成車輛卡頓的罪魁禍?zhǔn)住?
如果車機(jī)上的動(dòng)效做的不夠流暢舒適，也會(huì)產(chǎn)生“卡頓”感，同樣是對(duì)用戶體驗(yàn)的破壞。所以一定要做好動(dòng)效反饋，掌握好動(dòng)效節(jié)奏，讓用戶感受到一觸即動(dòng)舒適感，是可以大大提高用戶體驗(yàn)的。關(guān)于具體的動(dòng)效設(shè)計(jì)受篇幅影響就不展開(kāi)了，我認(rèn)為這一塊車機(jī)與手機(jī)和pad上的動(dòng)效體驗(yàn)一致，蘋(píng)果靠著極其出色絲滑流暢的動(dòng)效設(shè)計(jì)讓人使用起來(lái)體驗(yàn)感十分舒適。界面中的元素彼此關(guān)聯(lián)，而非獨(dú)立存在。好的動(dòng)效設(shè)計(jì)是在界面中某一個(gè)元素發(fā)生變化時(shí)，與之相關(guān)聯(lián)的元素也會(huì)產(chǎn)生邏輯上合理的變化。動(dòng)效不是獨(dú)立存在的，而是彼此關(guān)聯(lián)著的。界面是由元素所組成的整體，所以當(dāng)界面中的某一些元素發(fā)生變化時(shí)，周圍的環(huán)境也會(huì)受到影響。
動(dòng)效設(shè)計(jì)像交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)一樣已經(jīng)成為用戶體驗(yàn)的一個(gè)重要組成部分。一款具備舒適動(dòng)效標(biāo)準(zhǔn)的車機(jī)系統(tǒng)能給車主帶來(lái)更好的客戶體驗(yàn)。當(dāng)然，做好同開(kāi)發(fā)的對(duì)接也很重要哦！！！
當(dāng)科技水平很高且生活中處處是科技的產(chǎn)品，人類就會(huì)越加渴望高情感的環(huán)境。科技本身并不是冰冷的，它帶有溫度、靈感、和情感；科技也不是孤立、靜止的，它在不斷地尋求自身的發(fā)展并拓展與人類的關(guān)系。我們需要通過(guò)設(shè)計(jì)讓科技與用戶完成情感上的交流，讓其更具有藝術(shù)感和親和力，讓車機(jī)從“孤島”成為烏托邦。
·是助手更是伙伴
語(yǔ)音助手通過(guò)智能對(duì)話與即時(shí)問(wèn)答的智能交互，實(shí)現(xiàn)幫忙用戶解決問(wèn)題，而智能語(yǔ)音助手在智能座艙中的地位越來(lái)越受到重視。在功能的基礎(chǔ)上，如果智能語(yǔ)言助手能夠跟有溫度有情感，用戶也能夠更信任系統(tǒng)，擁有更好的使用體驗(yàn)。
如何讓語(yǔ)言成為助手和伙伴呢，我們認(rèn)為如果只是冰冷的vui光效反饋，是做不到溫度和感情的，可能我們需要一個(gè)語(yǔ)言形象。當(dāng)用戶喚起語(yǔ)言是，會(huì)有一個(gè)具體的形象出現(xiàn)在屏幕上或屏幕外，讓用戶產(chǎn)生與系統(tǒng)對(duì)話的感覺(jué)，產(chǎn)生愿意與其對(duì)話的意愿，建立情感觸點(diǎn)；另一方面，也可以打造一個(gè)提高汽車品牌產(chǎn)品力點(diǎn)IP形象。
所以語(yǔ)音形象的設(shè)計(jì)，我們認(rèn)為也是HMI設(shè)計(jì)師需要考慮和思考的，需要設(shè)計(jì)出契合品牌的IP形象，來(lái)成為用戶的專屬語(yǔ)音助手和伙伴。他or她需要有豐富的表情、豐富的肢體動(dòng)作，甚至有情緒來(lái)與用戶進(jìn)行互動(dòng)反饋，從而達(dá)到提升用戶體驗(yàn)的目的。
如何設(shè)計(jì)出一個(gè)有溫度有情感的語(yǔ)音助手大家可以翻翻之前發(fā)的文章《車載智能助手設(shè)計(jì)：智能座艙的合作伙伴》，希望能對(duì)大家有所幫助！??！
·無(wú)微不至的細(xì)節(jié)設(shè)計(jì)
博大而深沉的情懷讓人贊賞，但微小而細(xì)膩的情感讓人感動(dòng)?？傆腥四軌虮荒硞€(gè)看似平凡的細(xì)節(jié)深深打動(dòng)，這便是細(xì)節(jié)設(shè)計(jì)的價(jià)值，我們精準(zhǔn)的去定位用戶群體，探索用戶的情感需求，當(dāng)然希望能夠做出打能夠做出打動(dòng)人心的細(xì)節(jié)設(shè)計(jì)。除了下面幾個(gè)點(diǎn)當(dāng)然還有更多的細(xì)節(jié)設(shè)計(jì)，就需要在設(shè)計(jì)過(guò)程中去慢慢體會(huì)和發(fā)現(xiàn)了了。
1、多模態(tài)交互方式：
人機(jī)的交互方式早就已經(jīng)不再是單單的觸屏操控，理想L9的后排屏幕，通過(guò)手勢(shì)或者語(yǔ)音都可以進(jìn)行操作，將手放在屏幕前半米外的位置挪動(dòng)，屏幕就會(huì)有光標(biāo)跟著手移動(dòng)，握拳就是點(diǎn)擊確認(rèn)，盡管這種交互方式目前來(lái)看還有瑕疵，但是作為設(shè)計(jì)師看到的應(yīng)該是在車上，會(huì)有更多更自然的多模態(tài)交互方式出現(xiàn)，可不僅僅只是手勢(shì)，通過(guò)文字、語(yǔ)音、視覺(jué)、動(dòng)作、環(huán)境等多種方式進(jìn)行人機(jī)交互，充分模擬人與人之間的交互方式，這不只是個(gè)噱頭，而是實(shí)打?qū)嵉捏w驗(yàn)設(shè)計(jì)。語(yǔ)音不就是一個(gè)典型的多模態(tài)交互的方式嗎。我們相信會(huì)有更多更自然交互方式，讓人既自然更加自然，做到“無(wú)感”的舒適。
2、情感化設(shè)計(jì)：
前文說(shuō)到語(yǔ)言助手的設(shè)計(jì)需要情感，但情感化設(shè)計(jì)是不僅僅體現(xiàn)在語(yǔ)音上，其實(shí)情感化設(shè)計(jì)是共通的，這是一種設(shè)計(jì)思維，這種思維可以體現(xiàn)在很多設(shè)計(jì)方面，比如，我們?cè)谝曈X(jué)設(shè)計(jì)上也可以去傳遞感情。而我們認(rèn)為，未來(lái)的HMI設(shè)計(jì)在很多地方都需要去考慮到用戶群體的情感共鳴。下面這個(gè)例子，重型卡車的儀表設(shè)計(jì)，鋼鐵元素是賴以生存的車，“門”是向往的家。依托大卡車司機(jī)在慢慢長(zhǎng)路上對(duì)家的思念和向往，用“門”的元素去撬動(dòng)這種情緒，以情感作為窗口，去引起卡車司機(jī)的共鳴。
HMI設(shè)計(jì)當(dāng)然不僅僅只有這些，還有很多，我們?cè)噲D總結(jié)一些關(guān)于HMI設(shè)計(jì)師需要去思考去了解的東西。新能源汽車的快速發(fā)展，同時(shí)也帶著智能座艙有了更高的需求，隨著這些因素，智能座艙對(duì)設(shè)計(jì)的要求無(wú)疑會(huì)越來(lái)越高。作為HMI設(shè)計(jì)師也需要對(duì)技術(shù)帶來(lái)的革新變化有敏銳的觀察能力并思考；同時(shí)也要有充足的知識(shí)體系和思考發(fā)掘能力去完成提高用戶體驗(yàn)的設(shè)計(jì)；同時(shí)也要有代入式的情感去進(jìn)行情感化的設(shè)計(jì).... 等等等等。這當(dāng)然也不是一朝一夕的事情，也需要我們?cè)O(shè)計(jì)從業(yè)者伴隨著快速發(fā)展的汽車這個(gè)行業(yè)一同去進(jìn)步。共勉?。?！
作者：EPUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
你有沒(méi)有注意過(guò)，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過(guò)渡），來(lái)完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺(jué)層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來(lái)排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過(guò)修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過(guò)調(diào)整百分百參數(shù)來(lái)控制線條生長(zhǎng)。
但只是單色修剪，看起來(lái)很單調(diào)。我們可以在這個(gè)動(dòng)畫(huà)基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺(jué)看起來(lái)更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺(jué)得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過(guò)多吸引用戶注意力。但對(duì)于帶有娛樂(lè)類屬性的產(chǎn)品來(lái)說(shuō)，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來(lái)制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來(lái)控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來(lái)營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來(lái)調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫(huà)。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來(lái)完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺(jué)。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺(jué)得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見(jiàn)，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來(lái)替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過(guò)讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過(guò)動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫(huà)，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過(guò)蒙版來(lái)控制整體動(dòng)畫(huà)顯示范圍，這個(gè)方案看起來(lái)適合科技或游戲類產(chǎn)品。
通過(guò)調(diào)整元素路徑來(lái)改變其造型，模擬液體滴落，再通過(guò)蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫(huà)的運(yùn)動(dòng)軌跡，便能通過(guò)修剪這條軌跡來(lái)完成筆畫(huà)的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見(jiàn)的原因在于其動(dòng)態(tài)效果面積大，視覺(jué)層級(jí)高，容易過(guò)度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過(guò)卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫(huà)出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過(guò)這效果。但為了降低視覺(jué)干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來(lái)源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒(méi)有在其他產(chǎn)品中看過(guò)，究其原因還是效果太過(guò)搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來(lái)不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來(lái)。
正是它們之間這種奇妙的融合，給我們帶來(lái)了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說(shuō)兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見(jiàn)的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
作者：幺零三 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在產(chǎn)品設(shè)計(jì)中，當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會(huì)給予用戶提示。常見(jiàn)的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺(jué)生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動(dòng)態(tài)內(nèi)容吸引。
今天來(lái)聊一下頁(yè)面中常見(jiàn)的動(dòng)態(tài)引導(dǎo)。
當(dāng)你看到這個(gè)頁(yè)面時(shí)
我想你會(huì)先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁(yè)面元素都賦予細(xì)節(jié)時(shí)
假如我想讓你關(guān)注到其中某個(gè)較小元素
其實(shí)只需要為它添加動(dòng)態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計(jì)中的動(dòng)態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時(shí)，設(shè)計(jì)師們都會(huì)根據(jù)功能重要程度，來(lái)決定使用什么形式讓入口元素和其他元素區(qū)分開(kāi)來(lái)。常見(jiàn)的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會(huì)消失）。當(dāng)然，也有將上述點(diǎn)綴元素動(dòng)態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動(dòng)畫(huà)，這在很多電商產(chǎn)品的品類區(qū)經(jīng)常可以看到。
動(dòng)態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對(duì)元素的注意力（與動(dòng)態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動(dòng)畫(huà)，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說(shuō)，每當(dāng)頁(yè)面多出一個(gè)會(huì)動(dòng)的元素，后臺(tái)就會(huì)多出這樣一些留言，捅了開(kāi)發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動(dòng)態(tài)引導(dǎo)還常常被設(shè)計(jì)師用來(lái)強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營(yíng)拿刀架脖子），來(lái)達(dá)成某些數(shù)據(jù)指標(biāo)，通過(guò)利用動(dòng)態(tài)誘導(dǎo)用戶操作。
例如：在會(huì)員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動(dòng)畫(huà)。
這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動(dòng)端，受屏幕大小限制，設(shè)計(jì)師通常會(huì)折疊或隱藏不常用的功能，來(lái)保持頁(yè)面簡(jiǎn)潔。
對(duì)于這些不可見(jiàn)的功能，在初次使用時(shí)需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢(shì)引導(dǎo)，通過(guò)動(dòng)態(tài)直觀展示不同手勢(shì)的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開(kāi)視頻時(shí)， App 會(huì)提醒你雙擊屏幕可以點(diǎn)贊，上下滑動(dòng)可以切換視頻。
在產(chǎn)品交互設(shè)計(jì)中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動(dòng)態(tài)敘述的直觀性，使得我們可以減少對(duì)復(fù)雜信息進(jìn)行大量文字描述。通過(guò)動(dòng)態(tài)設(shè)計(jì)，我們可以創(chuàng)建視覺(jué)故事，這有助于將復(fù)雜信息以更簡(jiǎn)單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開(kāi)始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時(shí)才會(huì)觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時(shí)（面容解鎖的情況下），系統(tǒng)會(huì)通過(guò)動(dòng)態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識(shí)別。
在掃碼時(shí)，弱光場(chǎng)景下出現(xiàn)的手電筒，通過(guò)動(dòng)態(tài)引起用戶注意，指引用戶使用。
以及作為動(dòng)態(tài)演示，幫助用戶理解如何使用手掌滑動(dòng)截屏
如何進(jìn)行NFC感應(yīng)等等..
動(dòng)態(tài)引導(dǎo)像是設(shè)計(jì)師用來(lái)控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見(jiàn)...
作者：幺零三 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn