很多人很喜歡國(guó)外的極簡(jiǎn)設(shè)計(jì)，先不看 Dribbble 上五花繚亂飛機(jī)稿，哪怕是博客編輯器 Wix.com 上的模板看著都很令人羨慕。為啥國(guó)外的網(wǎng)站都那么極簡(jiǎn)，國(guó)內(nèi)就學(xué)不來呢？

十年前，我以為這是因?yàn)閲?guó)民審美和設(shè)計(jì)師水平?jīng)]上來。現(xiàn)在，我發(fā)現(xiàn)這件事情沒那么簡(jiǎn)單啊！假想一下，你去下一個(gè)國(guó)外的極簡(jiǎn) UI 模板來，把文字改成中文，評(píng)審時(shí)能過稿嗎？

我估計(jì)十有八九過不了，產(chǎn)品經(jīng)理肯定有一大堆信息、功能和運(yùn)營(yíng)入口要塞進(jìn)去。可這應(yīng)該怪萬惡的資本主義，為了賺錢而不把審美自由當(dāng)回事嗎？

用戶期待差異

尼爾森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做過一次研究試驗(yàn)，發(fā)現(xiàn)不光是中國(guó)的公司決策層，就連中國(guó)的用戶也未必就喜歡非常極簡(jiǎn)界面。

這次研究中，12 個(gè)中國(guó)人和在中國(guó)生活的外國(guó)人（應(yīng)該是歐美為主）被邀請(qǐng)來，在 8 個(gè)網(wǎng)站上完成簡(jiǎn)單的任務(wù)，并且一邊使用一邊說出他們的想法和意圖（Think Aloud）。

P.S. 這 8 個(gè)網(wǎng)站中有簡(jiǎn)潔的也有復(fù)雜的，對(duì)中國(guó)人展示中文，對(duì)外國(guó)人展示英文，以此形成對(duì)比。

很多外國(guó)人在使用較為復(fù)雜的網(wǎng)站時(shí)（被翻譯成英文的中文網(wǎng)站），抱怨比較多。他們?cè)谥袊?guó)生活，對(duì)這種網(wǎng)站設(shè)計(jì)已經(jīng)見怪不怪了。

雖然也有人說好話，稱贊信息展示明確直白，但也有人抱怨很難用的。至少大部分外國(guó)人對(duì)于復(fù)雜頁面的問題比簡(jiǎn)潔頁面的問題要多得多。

而相比他們，中國(guó)人普遍不覺得那些復(fù)雜頁面有什么特別的，因?yàn)槟切┖堋捌胀ā?、“正?！保踔痢皞鹘y(tǒng)”。

相反，抱怨簡(jiǎn)潔頁面難用的反倒更多，例如：

“單從設(shè)計(jì)角度來看，圖標(biāo)、圖片、布局都很好，符合很多人，至少年輕人都喜好。簡(jiǎn)單、干凈，既沒廣告，又沒有無用信息。但問題是，它也沒什么有用信息——我在這些網(wǎng)站里看不到什么有用的東西。所有的功能介紹都只是在玩文字游戲，沒有實(shí)際含義，沒點(diǎn)真實(shí)內(nèi)容。”

P.S. 以上是從英文資料的翻譯。

中英文語言差異

中文的信息傳遞效率就是比英文高，我們也早就習(xí)慣了這一點(diǎn)?！堵?lián)合國(guó)憲章》被翻譯成六種語言，其中就數(shù)中文最薄。

2017 年，Twitter 把原有 140 個(gè)單詞的限制放寬到了 280，卻唯獨(dú)沒有把這改版提供給中文、日文和韓文，理由就是語言密度足夠大了。

所以說，中文用戶對(duì)單頁信息量要求更高，這就是很正常的事了。

視覺密度差異

同樣的一句話，雖然中文更簡(jiǎn)短，但是視覺密度更高啊。

會(huì)點(diǎn)排版的人都知道，視覺密度的節(jié)奏很重要，要全局考慮的。如果有一個(gè)地方的視覺密度比較高，那么整個(gè)頁面的視覺密度都要匹配上才能和諧。否則一下子太疏一下子太密，就會(huì)喪失統(tǒng)一感。中文的間隙和比劃之間的間隔都比較小，也注定了頁面的其它部分為了匹配上這個(gè)節(jié)奏，不能太疏。

這就是為什么，把一些英文板式直接拿來填充中文會(huì)很奇怪。難怪我去一些繁體中文網(wǎng)站時(shí)，會(huì)感覺比簡(jiǎn)體中文網(wǎng)站更復(fù)雜擁擠。其實(shí)咱們大陸地區(qū)由于使用簡(jiǎn)體字，視覺密度已經(jīng)比繁體字要松很多了。

簡(jiǎn)潔 ≠ 好用

說到這里，不是要為一些又復(fù)雜又不好用的設(shè)計(jì)進(jìn)行辯解。只是說，簡(jiǎn)潔并不代表好用。當(dāng)我們隨口說出“少即是多”這種設(shè)計(jì)概念時(shí)，也不可忽視，凡事都有個(gè)度?？吹絿?guó)外那種極簡(jiǎn)設(shè)計(jì)時(shí)，也稍微自信點(diǎn)，簡(jiǎn)潔并不是我們唯一追求的方向。

作者：體驗(yàn)進(jìn)階

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

前言

動(dòng)態(tài)設(shè)計(jì)（Motion Design）有助于創(chuàng)建令人愉悅且直觀的用戶界面。好的動(dòng)態(tài)設(shè)計(jì)，不僅能引導(dǎo)用戶對(duì)數(shù)字產(chǎn)品的體驗(yàn)，還可傳達(dá)有關(guān)產(chǎn)品的品牌信息。本文將介紹近來最流行的動(dòng)態(tài)設(shè)計(jì)趨勢(shì)，這些令人驚艷的動(dòng)效表現(xiàn)手法，在不久的將來勢(shì)必席卷所有人的目光。

1. 動(dòng)態(tài)在 UI/UX 扮演的角色

動(dòng)態(tài)能激發(fā)用戶的情緒，為靜態(tài)的視覺設(shè)計(jì)注入活力與生命力。有趣、奇妙、吸引人的動(dòng)態(tài)，能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面，動(dòng)態(tài)有助于支持可用性，通過自然流暢的物理運(yùn)動(dòng)，突顯元素在過渡時(shí)的關(guān)聯(lián)性與狀態(tài)變化，增強(qiáng)用戶對(duì)產(chǎn)品功能的感知。

因此，動(dòng)態(tài)設(shè)計(jì)必須是有意義的，同時(shí)兼具可用性與美感，UX 行業(yè)也將動(dòng)態(tài)設(shè)計(jì)視為多學(xué)科的交集，細(xì)分成一個(gè)專業(yè)的設(shè)計(jì)門類。作為 UI 和 UX 設(shè)計(jì)中重要的組成部分，動(dòng)態(tài)設(shè)計(jì)從三個(gè)層面發(fā)揮影響力：

提高連貫性（Increase Continuity）

讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導(dǎo)向期望的任務(wù)結(jié)果。

連接場(chǎng)景（Connect Scenes）

在轉(zhuǎn)換場(chǎng)景的過程中扮演潤(rùn)滑劑的角色，闡明場(chǎng)景之間的位置、層級(jí)與空間的關(guān)系。

視覺吸引（Visually Appealing）

聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達(dá)、提升識(shí)別度的作用。

2. 動(dòng)態(tài)設(shè)計(jì)趨勢(shì)

植基于 UI 和 UX 設(shè)計(jì)而發(fā)展的第三維度，動(dòng)態(tài)設(shè)計(jì)的趨勢(shì)自然與兩者密不可分。綜觀近年，多數(shù)作品巧妙地運(yùn)用絢麗的動(dòng)態(tài)圖像（Motion Graphics）與動(dòng)效設(shè)計(jì)，讓新的視覺手法得以表現(xiàn)更為出彩。再者，隨著移動(dòng)端芯片性能提升，跳脫二維平面的表現(xiàn)形式不再難以實(shí)現(xiàn)，讓設(shè)計(jì)師能夠解開束縛，發(fā)揮無限的想像空間。2021 年的動(dòng)態(tài)設(shè)計(jì)可歸納為三個(gè)趨勢(shì)：

增強(qiáng)表達(dá)（Enhance Expression）

運(yùn)用引人注目的表現(xiàn)手法將信息傳遞給用戶，包括變形、動(dòng)態(tài)文字和背景動(dòng)畫。

創(chuàng)造層次（Create Hierarchy）

在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)，遮罩與視差是常用的表現(xiàn)手法。

擴(kuò)展維度（Expand Dimensions）

突破二維限制，將界面元素多維化營(yíng)造空間感，例如 3D 動(dòng)態(tài)圖形和攝像機(jī)運(yùn)動(dòng)。

增強(qiáng)表達(dá)

1. 變形 Morphing

變形創(chuàng)造了一種連續(xù)的敘事狀態(tài)，告知用戶元素的狀態(tài)或作用發(fā)生變化，是一種最引人注目的表現(xiàn)手法，能將形狀、圖像、色彩無縫地融合與過渡。

動(dòng)畫插圖 Animated Illustrations

2021 年看到許多有趣、吸引人的插圖，而更多的設(shè)計(jì)師開始為靜態(tài)圖像添加動(dòng)態(tài)，也讓 GIF 和動(dòng)畫插圖越來越受歡迎。

動(dòng)畫插圖看起來更生動(dòng)，并帶有敘事性質(zhì)。在示例中，運(yùn)用動(dòng)畫插圖來呈現(xiàn)這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。

by Lobster

通過動(dòng)畫插圖來呈現(xiàn)同一系列的轉(zhuǎn)變，有利于延續(xù)外形上的特征，讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化，同樣風(fēng)格的系列家具利用動(dòng)畫來體現(xiàn)一致性。

by Graceful illustrations ?

流體動(dòng)態(tài) Liquid Motion

動(dòng)態(tài)的有機(jī)形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強(qiáng)視覺效果。流體動(dòng)態(tài)并非明確的過渡與場(chǎng)景轉(zhuǎn)換，而是顏色在流動(dòng)的液體中擴(kuò)散，進(jìn)而創(chuàng)造出抽象或真實(shí)的視覺形狀。這種風(fēng)格能實(shí)現(xiàn)無縫過渡，并為設(shè)計(jì)增添有機(jī)感，也是 2021 年最引人注目的動(dòng)畫趨勢(shì)之一。

運(yùn)用流體動(dòng)態(tài)來展現(xiàn)抽象的有機(jī)體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動(dòng)態(tài)設(shè)計(jì)可作為烘托主題的背景動(dòng)畫，或是吸引目光焦點(diǎn)的主角。

by ?anton mishin?

流體動(dòng)態(tài)運(yùn)用到網(wǎng)站設(shè)計(jì)所營(yíng)造的視覺沖擊力更為驚艷，能為用戶帶來獨(dú)特、新鮮的視覺感受， 使得流體動(dòng)態(tài)深受風(fēng)格前衛(wèi)的設(shè)計(jì)師喜愛。網(wǎng)站還能利用鼠標(biāo)懸停與流體進(jìn)行互動(dòng)，因此會(huì)在許多特效網(wǎng)站見到流體動(dòng)態(tài)的蹤跡。

by Gilles Tossoukpé

動(dòng)態(tài)漸變 Dynamic Gradients

扁平化設(shè)計(jì)缺少現(xiàn)實(shí)質(zhì)感的元素，搭配漸變色能有效緩解不足，為設(shè)計(jì)創(chuàng)造深度與層次。變化中的漸變色同時(shí)帶有動(dòng)感與舒緩，充滿活力卻又平靜。使用動(dòng)態(tài)漸變能讓設(shè)計(jì)師展示一系列不斷變化的情緒，許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點(diǎn)，開始在廣告活動(dòng)、識(shí)別設(shè)計(jì)和數(shù)字內(nèi)容使用動(dòng)態(tài)漸變。

by Pixelz Studio

微交互 Micro Interactions

在用戶體驗(yàn)設(shè)計(jì)中微交互變得日益重要，而動(dòng)態(tài)設(shè)計(jì)正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機(jī)交互易于使用的關(guān)鍵。從經(jīng)典案例來看，微交互的動(dòng)畫細(xì)節(jié)必須帶有明確的目的性，讓用戶獲得實(shí)時(shí)反饋，指導(dǎo)用戶進(jìn)行下一步。從近幾年的設(shè)計(jì)趨勢(shì)來看，微交互已成為不可或缺的存在。

by Илья Бабушкин

by Google

動(dòng)畫商標(biāo) Animated Logos

過去幾年動(dòng)畫商標(biāo)是最流行的動(dòng)畫趨勢(shì)之一，通過各種視覺效果，設(shè)計(jì)師能創(chuàng)造出不同類型的動(dòng)畫商標(biāo)，許多企業(yè)開始采用動(dòng)畫商標(biāo)作為吸引注意力的手段。多數(shù)情況下，商標(biāo)是進(jìn)入網(wǎng)站時(shí)最先看到的東西，因此商標(biāo)應(yīng)該令人難忘、引人入勝，并使用符號(hào)或排版來揭示品牌個(gè)性。結(jié)合動(dòng)畫的優(yōu)勢(shì)，設(shè)計(jì)師可以運(yùn)用一些動(dòng)態(tài)或效果來講述簡(jiǎn)短的故事以強(qiáng)調(diào)品牌特征，并為靜態(tài)排版和商標(biāo)注入一股活力。

by Yulia K.

by Meta

2. 動(dòng)態(tài)文字 Kinetic Typography

動(dòng)態(tài)文字是使用移動(dòng)文本來吸引注意力的動(dòng)畫技術(shù)，許多卓越的品牌在網(wǎng)頁設(shè)計(jì)中使用動(dòng)態(tài)文字，為網(wǎng)站外觀增添動(dòng)感和視覺沖擊力，是近年 UI 動(dòng)畫的趨勢(shì)之一。

設(shè)計(jì)師使用動(dòng)態(tài)文字為單詞或句子添加生動(dòng)的元素，借此定下情緒氛圍與設(shè)計(jì)基調(diào)，吸引用戶的注意力。幾種常見的表現(xiàn)手法，擠壓和拉伸一個(gè)詞能會(huì)喚起一種俏皮感，而連續(xù)重復(fù)這個(gè)詞則具有催眠感和前衛(wèi)感。另外，使用大號(hào)和粗體字體來增強(qiáng)份量以強(qiáng)調(diào)某些信息，也是動(dòng)態(tài)文字的特征之一。

無論在電商網(wǎng)站、電視廣告或音樂視頻，動(dòng)態(tài)文字都占有舉足輕重的地位，有利于加深用戶對(duì)品牌的關(guān)注與印象。

by HOLOGRAPHIK®

by Hrvoje Grubisic

3. 背景動(dòng)畫 Background Animation

通過背景動(dòng)畫來強(qiáng)化敘事，成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動(dòng)態(tài)的品牌故事，展示有趣的制造過程、產(chǎn)品的使用場(chǎng)景。背景動(dòng)畫深獲大眾喜愛，它能讓用戶在進(jìn)入登錄頁或網(wǎng)站首頁時(shí)，輕易地了解更多有關(guān)公司或產(chǎn)品的信息。調(diào)研顯示，從銀行、醫(yī)療保健公司、電商零售商、餐館到 B2B 供應(yīng)商，這些跨越不同細(xì)分市場(chǎng)和行業(yè)的網(wǎng)站都開始使用背景動(dòng)畫。

by Carlo Soleri

by Kirill Zhukovsky

創(chuàng)造層次

1. 遮罩 Masking

遮罩過渡是將幾何或有機(jī)形狀作為銜接下個(gè)場(chǎng)景的遮擋物，等同于舞臺(tái)幕布設(shè)計(jì)，能在界面元素進(jìn)場(chǎng)或退場(chǎng)時(shí)創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡(jiǎn)潔高效，是最常見的過渡動(dòng)畫之一。

切換場(chǎng)景 Scene-Switching

其中一種遮罩過渡，是將當(dāng)前場(chǎng)景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動(dòng)作延續(xù)性，讓兩個(gè)場(chǎng)景能夠順暢地銜接，不致于差異過大，造成用戶心理負(fù)擔(dān)。

by intent

by Minh Pham ?

狀態(tài)變換 State Transformation

另一種遮罩的表現(xiàn)形式，較無明顯的場(chǎng)景過渡，而是利用遮罩來表現(xiàn)景物的狀態(tài)變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產(chǎn)品組合等。

by Daniel Tan

by Outcrowd

2. 視差 Parallax

視差是利用不同的界面元素以不同的速率移動(dòng)，創(chuàng)造前后景深的分離效果，借此在平面中塑造空間層次，已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。

視差之所以能形成一股風(fēng)潮，廣為各個(gè)行業(yè)所接受，一方面是信息層級(jí)更加清晰，明確定義各種元素的關(guān)系，讓用戶專注于主要操作和內(nèi)容，將背景或非交互元素往后退，同時(shí)保持設(shè)計(jì)的完整性。另一方面是豐富的層次變化，當(dāng)用戶滾動(dòng)或滑動(dòng)時(shí)，能在扁平化界面拉開空間關(guān)系，利用不同的速率和縱深，塑造多層次的感官體驗(yàn)。

by Studio V?R

by Studio V?R

擴(kuò)展維度

1. 3D 動(dòng)態(tài)圖形 3D Motion Graphics

近年來，結(jié)合 3D 動(dòng)態(tài)圖形的界面設(shè)計(jì)呈現(xiàn)爆炸式增長(zhǎng)，雖然創(chuàng)建 3D 動(dòng)畫需要更多的時(shí)間、技巧與協(xié)作，但不可否認(rèn)的，3D 動(dòng)畫比 2D 圖形更加逼真，從而提供更具吸引力和互動(dòng)性的用戶體驗(yàn)，并有效地展示品牌的活力。

更生動(dòng)的表情 Lively Emoji

動(dòng)畫的吸引力在于能夠創(chuàng)建各種角色，并為無生命物體注入生命力，表情符號(hào)就是一個(gè)很好的例子。作為獨(dú)特的網(wǎng)絡(luò)語言，表情符號(hào)生動(dòng)地描摹日常面對(duì)面交流的非言語信息，隨著圖形界面的設(shè)計(jì)趨勢(shì)逐漸結(jié)合 2D 與 3D，運(yùn)用 3D 動(dòng)態(tài)圖形來創(chuàng)造更加動(dòng)感、擬人化的表情，能讓這些非言語信息更加豐富，有機(jī)會(huì)引領(lǐng)下一波風(fēng)潮。

by Outcrowd

營(yíng)造空間感 Spatial Awareness

3D 動(dòng)態(tài)圖形為平面設(shè)計(jì)建構(gòu)了空間敘事框架，在扁平化界面中展現(xiàn)立體感，從而表達(dá)空間中元素的位置與層級(jí)關(guān)系。多維化的發(fā)展趨勢(shì)，推動(dòng)了視覺表達(dá)形式的演變，空間感讓界面設(shè)計(jì)更符合人類的認(rèn)知邏輯，運(yùn)用各種 3D 運(yùn)動(dòng)特效，包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等，打造令人難忘的感官?zèng)_擊。

by UI8

by Bruno Ortolland

擬人動(dòng)畫 Anthropomorphic Animations

擬人化能讓物體、植物、動(dòng)物等非人類事物，表現(xiàn)出人類屬性的行為與狀態(tài)。動(dòng)畫片運(yùn)用擬人的手法是最普遍的，1927 年迪士尼第一部系列動(dòng)畫《幸運(yùn)兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼絹碓蕉嘣O(shè)計(jì)師在界面中添加擬人元素，利用這種效果讓畫面更加生動(dòng)有趣，增強(qiáng)用戶體驗(yàn)的愉悅感。

by Gregory Riaguzov

2. 攝像機(jī)運(yùn)動(dòng) Camera Movements

在動(dòng)態(tài)設(shè)計(jì)中，攝像機(jī)運(yùn)動(dòng)是最自由、靈活的一種表現(xiàn)形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創(chuàng)造一個(gè)無界線的立體空間。常見于影視、動(dòng)畫和廣告的攝像機(jī)運(yùn)動(dòng)，包括推近、拉出、平移、跟拍等方式，備受動(dòng)態(tài)設(shè)計(jì)師青睞，讓用戶以多變的視野探索數(shù)字產(chǎn)品。

推近/拉出 Dolly In/Dolly Out

推鏡頭是指被拍攝的對(duì)象不動(dòng)，攝像機(jī)由遠(yuǎn)而近，朝著對(duì)象不斷推進(jìn)， 用來突出人或物的主體。鏡頭推近的運(yùn)動(dòng)方式，用來呈現(xiàn)從整體到局部、由分散到集中的變化，引領(lǐng)用戶進(jìn)入故事情景，給人一種身臨其境的感受。

相反地，拉鏡頭則是將攝像機(jī)后退，使畫面逐漸遠(yuǎn)離被攝主體，側(cè)重的是從局部到整體、由點(diǎn)到面的轉(zhuǎn)變，強(qiáng)調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象，能激起人們無限的想像。

水平/垂直移動(dòng) Truck/Pedestal

水平向左或向右，垂直向上或向下移動(dòng)攝像機(jī)，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動(dòng)，產(chǎn)生一種置身其中的感覺。這種運(yùn)鏡方式，通常用于具體的場(chǎng)景，利用角色或景物的延續(xù)性來消除場(chǎng)景過渡時(shí)的邊界，表現(xiàn)出一種流動(dòng)感，無論是手勢(shì)滑動(dòng)或鼠標(biāo)滾動(dòng)都能有順暢的操作體驗(yàn)。

結(jié)合多種運(yùn)鏡 Multiple Camera Movements

運(yùn)用多種攝像機(jī)運(yùn)動(dòng)相當(dāng)普遍，既能擴(kuò)大視野，又有很強(qiáng)的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續(xù)而詳盡地展示一個(gè)產(chǎn)品，由于畫面始終跟隨一個(gè)主體，有利于突出產(chǎn)品特征，并讓用戶從不同的角度和距離觀看產(chǎn)品，是一種增強(qiáng)臨場(chǎng)感和參與感的有效方法。

一鏡到底 One Shot

在電影中為了不將觀眾的情感和注意力割裂，使用一個(gè)鏡頭來完成全片的場(chǎng)景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長(zhǎng)鏡頭。連續(xù)鏡頭逐漸被運(yùn)用到界面過渡，以此增強(qiáng)操作過程的流暢性，例如一氣呵成的購物體驗(yàn)，或是貫穿全場(chǎng)的人物角色，其特點(diǎn)是給用戶最沉浸的感官體驗(yàn)，無間斷地體驗(yàn)整個(gè)流程。

結(jié)語

動(dòng)態(tài)設(shè)計(jì)作為近年熱門的創(chuàng)作形式，廣泛應(yīng)用到各個(gè)領(lǐng)域，逐漸成為設(shè)計(jì)的主流趨勢(shì)。受益于技術(shù)演進(jìn)與發(fā)展，從創(chuàng)意生產(chǎn)到落地實(shí)現(xiàn)，動(dòng)態(tài)設(shè)計(jì)的門檻不再遙不可及。設(shè)計(jì)師得以將想法轉(zhuǎn)化為生動(dòng)、有趣的作品，并有機(jī)會(huì)創(chuàng)造新的表現(xiàn)手法，玩出許多新花樣，成為 2021 年動(dòng)態(tài)設(shè)計(jì)的特色。

本文歸納的設(shè)計(jì)趨勢(shì)，有助于啟發(fā)設(shè)計(jì)師對(duì)動(dòng)態(tài)設(shè)計(jì)的想像，激發(fā)更多創(chuàng)作靈感，為靜態(tài)界面賦予靈魂，打造令人難忘的視覺體驗(yàn)和品牌形象。

作者：騰訊ISUX

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）

網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？

網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！

網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！

20 世紀(jì)末到 21 世紀(jì)開始，宣傳品牌與產(chǎn)品的陣地不再局限于印刷品，電視、電臺(tái)及現(xiàn)場(chǎng)活動(dòng)，而是出現(xiàn)了網(wǎng)站，網(wǎng)站可以鏈接更多陌生人，而且沒有時(shí)空限制。

1997 年的谷歌網(wǎng)站

美國(guó)最火的設(shè)計(jì)風(fēng)格只要有人將資料放到網(wǎng)上，遠(yuǎn)在日本的一名中學(xué)生都可以去學(xué)習(xí)了解，所以也打破了過去信息差的優(yōu)勢(shì)。本回我們要跟大家聊聊網(wǎng)頁設(shè)計(jì)的發(fā)展，但在展開內(nèi)容前，要搞清楚一個(gè)問題，就是網(wǎng)頁設(shè)計(jì)屬于平面設(shè)計(jì)嗎？

國(guó)內(nèi)早在差不多 20 年前，建站公司就開始獨(dú)立存在，所以這個(gè)問題蠻有爭(zhēng)議，尤其是 UI 設(shè)計(jì)也很成熟之后，大家更愿意認(rèn)為此學(xué)科是獨(dú)立的。

中國(guó)建于 1994 年的第一個(gè)網(wǎng)頁，主要對(duì)外溝通

平面設(shè)計(jì)的定義不管怎么粉飾，簡(jiǎn)單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網(wǎng)頁設(shè)計(jì)也是如此，唯一區(qū)別是網(wǎng)頁具有動(dòng)態(tài)，但這種動(dòng)態(tài)屬于若干個(gè)靜態(tài)設(shè)定的切換關(guān)系，其關(guān)鍵幀也是平面設(shè)計(jì)。

2003 年時(shí)候的淘寶網(wǎng)

我在國(guó)內(nèi)蠻早就從事網(wǎng)頁設(shè)計(jì)工作，早年甚至可以自己獨(dú)立完成網(wǎng)站，除了頁面設(shè)計(jì)，還包括套 ASP 程序（Active Server Pages 動(dòng)態(tài)服務(wù)器頁面），用 table 布局前端等，當(dāng)然這些技術(shù)如今早已過時(shí)。

12 年前史太濃獨(dú)立完成的網(wǎng)站

因此這段歷史我就是參與者之一，所以本回不僅是對(duì)搜集資料的剪裁分析，還會(huì)結(jié)合不少自身經(jīng)歷體驗(yàn)跟大家分享。

首先我們來簡(jiǎn)單回顧下互聯(lián)網(wǎng)的發(fā)展與網(wǎng)頁設(shè)計(jì)的演變。

國(guó)際互聯(lián)網(wǎng)絡(luò)與超級(jí)媒體

互聯(lián)網(wǎng)發(fā)展到如今已經(jīng)像空氣一樣存在，斷網(wǎng)已經(jīng)如同缺氧那么嚴(yán)重，而互聯(lián)網(wǎng)的誕生最初跟兩件事情相關(guān)。

第一件大家也許比較熟悉，就是在 20 世紀(jì) 50 年代末美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡(jiǎn)稱 ARPA）成立了。

美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署 logo

其成立的根本原因是冷戰(zhàn)背景下，蘇聯(lián)不但先于美國(guó)在 1957 年將衛(wèi)星送上太空，而且世界第一枚多級(jí)遠(yuǎn)程彈道火箭發(fā)射也試驗(yàn)成功，因此蘇聯(lián)宣稱可以將核彈送往地球任何地區(qū)。這對(duì)美國(guó)而言實(shí)在太嚇人，所以 ARPA 是一個(gè)專門研究國(guó)防技術(shù)的“事業(yè)部”，聚合美國(guó)當(dāng)時(shí)最牛的幾百位科學(xué)家，研究如何將最先進(jìn)技術(shù)應(yīng)用到美國(guó)國(guó)防。

人類第一個(gè)衛(wèi)星由蘇聯(lián)在 1957 年發(fā)射

由于這些科學(xué)家當(dāng)時(shí)分散于全國(guó)各地，因?yàn)槿绱藚柡Φ目茖W(xué)家肯定本身有重要事務(wù)，而不是放著隨傳隨到，因此大伙無法專門聚在一起專門干這事，而是遠(yuǎn)程協(xié)作，所以就需要一個(gè)有效的遠(yuǎn)程溝通工具。

這個(gè)工具不能只局限于語言聲音，還要做到資源共享，更關(guān)鍵的是要高效安全，信息不可被盜取，當(dāng)時(shí)負(fù)責(zé)研究此事的人是麻省理工科學(xué)家約翰·利克利德(John Licklider)。

麻省理工科學(xué)家約翰·利克利德 

此處省略一堆過程與專業(yè)技術(shù)術(shù)語，反正如此這般，利克利德因?yàn)?ARPA 組織這個(gè)溝通交接需求無意中發(fā)明出“國(guó)際互聯(lián)網(wǎng)網(wǎng)絡(luò)”（the World Wide Web）。

互聯(lián)網(wǎng)時(shí)代開啟

事后證明，國(guó)不國(guó)防是一回事，這才是他們最偉大的發(fā)明。這種技術(shù)能做到資源共享與防止盜取的一個(gè)重要原因是可以將信息分解成“數(shù)據(jù)包”，將他們發(fā)送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個(gè)程度就可以了，再往深里說意義不大，況且我也說不清楚，

而時(shí)間很快去到 1987 年，這是第二件事情，這一年蘋果電腦公司向外界報(bào)道了一款可在網(wǎng)絡(luò)上尋找資料的軟件，名為“超級(jí)文件”（Hypertext）。

蘋果 1987 年的“超級(jí)文件”軟件

比如在電腦上打“設(shè)計(jì)史太濃”就可以將當(dāng)時(shí)整個(gè)網(wǎng)絡(luò)與此相關(guān)的文字內(nèi)容集中起來（當(dāng)時(shí)網(wǎng)絡(luò)上的內(nèi)容其實(shí)非常有限），等于是谷歌百度的前身了。

后來這個(gè)軟件進(jìn)化為“超級(jí)媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。

蘋果軟件“超級(jí)媒體”軟件

再然后，蘋果公司將這種技術(shù)跟日本索尼公司發(fā)明的 CD-ROM（compact disc read only memory，于 1982 年發(fā)明）進(jìn)行結(jié)合，變成“互動(dòng)光盤”，這種光盤就等于是如今網(wǎng)站的鼻祖版本了。在大致容量 600MGB 的 CD 中，蘋果公司的工作人員往里面塞進(jìn)了文字、圖形、動(dòng)畫，而且形成一個(gè)復(fù)雜的索引架構(gòu)。

CD-ROM 中的互動(dòng)界面 

這樣一來就形成一個(gè)靈活且可互動(dòng)的內(nèi)容庫，大家可以根據(jù)需要選取想看的部分，有首頁、二級(jí)欄目、三級(jí)欄目、內(nèi)容詳情頁等。在此過程中還發(fā)明設(shè)計(jì)出一些后來常見的網(wǎng)站架構(gòu)邏輯，比如“平行文本”、“多層”“矩陣”“網(wǎng)絡(luò)系統(tǒng)”等，這里作很簡(jiǎn)單的介紹：

平行文本就是可以在看一篇文字時(shí)候可一邊看到它相關(guān)的摘要跟縮寫，這等于如今的鼠標(biāo)經(jīng)過效果。

網(wǎng)頁中的“鼠標(biāo)經(jīng)過”效果

多層就是看一個(gè)內(nèi)容的時(shí)候可以看到其它相關(guān)部分，等于如今網(wǎng)站中的“相關(guān)推薦”。

網(wǎng)頁中的“相關(guān)推薦”效果

矩陣就是將資料布局到一個(gè)網(wǎng)格中方便大家查詢，等于現(xiàn)在的產(chǎn)品系統(tǒng)，新聞系統(tǒng)一類。

網(wǎng)頁中的“產(chǎn)品系統(tǒng)”效果

網(wǎng)絡(luò)系統(tǒng)就是可以聯(lián)系外部信息，其實(shí)就等于友情鏈接一類了。

當(dāng)時(shí)間去到 1991 年，美國(guó)政府開始投入資金將“互聯(lián)網(wǎng)”引入公共學(xué)校，而經(jīng)過 6 年，世界上就有 3000 萬個(gè)網(wǎng)絡(luò)用戶，2000 年左右，美國(guó)就有三分之一的家庭實(shí)現(xiàn)了聯(lián)網(wǎng)。有流量就有商機(jī)，于是就有人將“互動(dòng)光盤”這樣的呈現(xiàn)方式搬到互聯(lián)網(wǎng)上變成網(wǎng)站，變成一種宣傳展示的渠道，不亦樂乎。

90 年代可口可樂的官網(wǎng)

所以最初的“互動(dòng)光盤”設(shè)計(jì)其實(shí)就等于第一代網(wǎng)頁設(shè)計(jì)。

網(wǎng)頁設(shè)計(jì)的高速發(fā)展

1994 年時(shí)候，中國(guó)有個(gè)人因?yàn)楣珓?wù)出差去美國(guó)見證過互聯(lián)網(wǎng)的神奇，回國(guó)之后辭職，在 1998 年創(chuàng)立了一個(gè)如今市值 1.8 萬億的公司—阿里巴巴，這人就是馬云。

阿里巴巴早期的網(wǎng)頁設(shè)計(jì)樣式

20 世紀(jì) 90 年代恰好是網(wǎng)站建設(shè)數(shù)量急劇暴增的時(shí)候，充滿了商機(jī)，大家可以理解為近幾年短視頻暴增一樣，根據(jù)回顧統(tǒng)計(jì)，在 1997 年時(shí)候僅僅一年美國(guó)本土就新增了 80 萬個(gè)新網(wǎng)頁。

所以用“網(wǎng)頁”一詞是因?yàn)樽畛跣U多網(wǎng)站都是靜態(tài)，網(wǎng)站后臺(tái)是后來慢慢才發(fā)展形成。

1997 年時(shí)候的麥當(dāng)勞網(wǎng)站設(shè)計(jì)

但網(wǎng)頁設(shè)計(jì)最初的暴增還沒有直接為平面設(shè)計(jì)師創(chuàng)造崗位，因?yàn)榈谝淮W(wǎng)頁設(shè)計(jì)師其實(shí)大部分由程序員轉(zhuǎn)型而來。后來不斷發(fā)展競(jìng)爭(zhēng)升級(jí)才將程序、前端、網(wǎng)頁設(shè)計(jì)及推廣優(yōu)化這樣的崗位分來，以便有更專業(yè)的表現(xiàn)。

我在 2010 年時(shí)候開始從事網(wǎng)頁設(shè)計(jì)，恰好是一個(gè)將網(wǎng)站建設(shè)不同崗位獨(dú)立出來的時(shí)代。當(dāng)時(shí)我所在公司中企動(dòng)力屬于國(guó)內(nèi)最大型建站公司，大部分老同事都曾經(jīng)是程序前端設(shè)計(jì)甚至推廣這樣一條龍為客戶提供服務(wù)。

史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)

他們本質(zhì)上就是從一名開發(fā)人員入行，所以他們會(huì)從實(shí)現(xiàn)效果端來規(guī)劃設(shè)計(jì)，跟后來網(wǎng)頁設(shè)計(jì)崗獨(dú)立后完全不同。蠻多網(wǎng)頁設(shè)計(jì)師其實(shí)根本不管程序?qū)崿F(xiàn)問題，也因此產(chǎn)生出更多更好的視覺效果，反推程序開發(fā)與前端制作的進(jìn)步。當(dāng)時(shí)在公司經(jīng)常見到的就是網(wǎng)頁設(shè)計(jì)跟前端或者開發(fā)同事“干架”，爭(zhēng)論要點(diǎn)就是很多效果程序根本做不出來。

史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)

這樣的事情其實(shí)一直在全世界發(fā)生，所以網(wǎng)站制作技術(shù)也是以飛一般的速度在發(fā)展。比如我剛剛學(xué)會(huì) Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來，而程序開發(fā)端則是 asp 到 asp·net 到 php 到 java 等不同開發(fā)語言在不斷進(jìn)化。

史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)

這樣的變化結(jié)果就是不斷優(yōu)化網(wǎng)頁設(shè)計(jì)的表現(xiàn)效果。

那時(shí)候我們往往在掌握一門自認(rèn)為很牛的必殺技后不到兩年就也許會(huì)過時(shí)，最典型例子莫過于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因?yàn)槿瞬畔∪?，收入可以是我們?2-3 倍，那時(shí)候最流行就是用 flash 做所謂的“體驗(yàn)館”。

全 Flash 網(wǎng)站

“體驗(yàn)館”的大致效果就是能在網(wǎng)站場(chǎng)景中做一些換部件，換顏色，或者點(diǎn)擊指引箭頭切換畫面等操作。印象中當(dāng)時(shí)有一個(gè)奢侈品平臺(tái)站就是純 flash 網(wǎng)站，開發(fā)制作費(fèi)用高達(dá) 300 多萬。

但好景不長(zhǎng)，因?yàn)橹悄苁謾C(jī)的崛起與 4G 通信技術(shù)的發(fā)展，互聯(lián)網(wǎng)的主陣地慢慢往移動(dòng)端遷移，而智能手機(jī)中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網(wǎng)頁設(shè)計(jì)從業(yè)者可以說見證了全過程。

全 Flash 網(wǎng)站

當(dāng)時(shí)身邊就有同事因?yàn)榫?flash 被挖去甲方企業(yè)開發(fā)純 flash 的眼鏡商城，據(jù)說后來項(xiàng)目就沒發(fā)展起來。

說到商城，網(wǎng)頁設(shè)計(jì)還有一個(gè)重要的主題變化，就是從企業(yè)網(wǎng)站到平臺(tái)網(wǎng)站到電子商城再到手機(jī)網(wǎng)站，App 應(yīng)用，公眾號(hào)，小程序這樣的不斷切換。到了移動(dòng)端其實(shí)網(wǎng)頁設(shè)計(jì)就被“UI 設(shè)計(jì)”（User Interface 用戶界面）這樣更專業(yè)化的稱謂取代。

史太濃 2013 年前后的 UI 設(shè)計(jì)

因?yàn)楦锩缘钠聊挥|摸技術(shù)的誕生，很多網(wǎng)站本身就可以通過觸屏控制，所以從定義上來說，UI 設(shè)計(jì)可以說包含了網(wǎng)頁設(shè)計(jì)。

史太濃 2013 年前后的網(wǎng)頁設(shè)計(jì)

隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展其實(shí)也拔高了 UI 設(shè)計(jì)門檻，因?yàn)橐紤]很多交互體驗(yàn)問題與技術(shù)規(guī)格標(biāo)準(zhǔn)，有點(diǎn)像當(dāng)時(shí)烏爾姆學(xué)院做產(chǎn)品設(shè)計(jì)那一套，有很多理科屬性的知識(shí)融入進(jìn)來。

所以網(wǎng)頁設(shè)計(jì)經(jīng)過僅僅 30 年的發(fā)展，就走向細(xì)分領(lǐng)域的拆解，分裂出企業(yè)網(wǎng)站設(shè)計(jì)（偏向品牌與廣告）、電商設(shè)計(jì)（偏向營(yíng)銷）跟移動(dòng)端設(shè)計(jì)（偏向交互體驗(yàn)）。

史太濃 2018 年前后的電商網(wǎng)站設(shè)計(jì)

但不管如何，這個(gè)過程中平面設(shè)計(jì)的本質(zhì)屬性仍然沒變，只是要解決的問題更多元化，更具體了。

根據(jù)歷史紀(jì)錄，美國(guó)的設(shè)計(jì)師杰西卡·哈芳德（JessicaHelfand）是較早以平面設(shè)計(jì)師身份參與到網(wǎng)頁設(shè)計(jì)中的，比如 90 年代她為美國(guó)“發(fā)現(xiàn)頻道”設(shè)計(jì)了網(wǎng)站。

美國(guó)“發(fā)現(xiàn)頻道”90 年代的網(wǎng)站

哈芳德生于 1960 年，目前還活躍于設(shè)計(jì)圈，她也許是最有資格感嘆互聯(lián)網(wǎng)設(shè)計(jì)形式劇烈變化的人之一。

杰西卡·哈芳德

本期內(nèi)容沒有談及太多具體人物及作品，因?yàn)樵谟邢奁锉酒趦?nèi)容已經(jīng)高度濃縮，更多是在給大家整理一個(gè)框架。

關(guān)于網(wǎng)頁設(shè)計(jì)發(fā)展的經(jīng)歷，也歡迎大家根據(jù)自己的體會(huì)參與到討論中，說出你們的故事。

本期故事講到這里，感謝各位，下期再會(huì)！

作者：設(shè)計(jì)史太濃

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）

網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？

網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！

網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！

移動(dòng)端網(wǎng)頁在今天雖然已經(jīng)變得越來越重要，但我們?cè)谌粘Ｊ褂弥幸廊粫?huì)遇到一些糟糕的頁面。近日，開發(fā)者Umer Mansoor就總結(jié)了開發(fā)移動(dòng)網(wǎng)頁時(shí)應(yīng)該避免的“七宗罪”。

在移動(dòng)端方寸地，有細(xì)節(jié)才能抓住用戶，可以參閱這《60個(gè)以小見大的設(shè)計(jì)細(xì)節(jié)！》，保證會(huì)學(xué)到很多。還有，記得不要犯《ANDROID應(yīng)用中十大常見UX錯(cuò)誤》

一、頁面加載緩慢：

眾所周知網(wǎng)頁加載速度是網(wǎng)站性能的一項(xiàng)重要衡量指標(biāo)，畢竟很多時(shí)候用戶并不總是在WiFi狀態(tài)下瀏覽網(wǎng)頁，所以加載緩慢無疑是移動(dòng)頁面七宗罪之首。移動(dòng)網(wǎng)頁在設(shè)計(jì)時(shí)應(yīng)該避免集成過多高分辨率的圖片以及累贅的腳本文件。

二、排版凌亂：

當(dāng)網(wǎng)頁映入眼前，凌亂的文字排版當(dāng)然也是訪客難以忍受的。就像人們?cè)诂F(xiàn)實(shí)生活中傾向于和思路清晰的人交流一樣，當(dāng)用戶和網(wǎng)頁“交流”時(shí)也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動(dòng)網(wǎng)頁應(yīng)該避免的設(shè)計(jì)誤區(qū)之一。比如Eurosmartz的移動(dòng)版完全不像是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)頁。

三、導(dǎo)航功能不易使用：

隨著移動(dòng)設(shè)備性能的提升，很多移動(dòng)網(wǎng)頁設(shè)計(jì)者傾向于在移動(dòng)端堆疊更多的內(nèi)容，這時(shí)導(dǎo)航功能就變得必不可少了?？芍T多移動(dòng)頁面在設(shè)計(jì)導(dǎo)航功能時(shí)又沒有足夠重視其可操控性，比如按鈕太過緊密、鏈接間距過小、菜單過于隱蔽等等。各種社交網(wǎng)站的點(diǎn)贊功能尤其容易在滑動(dòng)網(wǎng)頁時(shí)誤點(diǎn)擊。蹩腳的導(dǎo)航無疑嚴(yán)重影響了用戶和網(wǎng)頁“互動(dòng)”的過程，以至于有些用戶要“抱怨”自己手指太肥。

四、桌面端和移動(dòng)端頁面風(fēng)格差異巨大：

某些時(shí)候我們可能會(huì)遇到一些桌面端和移動(dòng)端頁面風(fēng)格差異巨大的站點(diǎn)，比如Toybox。一些對(duì)此站點(diǎn)不熟悉的用戶在從Toybox的桌面端跳轉(zhuǎn)到移動(dòng)端時(shí)，也許很難意識(shí)到這是同一個(gè)網(wǎng)站的兩個(gè)不同版本。雖然Toybox桌面端的動(dòng)態(tài)效果挺好，但這種會(huì)給用戶造成極大困惑的設(shè)計(jì)明顯難以得到用戶的喜愛。

五、彈窗：

網(wǎng)頁彈窗在桌面端已經(jīng)令用戶厭煩不已，可不幸的是一些移動(dòng)端的網(wǎng)頁設(shè)計(jì)者還是把其帶到了移動(dòng)頁面上。毫無疑問由于移動(dòng)設(shè)備屏幕尺寸的限制在移動(dòng)端彈窗明顯會(huì)有更好的傳播效果，但無疑也會(huì)遭受到用戶更多的厭惡。

六、自動(dòng)重定向：

當(dāng)用戶使用iPad訪問某一個(gè)網(wǎng)站時(shí)將其自動(dòng)重定向到適配iPad的版本，這聽上去的確是一個(gè)好想法，可在實(shí)際操作中一樣會(huì)遇到問題。比如當(dāng)一個(gè)網(wǎng)站的移動(dòng)版由于以上的種種問題讓用戶感到難以接受而想切換回桌面版時(shí)，自動(dòng)重定向基本上讓用戶陷入了死循環(huán)。此外由于重定向而導(dǎo)致瀏覽器無法打開網(wǎng)頁的現(xiàn)象也時(shí)常出現(xiàn)。所以在使用自動(dòng)重定向功能時(shí)應(yīng)該三思而行。

七、橫幅廣告：

作為用戶當(dāng)然可以理解網(wǎng)頁開發(fā)者在頁面上設(shè)置一些廣告，可橫幅形式的廣告無疑應(yīng)該被歸為“七宗罪”之一。從互聯(lián)網(wǎng)的發(fā)展歷程來看，橫幅廣告的思維好像還停留在1999年，可現(xiàn)在已經(jīng)是2013年末尾了。

總結(jié)看來，Umer Mansoor列舉了頁面加載緩慢、排版凌亂、導(dǎo)航功能不易使用、桌面端和移動(dòng)端頁面風(fēng)格差異巨大、彈窗、自動(dòng)重定向、橫幅廣告共七種讓移動(dòng)頁面體驗(yàn)糟糕的“罪惡”。如果自己設(shè)計(jì)的頁面中包含這其中的某些項(xiàng)，也許是時(shí)候考慮做一些改進(jìn)了。

作者：程遠(yuǎn)

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）

網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？

網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！

網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！

提到網(wǎng)頁設(shè)計(jì)，最先想到的是當(dāng)今主流的韓國(guó)設(shè)計(jì)和扁平化設(shè)計(jì)，當(dāng)然個(gè)性化排版、視頻代替文本、全屏大視野、滾動(dòng)視差、多平臺(tái)全適應(yīng)等設(shè)計(jì)形式已經(jīng)進(jìn)入了我們的視野。西方簡(jiǎn)單、功能性的美學(xué)精神”少即是多”這一設(shè)計(jì)理念攻占了我們的大腦，很多時(shí)候，在開始做設(shè)計(jì)之前腦子里會(huì)來回浮現(xiàn)這些風(fēng)格的設(shè)計(jì)。那么，怎樣在主流設(shè)計(jì)方式中做出有自己特色的網(wǎng)站呢？我們從以下幾點(diǎn)介紹在大環(huán)境下提升網(wǎng)站設(shè)計(jì)形式的方法。

那么，怎樣在主流設(shè)計(jì)方式中作出自己的特色呢？我們從以下幾點(diǎn)介紹些提升網(wǎng)站設(shè)計(jì)形式的方法：

> 賦予民族文化特點(diǎn)

在眾多的設(shè)計(jì)師追逐主流風(fēng)格的同時(shí)，民族文化感覺的設(shè)計(jì)越來越少，不光在國(guó)內(nèi)，在世界各地都出現(xiàn)了這樣的情況。當(dāng)然不可否認(rèn)還有很多設(shè)計(jì)師在為民族設(shè)計(jì)而努力。下面這幾個(gè)站點(diǎn)雖然只有簡(jiǎn)單的設(shè)計(jì)和動(dòng)態(tài)效果，但是卻有一種非常淳樸的民族風(fēng)格，這也是最吸引人的地方，每個(gè)細(xì)節(jié)都流露出民族的特點(diǎn)和氣氛。不是只有文化性質(zhì)的網(wǎng)站才能賦予文化設(shè)計(jì)風(fēng)格，在商業(yè)產(chǎn)品類型的設(shè)計(jì)推廣中同樣適用。

日本眼藥水網(wǎng)站，將現(xiàn)代工業(yè)社會(huì)的產(chǎn)物與傳統(tǒng)鬼神文化中的五種妖怪以卷軸、插畫傳統(tǒng)形式展示，與漫天遍地的明星代言廣告形成對(duì)比，同樣是眼干、眼澀、眼疲勞，同樣是以辦公室、上班族為消費(fèi)群，文化創(chuàng)意上的突破使人眼前一亮。

http://www.medical-youkai.jp/

(小編按：那個(gè)妹子是我的女神橫山美雪，嗎？)和風(fēng)服裝店，日本特色的風(fēng)鈴、簡(jiǎn)約的插畫，”和風(fēng)”，大和民族追求與自然的和諧之美，從這個(gè)服裝網(wǎng)站上我們可以看到日本設(shè)計(jì)文化體現(xiàn)了對(duì)自然的尊重，反映了樸素美學(xué)的內(nèi)斂性格。

http://hanamichiya.jp/

緬甸傳統(tǒng)舞蹈音樂合奏網(wǎng)站，緬甸古代戲劇舞蹈，是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術(shù)中產(chǎn)生的?？軕蛑械囊恍┕?jié)目和各種傀儡角色的不同的舞蹈動(dòng)作被大量移植到現(xiàn)代緬甸舞中?？芪柚小笨懿健?、”傀儡爬跳”等成為現(xiàn)代緬甸舞的基本動(dòng)作，是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報(bào)設(shè)計(jì)形式，突出舞蹈者主體，用在網(wǎng)站上更顯神秘。

http://www.itwillbeastounding.com/

俄羅斯莫斯科大劇院是莫斯科的地標(biāo)性建筑之一，是莫斯科有名的芭蕾舞與歌劇劇院；是俄羅斯歷史最悠久的劇院，享譽(yù)天下，是世界上最著名的劇院之一。它不僅繼承了歐洲芭蕾的歷史傳統(tǒng)，更重要的是，在俄羅斯豐富的民族音樂與舞蹈的沃土上，建立和發(fā)展了自己的芭蕾體系。將沙俄古典風(fēng)格融匯于設(shè)計(jì)版塊中，同樣大量留白處理給了圖片展示更多的空間。

http://www.bolshoi.ru/

> 與網(wǎng)站主題相關(guān)的高清圖片的應(yīng)用

大面積整站或局部性使用高清圖片，在之前設(shè)計(jì)分享中我們見到了很多案例，這里介紹幾個(gè)日本以圖片展示為主的網(wǎng)站，精致的圖片不需要過多的裝飾。

坂本龍一是日本當(dāng)代最讓人尊崇的音樂家之一，音樂領(lǐng)域涉獵甚廣，在先鋒電子樂領(lǐng)域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，為1992年巴塞羅那奧運(yùn)會(huì)開幕式譜曲并擔(dān)任指揮……坂本龍一成為”大眾明星”的原因，一方面在于他個(gè)人對(duì)于電子、搖滾、爵士等多重音樂風(fēng)格極具靈感的把握；另一方面則在于他能在商業(yè)、藝術(shù)和實(shí)驗(yàn)之間找到平衡點(diǎn)，作出既有實(shí)驗(yàn)意義又有動(dòng)聽旋律的作品。

http://moonlinx.jp/special_issue/003/

日本設(shè)計(jì)強(qiáng)調(diào)材料的內(nèi)在之美，注重與大自然的和諧，珍惜自然材質(zhì)，這與日本自然資源相對(duì)稀缺有很大的關(guān)系。日式風(fēng)格中，回歸自然是最大的特色，推崇貼近自然、強(qiáng)調(diào)自然主義，讓使用者有置身自然的感覺。用產(chǎn)品的工藝制作圖片作為網(wǎng)站的主體和背景，拉近了觀者與產(chǎn)品的距離。

http://www.ishiyamasenko.co.jp/

傳統(tǒng)工藝美妝店鋪，單從cover引導(dǎo)頁的圖片就能看出該店鋪的賣點(diǎn)。特色產(chǎn)品圖加上柔美的動(dòng)態(tài)散花效果，為網(wǎng)站加分，導(dǎo)航中加入商城外鏈可直接在線購物，利于用戶體驗(yàn)。

http://www.kazurasei.co.jp/

日本聯(lián)合新聞社，社內(nèi)的場(chǎng)景圖片很好的展示要表達(dá)的主旨。

http://go-jimbou.info/

街區(qū)是一個(gè)城市的重要標(biāo)志性特色，將這樣雜亂無章的舊街道作為網(wǎng)站通欄頭圖，配合簡(jiǎn)介的形式設(shè)計(jì)，也能很出彩。

美寶蓮日本網(wǎng)站，將實(shí)體店作為網(wǎng)站背景，搭建成實(shí)景的巨幅海報(bào)展板，這種形式是否比存粹的明星代言更接地氣些？！

http://www.maybelline.co.jp/

對(duì)比下面兩個(gè)日韓服飾類網(wǎng)站，可以看出日本網(wǎng)站在圖片選擇上更注重產(chǎn)品本身，極具質(zhì)感和張力的圖片真實(shí)樸素，力求展示產(chǎn)品與人的關(guān)系。而韓國(guó)則更注重整體的氛圍的搭配，通過環(huán)境的營(yíng)造來提升產(chǎn)品的品味和檔次，產(chǎn)品只是搭建系統(tǒng)中的一部分。

http://quael.jp/

> 對(duì)圖片進(jìn)行特殊處理

圖素質(zhì)量低是我們?cè)谠O(shè)計(jì)過程中經(jīng)常遇到的情況，我們通常用到最多的方法莫過于高斯模糊、柔光、濾色、添加紋理質(zhì)感，將圖片處理成做舊、仿古、年代感、單色……又會(huì)是什么效果呢？！

箔工藝，金銀箔具有很好的延展性，將金銀打展成薄膜狀，與絹結(jié)合，應(yīng)用于古代服飾中。此文化再京都有四百余年的歷史，現(xiàn)在主要用于文物修復(fù)。取箔工藝品的一個(gè)局部，重新組合作為整張背景，貼片處理的文字與背景的融合更顯古代文化的精妙。

http://www.hiroto-rakusho.com/

人物素材粗糙的情況下，采用水彩的濾鏡效果，背景加入點(diǎn)狀網(wǎng)格，極具形勢(shì)感的箭頭做引導(dǎo)，個(gè)性十足。

http://www.kanenavi.jp/

全日本劍道聯(lián)合會(huì)，網(wǎng)站采用時(shí)間軸展示的形式，從1950－2000年每一期獲勝者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差較大，所以網(wǎng)站設(shè)計(jì)成了古樸做舊的年代感風(fēng)格，加入很多早期照片中的截圖作為插畫元素，確保了風(fēng)格統(tǒng)一。

http://www.kendo.or.jp/champ/#/about

Daum是韓國(guó)最大的門戶網(wǎng)站之一，以郵件和社區(qū)產(chǎn)品為核心，是韓國(guó)第一個(gè)電子郵件服務(wù)網(wǎng)站Hanmail的前身。牛仔藍(lán)單色照片處理更像電影和動(dòng)漫場(chǎng)景。

http://www.daum.net/

也有整體黑白加入局部彩色色的案例，將復(fù)雜圖片簡(jiǎn)化處理，對(duì)于簡(jiǎn)潔的頁面設(shè)計(jì)來說，這是個(gè)不錯(cuò)的方法。每個(gè)版塊都是黑白照片做背景，文字做JS動(dòng)態(tài)移入效果，在圖片的某個(gè)元素上加入VI主體顏色，故事感很強(qiáng)。

http://www.streetreach.org/

> 創(chuàng)意圖形化環(huán)境的設(shè)計(jì)

手繪、矢量圖形設(shè)計(jì)的圖形場(chǎng)景環(huán)境，用在食品、旅游、地圖、嬰幼兒等方向的設(shè)計(jì)上更容易拉近消費(fèi)者，給人放松愉悅的心情。相比圖文混排更貼近生活。

狗糧推廣網(wǎng)站，將網(wǎng)站設(shè)計(jì)成寵物樂園，各個(gè)品種的狗狗們都有自己的一段視頻，內(nèi)容是狗狗們對(duì)幾種產(chǎn)品的喜好對(duì)比。

http://www.solvida.jp/solpa/#/MainPage/001

企劃創(chuàng)意公司，技術(shù)上只是一個(gè)簡(jiǎn)單的FLASH站，但空間跨越性思維設(shè)計(jì)卻給這個(gè)網(wǎng)站帶來了不凡的效果。由局部的空間延伸出各種異空間的交匯，加入互動(dòng)效果而引發(fā)的更多驚喜也進(jìn)一步提升了用戶參與度。

http://www.aquacp.com/

用3D拼圖建造起一個(gè)小型城市，4個(gè)建筑代表網(wǎng)站要展示的4個(gè)心理學(xué)的具體分類，建筑物夸張的擬人化動(dòng)作實(shí)現(xiàn)頁面跳轉(zhuǎn)。

http://www.soc.nara-u.ac.jp/kokoro/

日本兒童專用雞蛋，此網(wǎng)站將所有產(chǎn)品相關(guān)內(nèi)容裝進(jìn)雞蛋中，食用后產(chǎn)生的剩余物可大變身繼續(xù)用于其它物品的生產(chǎn)，循環(huán)利用避免環(huán)境污染，所以在首頁展示上才會(huì)有類似瀑布流的大量周邊產(chǎn)品展示。網(wǎng)站首頁是自動(dòng)向下播放展示的瀑布流效果，hover及跳轉(zhuǎn)都伴隨非?？蓯鄣囊魳泛蛣?dòng)態(tài)，恰當(dāng)音樂的播放和觸碰hover的小驚喜也會(huì)給網(wǎng)站增添色彩。

http://www.kewpie.co.jp/egg/

日本山形放送局的地區(qū)地形圖，大家都看過現(xiàn)實(shí)版的景點(diǎn)手繪地圖，該網(wǎng)站也用了這種形式。比較有意思的是他的功能非常強(qiáng)大，是一個(gè)可放大縮小的真實(shí)版地圖，沒有跳轉(zhuǎn)，完整的手繪google地形圖。以小青蛙作為代言人對(duì)每個(gè)景區(qū)的優(yōu)勢(shì)作手繪圖形注解，以當(dāng)前彈出的形式展示該地的歷史、自然、觀光、社會(huì)、祭祀、美食、傳統(tǒng)等信息的詳細(xì)圖文、視頻解析。

http://www.nhk.or.jp/yamagata/mitekero/

九州熊本天草村,用動(dòng)態(tài)圖形化完整的對(duì)天草村進(jìn)行了設(shè)計(jì)演繹，重要景點(diǎn)默認(rèn)做了動(dòng)態(tài)處理，跳轉(zhuǎn)后都是另一個(gè)完整的實(shí)景矢量圖。對(duì)景點(diǎn)中的標(biāo)志性小建筑做了頁面彈出實(shí)景詳細(xì)講解。

http://www.amakusamura.jp/

這種形式在新加坡兒童樂園的設(shè)計(jì)中也同樣得到了使用。

設(shè)計(jì)風(fēng)格也是體現(xiàn)一個(gè)國(guó)家文化的重要方式，嚴(yán)寒漫長(zhǎng)的冬季成為俄羅斯的標(biāo)志，在頁面上打造一個(gè)同色系的冰雪世界，反而使彩色的主體信息更加突出。

> 賦予與產(chǎn)品相關(guān)的交互形式，重視用戶參與性

一個(gè)優(yōu)秀的網(wǎng)站它的交互性也非常重要，擁有好的交互性可以讓瀏覽者有著更高的參與感，并且也能增大網(wǎng)站自身傳播效果，還可以提高用戶對(duì)自己的網(wǎng)站的依賴性和忠誠(chéng)度。

Panasonic剃須刀產(chǎn)品JS展示站，設(shè)計(jì)形式與松下電子實(shí)現(xiàn)”星羅棋布的網(wǎng)絡(luò)社會(huì)”和”與地球環(huán)境共存”的理想呼應(yīng)，整站的背景都是由動(dòng)線點(diǎn)組成的動(dòng)態(tài)圖形面拼合而成，圖片和文字的展示停留在這星羅棋布的空間組合中。此時(shí)網(wǎng)站要表達(dá)的不僅是展示產(chǎn)品，還有松下文化。

http://panasonic.jp/shaver/lamdash/dna/index.html

東京交響樂團(tuán)，該網(wǎng)站對(duì)用戶的參與性做到了極致，從網(wǎng)站主內(nèi)容上沒有關(guān)于東京交響樂團(tuán)的圖片文字信息，用戶可以在頁面專屬音樂鍵盤提示的情況下，用獨(dú)創(chuàng)音樂的新穎形式創(chuàng)作屬于自己的個(gè)性音樂，并對(duì)音樂逐幀做了記錄，可以返回欣賞創(chuàng)作成果，并分享到各網(wǎng)站。

http://tokyocitysymphony.com/

SPECIAL-T 綠茶網(wǎng)站，玩過網(wǎng)游的同學(xué)們都知道游戲中做任務(wù)有地圖尋路功能，該網(wǎng)站采用了這個(gè)原理，在大海中建立類似于西游記的龍宮，用戶在沒有任何導(dǎo)視的情況下，360度無死角在海洋里自由探尋，最終的成果便是在一段時(shí)間的遨游后到達(dá)網(wǎng)站的終點(diǎn)產(chǎn)品引導(dǎo)頁，闡釋special的感受。

http://ogreen.special-t.com/en/

> 視頻與特殊版式的結(jié)合

如果你想要一種優(yōu)雅而直觀的產(chǎn)品展示方式，全屏視頻網(wǎng)站是一個(gè)不錯(cuò)的選擇。全屏視頻網(wǎng)站能一瞬間點(diǎn)燃人們的好奇心，當(dāng)然也可能馬上讓訪客失去興趣，這都取決于你是否能夠駕馭這類高大上的設(shè)計(jì)風(fēng)格。

日本福祉大學(xué)，校園內(nèi)外學(xué)生學(xué)習(xí)、活動(dòng)氛圍的場(chǎng)景視頻作為背景播放展示，視頻上一層則是手動(dòng)切換的內(nèi)容介紹字幕，一個(gè)大學(xué)的網(wǎng)站更像是一個(gè)微電影展示。

http://www.n-fukushi.ac.jp/lifestyle/

Mikihiko Kyobashi 海底攝影記錄展示站，整站視頻展示配上海洋真實(shí)的聲音。透過視頻看到的海洋不是一汪死水，陽光穿透海面，碧海藍(lán)天，比靜態(tài)的照片更能展示生命的氣息。

http://www.mikihiko.com/

bc服裝網(wǎng)站，暗色的動(dòng)態(tài)視頻做背景，與前層簡(jiǎn)單的圖文排版形成反差，圖片hover的3D立體效果令人耳目一新。

http://bananacafe.com.br/

圖片與視頻的混排切換展示，拉伸后展開整站播放效果。

http://getgoingtoday.org/beyond

日清食品，微距拍攝的視頻，用時(shí)間倒數(shù)計(jì)時(shí)的方式，記錄在這一碗日清方便面泡好的3分鐘內(nèi)，世界各國(guó)家不同膚色年齡的人群品嘗日清食品的狀態(tài)緩慢特寫，加入了用各國(guó)語言描述倒數(shù)計(jì)時(shí)的聲音，視頻中間穿插有和日清logo呼應(yīng)的裝飾語言，隱藏在頁面下方的時(shí)間軸可以找到每一分每一秒的畫面禎，時(shí)間可自行選擇切換到想要的那一幀。

http://www.nissin.com/jp/

結(jié)語：

以上五點(diǎn)都是當(dāng)下主流設(shè)計(jì)中另辟蹊徑找創(chuàng)意，簡(jiǎn)單五點(diǎn)很難將所有好的創(chuàng)意都涵蓋在內(nèi)，除此之外大家肯定也有更好更多的想法。網(wǎng)頁設(shè)計(jì)總是立足于瀏覽者的審美、文化，以及信息傳播的習(xí)慣、方式，還有網(wǎng)頁開發(fā)技術(shù)的進(jìn)步。對(duì)于絕大部份網(wǎng)站來說，沒有強(qiáng)大的專業(yè)力量去研究用戶新的習(xí)慣和需求，也不可能開發(fā)出新的技術(shù)功能，只能在一些大型的網(wǎng)站中窺見一些發(fā)展的趨勢(shì)，再從中找到自身可借鑒的地方。這種借鑒如果成為普遍性，那我們也很難在互聯(lián)網(wǎng)的大潮中有自己的一席之地。網(wǎng)頁設(shè)計(jì)已逐漸往多元化方向發(fā)展，更好的創(chuàng)意、更新的想法都來源于我們真實(shí)的生活感受，想要我們的網(wǎng)站變得更強(qiáng)大、擁有更好的用戶體驗(yàn)，無可厚非，我們應(yīng)該做的是大膽、大步地去嘗試。

作者：ranger

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）

網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？

網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！

網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！

大家好，我是 Clippp。今天為大家分享的是「菜單導(dǎo)航」。一個(gè)簡(jiǎn)單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因?yàn)闃邮降牟町愒诠δ苌线@些菜單也會(huì)出現(xiàn)差異性。

我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設(shè)計(jì)含義和設(shè)計(jì)目的，不能因?yàn)楹?jiǎn)單常見而忽視了功能的內(nèi)核。

漢堡菜單

關(guān)鍵詞：橫條、多個(gè)菜單選項(xiàng)

這個(gè)圖標(biāo)的樣式簡(jiǎn)潔易懂，通常位于網(wǎng)頁和 App 的上下角，用來告知用戶這個(gè)按鈕之外還有更多內(nèi)容可以探索。

當(dāng)產(chǎn)品有多個(gè)菜單選項(xiàng)時(shí)，考慮使用漢堡圖標(biāo)來顯示，但盡可能避免在桌面視圖中使用。

垂直三點(diǎn)式菜單

關(guān)鍵詞：垂直、內(nèi)嵌菜單

通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項(xiàng)的圖標(biāo)，打開的內(nèi)容往往是一個(gè)較小的內(nèi)嵌菜單而不是整個(gè)全新的頁面。

水平三點(diǎn)式菜單

關(guān)鍵詞：水平、內(nèi)嵌菜單、web

水平三點(diǎn)式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關(guān)項(xiàng)的操作。

因?yàn)閳D標(biāo)樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。

九宮格菜單

關(guān)鍵詞：子分類、子功能

九宮格菜單通常用于打開同一產(chǎn)品中包含不同子產(chǎn)品或子功能，可以在它們之間快速切換，此圖標(biāo)常位于產(chǎn)品主頁的右上角。

過濾式菜單

關(guān)鍵詞：過濾、排序

過濾式菜單由三行不同長(zhǎng)度的線段水平疊放而成，是最廣泛使用的過濾符號(hào)。可以將過濾式菜單與“排序方式”選項(xiàng)結(jié)合使用，或者與全局過濾器結(jié)合使用。

漢堡菜單變體

關(guān)鍵詞：樣式特殊、時(shí)尚感更強(qiáng)

作為漢堡圖標(biāo)的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會(huì)比較少，更常用在充滿現(xiàn)代感、時(shí)尚感和藝術(shù)感的網(wǎng)站上。

最后

不同的樣式可能代表著截然不同的設(shè)計(jì)目的，常思考這些小而精的細(xì)節(jié)，是保證產(chǎn)品體驗(yàn)提升的關(guān)鍵。

慢來比較快，如覺得有幫助，請(qǐng)點(diǎn)個(gè)贊，謝謝！

作者：Clip設(shè)計(jì)夾

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

金剛區(qū)是什么，想必大家都有所了解。

沒有的話看這張圖就懂了：

圖片來源：淘寶首頁

我在微信上搜了一下，發(fā)現(xiàn)大部分討論金剛區(qū)設(shè)計(jì)的文章，都是在講怎么畫圖標(biāo)。

但是我自己在使用各大 APP 的過程中，發(fā)現(xiàn)很多金剛區(qū)并不是那么好用，而且這跟圖標(biāo)好不好看無關(guān)。

金剛區(qū)設(shè)計(jì)不好，會(huì)對(duì)我的使用造成直接影響：

1. 不夠清晰易懂根本不想去看
2. 首次使用找不到需要的內(nèi)容
3. 下次使用記不住圖標(biāo)的樣子
4. 圖標(biāo)設(shè)計(jì)得怪怪的不好理解

我今天就來總結(jié)一下，對(duì)于金剛區(qū)設(shè)計(jì)的交互/體驗(yàn)思考：

• 數(shù)量
• 順序
• 顏色
• 樣式

數(shù)量

金剛區(qū)里有多少項(xiàng)比較合適？

這其實(shí)是米勒法則（Miller’s Role）的典型運(yùn)用了。

如果你還不太了解米勒法則，看看下面這張圖里的詞語：

現(xiàn)在，半分鐘回憶一下，你記住了多少個(gè)？

……

大部分人能記住 5~9 個(gè)。

米勒的研究發(fā)現(xiàn)，普通人的工作記憶（Working Memory）只有 7±2 個(gè)信息塊。

如果給的信息超出了這個(gè)數(shù)字，大部分人也只能記住這么多。

所以說，金剛區(qū)里的圖標(biāo)數(shù)量，最好也維持在這個(gè)數(shù)，否則就是對(duì)用戶的記憶能力要求過高了。

通常來，4 個(gè)圖標(biāo)很輕松，說 6 個(gè)圖標(biāo)是比較理想的，8~9 個(gè)就有點(diǎn)吃力了，10 個(gè)就超綱了。

例如支付寶這個(gè)就過分了，好在這只是工具類產(chǎn)品，復(fù)雜一點(diǎn)也沒辦法：

順序

人們?cè)诳撮喿x文字時(shí)，視線軌跡是之字形：

人們?cè)陂喿x表格時(shí)，視線軌跡是除草機(jī)形：

上圖來源：這樣設(shè)計(jì)表格，看著真難受！

雖然金剛區(qū)的眼動(dòng)圖我沒有，但第一步肯定是從左上角開始往右掃。

所以，用戶最有可能使用的圖標(biāo)，應(yīng)該從左到右排在最上面一行，最不常用的可以排在右下角。

例如美團(tuán)外賣這個(gè)設(shè)計(jì)，看著就挺合理。不但把重要內(nèi)容放在第一行，而且還做了很大的視覺區(qū)分：

不過一些不愁流量的 APP 會(huì)選擇把黃金位置用做商業(yè)宣傳，難免損失點(diǎn)易用性。

顏色

1. 仿真圖標(biāo)

如果追求質(zhì)感，多半會(huì)使用物品本身的顏色，例如每日優(yōu)鮮這個(gè)：

這種圖標(biāo)就沒什么顏色好討論了，注意一下整體和諧就好。

2. 數(shù)量較少

如果圖標(biāo)數(shù)量不多可以使用一個(gè)顏色，那么顏色上，同樣沒什么好討論的。

例如 QQ 音樂：

3. 數(shù)量適中

如果圖標(biāo)數(shù)量在 7 個(gè)左右或以內(nèi)，那么可以每種顏色的圖標(biāo)都來一個(gè)，這樣用戶也能記住大概什么顏色代表什么。

例如京東這樣：

4. 數(shù)量很多

圖標(biāo)數(shù)量遠(yuǎn)超過 7 時(shí)，就不可能每種顏色來一個(gè)了，否則顏色都不夠用了。

如果還是想要?jiǎng)澐诸伾梢詫㈩愋妥鳛橐罁?jù)，這樣用戶在尋找圖標(biāo)時(shí)會(huì)比較有方向。

當(dāng)然，其實(shí)也可以簡(jiǎn)單點(diǎn)，干脆都一個(gè)顏色，例如聯(lián)通手機(jī)營(yíng)業(yè)廳：

樣式

1. 底框

一些產(chǎn)品為了統(tǒng)一感，會(huì)用圓圈或者圓角矩形，把所有圖標(biāo)都框起來。

這樣視覺上是好處理了，但交互上很不推薦，因?yàn)闀?huì)大大降低圖標(biāo)的識(shí)別度，乍眼一看都長(zhǎng)一樣。

這種底框在主流產(chǎn)品里已經(jīng)很少見了，不過這么做的設(shè)計(jì)師還是不少：

這種圖標(biāo)數(shù)量少，有顏色區(qū)分還好，如果數(shù)量多又一個(gè)顏色，那就很難辨認(rèn)了。

風(fēng)格

縱觀常見的金剛區(qū)圖標(biāo)，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。

聯(lián)通手機(jī)營(yíng)業(yè)廳

QQ 音樂

京東

美團(tuán)外賣

每日優(yōu)鮮

任何樣式都能讓用戶識(shí)別和記憶，但是不同的樣式給人的感官不同。

真實(shí)性越高的視覺樣式，就越容易給人高級(jí)的感覺；相反真實(shí)性越低的視覺樣式，越容易給人簡(jiǎn)單邊界的感覺。

總結(jié)

我發(fā)現(xiàn)做設(shè)計(jì)時(shí)，從不同的角度會(huì)帶來截然不同的思考。

今天這篇分析，算是一個(gè)以交互體驗(yàn)為主，融合了一些視覺角度，希望帶給大家一些靈感~

作者：ZoeYZ

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！

本文從圖標(biāo)類型、系統(tǒng)圖標(biāo)的尺寸和網(wǎng)格、圖標(biāo)的繪制、導(dǎo)出和命名等6個(gè)方面，幫你快速掌握圖標(biāo)設(shè)計(jì)規(guī)范。

作者：白樺林溪

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！

在內(nèi)容為主的用戶界面設(shè)計(jì)上，圖標(biāo)起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對(duì)圖標(biāo)字體的精細(xì)度與視覺匹配度也有了更高的要求，這對(duì)設(shè)計(jì)師來說也是一個(gè)不小的考驗(yàn)。本篇將介紹目前業(yè)界優(yōu)秀的圖標(biāo)案例，并以日常圖標(biāo)繪制中遇到的問題，解析背后原理給出對(duì)應(yīng)解法。

注：以下部分示例僅為個(gè)人處理方法，僅供參考。

本期提綱：

1. 業(yè)界的優(yōu)秀案例
2. 矢量規(guī)格的效率畫法
3. 圖標(biāo)繪制的注意點(diǎn)
4. 圖標(biāo)中的平衡

業(yè)界的優(yōu)秀案例

“SF Symbols” 是蘋果為 San Francisco 系統(tǒng)字體設(shè)計(jì)的一套內(nèi)置圖標(biāo)合集，每個(gè)符號(hào)圖形都能與所有磅重、大小的文本進(jìn)行自動(dòng)對(duì)齊，達(dá)到與字體無縫結(jié)合的效果。目前已更新到 3.0 版本，根據(jù)應(yīng)用界面中各種使用、展示場(chǎng)景，默認(rèn)提供 3,200 個(gè)符號(hào)各自擁有 9 種磅重，設(shè)計(jì)師可根據(jù)官方提供的合集庫直接引用到設(shè)計(jì)稿中，或使用符號(hào)模板來添加自定義圖標(biāo)。

1. 多種磅重

“SF Symbols” 擁有與 “San Francisco” 字體相呼應(yīng)的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計(jì) 27 種樣式，以達(dá)到與各個(gè)字形最佳的匹配效果。

圖形磅重與比例參考表

圖形比例與字形排列參考

2. 字形參照定位

以字體設(shè)計(jì)方式處理圖形的垂直定位，在設(shè)計(jì)圖標(biāo)時(shí)需要將圖形中心部分放置在模板基線以上的位置，系統(tǒng)讀取時(shí)將根據(jù)圖形基線計(jì)算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進(jìn)行垂直定位，使圖形與文本的基線一致，達(dá)到圖形和文本水平視覺對(duì)齊。

圖形參考線

相同基線下對(duì)齊效果，使圖形重心處于小寫字母區(qū)域

常用的塊級(jí)元素對(duì)齊效果，重心稍微偏下

3. 多色應(yīng)用

通過讀取圖形內(nèi)的分層信息，可賦予每個(gè)分層不同的渲染模式達(dá)到更加豐富的表現(xiàn)形式。

不同渲染模式下的多色效果

4. 圖形本地化適配

除磅重與比例以外，當(dāng)圖形出現(xiàn)需要使用文字表達(dá)含義時(shí)，針對(duì)特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。

矢量規(guī)格的效率畫法

隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設(shè)備上普及，文字和圖標(biāo)在精細(xì)度與匹配度上有了更多的追求，一般應(yīng)用會(huì)根據(jù)常用的字體磅重去定義默認(rèn)圖標(biāo)的粗細(xì)，因此我們會(huì)看到一些圖標(biāo)出現(xiàn)非整數(shù)規(guī)格的情況，這對(duì)新人來說會(huì)造成一定的設(shè)計(jì)門檻。

1. 微信的圖標(biāo)規(guī)格

以微信客戶端為例，需要在 24*24pt 的網(wǎng)格中默認(rèn)使用 1.2pt 線條進(jìn)行繪制，同時(shí)在圖形自然拐角處需要保持外圓內(nèi)方的樣式。

2. 為什么會(huì)有設(shè)計(jì)門檻

對(duì)新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設(shè)計(jì)非整數(shù)規(guī)格圖標(biāo)可以是噩夢(mèng)，即便有經(jīng)驗(yàn)的設(shè)計(jì)師在繪制過程中也會(huì)因?yàn)橛?jì)算路徑余數(shù)而影響設(shè)計(jì)效率，以 Sketch 為例路徑屬性中雖然支持像素對(duì)齊、半像素對(duì)齊和不對(duì)齊像素三種模式，但如果需要繪制 1.2x 描邊時(shí)，我們只能使用不對(duì)齊像素的模式再計(jì)算路徑落點(diǎn)位置，因此需要不斷計(jì)算落點(diǎn)是否處于 0.2、0.8、0.2……

Sketch 的對(duì)齊模式

3. 建議方法：倍化繪制

所以在處理非整數(shù)圖標(biāo)時(shí)我們不妨把畫板等比放大 5 倍，可以獲得一個(gè) 120*120pt 的新畫板同時(shí)描邊放大為 6pt，這時(shí)候我們只需要使用像素對(duì)齊模式直接進(jìn)行繪制即可，同理其他數(shù)值規(guī)格我們也可以使用倍化調(diào)整，使圖形在畫板內(nèi)變成整數(shù)，最直接方式是小數(shù)點(diǎn)后奇偶數(shù)進(jìn)行判斷，奇數(shù)放大 10 倍，偶數(shù)放大 5 倍。輸出資源時(shí)如果使用 svg 這類矢量格式可根據(jù)業(yè)務(wù)需要決定是否縮放輸出，而位圖則根據(jù)所需尺寸進(jìn)行倍數(shù)縮放再輸出。

4. 工具使用差異

使用 Sketch 對(duì)圖形進(jìn)行倍化后繪制和調(diào)整已經(jīng)友好很多了，但是其實(shí) Sketch 中還有不少繪制效率工具是沒有放在默認(rèn)工具欄里的，這里可以根據(jù)需要使用自定義工具欄把這些工具外置。

Sketch 中的路徑工具

Figma 相對(duì)而言路徑編輯功能比較簡(jiǎn)單，但依賴社區(qū)豐富的插件也能達(dá)到對(duì)應(yīng)的效果，這里推薦一些常用的矢量圖形處理插件。

雖然目前 sketch 的圖形繪制功能已經(jīng)很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設(shè)計(jì)的精確度和效率。這時(shí)我們可以把目光轉(zhuǎn)移到一個(gè)老牌的矢量工具上“ Adobe Illustrator ”（后面簡(jiǎn)稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網(wǎng)格本身非常適合矢量繪圖，用來繪制圖標(biāo)也十分便利。

Sketch 與 AI 的對(duì)比，雖不公平但也是事實(shí)……

使用 AI 的網(wǎng)格系統(tǒng)，我們可以設(shè)定符合業(yè)務(wù)需要的對(duì)齊方式、鍵盤增量和網(wǎng)絡(luò)間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復(fù)制粘貼的。

適配自身規(guī)格的網(wǎng)格設(shè)置

使用 AI 自帶的角度旋轉(zhuǎn)功能時(shí)設(shè)置圖形副本數(shù)量，保證了每個(gè)圖形角度和方向都是準(zhǔn)確的。

使用 AI 繪制實(shí)例演示

圖標(biāo)繪制的注意點(diǎn)

1. 等比分布

當(dāng)我們需要繪制等比放大或擴(kuò)散圖形時(shí)，會(huì)遇到一種情況：等邊圖形或圓形可以直接使用工具進(jìn)行等比縮放，但長(zhǎng)矩形或者不規(guī)則圖形等比縮放后會(huì)出現(xiàn)部分點(diǎn)、線不等比，這其實(shí)是一種理解上的誤區(qū)，在把不規(guī)則圖形等比放大時(shí)，我們需要的是點(diǎn)、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會(huì)按圖層中心來進(jìn)行縮放，可能會(huì)造成效果上的誤差。

常見圖形在不同處理方式上產(chǎn)生的差異

清楚原因與差異后，只需選擇對(duì)應(yīng)偏移功能即可達(dá)到理想效果，等距偏移一般矢量工具都會(huì)自帶，只是就使用習(xí)慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對(duì)象菜單中找到，且 AI 額外支持偏移后拐角屬性設(shè)置。

AI 與 Sketch 下通過路徑偏移獲得等距縮放效果

2. 骨架與輸出路徑

日常涉及圖標(biāo)繪制的需求，建議可以先使用描邊進(jìn)行繪制，可以理解為把路徑當(dāng)做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調(diào)整空間。

但同時(shí)需要注意，圖標(biāo)在輸出前需要完全轉(zhuǎn)化為輪廓以及封閉路徑，以保證系統(tǒng)渲染模式的一致，并且這是所有平臺(tái)都要求的。

SF Symbols 對(duì)路徑輪廓化的要求

圖標(biāo)中的平衡

1. 面積配比

對(duì)應(yīng)不同的業(yè)務(wù)，有時(shí)會(huì)基于用戶對(duì)事物的認(rèn)知，直接引用該事物作為基礎(chǔ)圖形進(jìn)行圖標(biāo)繪制。因此會(huì)出現(xiàn)一些穩(wěn)定性弱、長(zhǎng)寬比例相差較大或形體單薄的圖形，而我們會(huì)遵循已有的標(biāo)準(zhǔn)圖標(biāo)柵格進(jìn)行繪制，這樣會(huì)導(dǎo)致部分特征過于明顯的圖形在顯示面積上出現(xiàn)視覺誤差與中心渾濁。情況類似中文字體中出現(xiàn)的中宮、字懷（中宮：漢字重心區(qū)域范圍、字懷：筆畫之間的留白范圍）緊湊。

按標(biāo)準(zhǔn)柵格繪制特征明顯的圖形

這時(shí)可以適當(dāng)把圖形延伸部分進(jìn)行細(xì)微的外擴(kuò)處理，使圖形中心部分視覺上更加舒展。

對(duì)圖形延伸部分外擴(kuò)微調(diào)

2. 視覺對(duì)齊

通常使用工具的對(duì)齊功能實(shí)現(xiàn)圖形間的相對(duì)關(guān)系是合理的，但我們?cè)谔幚矶噙呅螘r(shí)就會(huì)遇到 “已經(jīng)用工具居中了，但看起來卻沒居中” 這種問題，這種現(xiàn)象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。

奇怪的對(duì)齊現(xiàn)象

以三角形播放按鈕為例，在背景范圍中繪制三角形時(shí)，我們可以先添加周長(zhǎng)與三角頂點(diǎn)相接的圓形輔助定位，注意這里需要使用多邊形工具設(shè)置的三角形而非默認(rèn)的菜單中的三角形，因?yàn)槟J(rèn)的三角形是等腰三角形，不能用于這種情況。

思路與等距放大類似，先確定幾何中心而非圖層中心

這里推薦使用多邊形工具設(shè)置三角形，除了因?yàn)槭堑冗吶切瓮?，?Sketch、Figma 中這類圖形未擴(kuò)展的情況下工具是會(huì)自動(dòng)填補(bǔ)圖層范圍，且直接對(duì)齊就是居中狀態(tài)。

Sketch 多邊形工具創(chuàng)建的三角形

總結(jié)

本文所提到的情況與處理方式僅以個(gè)人角度切入，在日常設(shè)計(jì)工作中我們所遇到的情況會(huì)更加復(fù)雜棘手，但這里也希望通過自己的發(fā)現(xiàn)給大家?guī)硪恍﹩l(fā)與探討。

圖標(biāo)的繪制并不是也不應(yīng)該是一個(gè)繁重的任務(wù)，只要找對(duì)方法或了解背后圖形原理，大家都能在方寸之間的設(shè)計(jì)中找到不一樣的精彩。

作者：We-Design

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！

今年年初，我到客戶現(xiàn)場(chǎng)進(jìn)行需求溝通，在溝通結(jié)束后，客戶問了我一個(gè)問題，我竟然不知如何回答，只在當(dāng)時(shí)說了：“好的好的，我們會(huì)進(jìn)行優(yōu)化的?！?

當(dāng)時(shí)客戶是這么說的：“為什么界面的圖標(biāo)這么普通，毫無新意，能不能設(shè)計(jì)的好看點(diǎn)。雖然我們是 B 端產(chǎn)品，但這樣子的圖標(biāo)真的不好看?！?

雖然我心里知道 B 端產(chǎn)品首先是以可用、易用為主的，那么圖標(biāo)也不例外，在評(píng)價(jià)圖標(biāo)設(shè)計(jì)的時(shí)候，我們首先看圖標(biāo)是否體現(xiàn)了可用與易用，是否讓用戶通過看圖標(biāo)就可以聯(lián)想到這個(gè)功能是什么（合理、無歧義表達(dá)）；同時(shí)圖標(biāo)是否符合設(shè)計(jì)規(guī)則，讓界面看起來統(tǒng)一與專業(yè)。若圖標(biāo)符合以上要素，就可以再來看圖標(biāo)好不好看的問題了。

不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標(biāo)、有創(chuàng)意的圖標(biāo)、顏色豐富的圖標(biāo)。

那 B 端圖標(biāo)設(shè)計(jì)真的只需要考慮好不好看嗎？作為設(shè)計(jì)者的我們，還能做什么呢？其實(shí)，B 端圖標(biāo)設(shè)計(jì)是帶著腳鐐在跳舞，小小的圖標(biāo)藏著大大的智慧，下面我們一起來看看吧~

引言

圖標(biāo)也叫 icon，它是對(duì)現(xiàn)實(shí)世界的概括、抽象、隱喻，在產(chǎn)品軟件中，它會(huì)向我們傳達(dá)功能與操作。

有些圖標(biāo)已經(jīng)成為人人熟悉并一致認(rèn)同的傳播語言，例如刪除、設(shè)置、男士、女士、刷新、電話、郵件，看到這些圖標(biāo)，人們的反應(yīng)基本是一致的，無需再多說什么。

圖標(biāo)分類

圖標(biāo)在 B 端界面的用途我們就不展開長(zhǎng)篇大論說了，簡(jiǎn)單來說圖標(biāo)除了做點(diǎn)綴，還可以直接表達(dá)功能與用途。因此，我們可以將 B 端圖標(biāo)分為兩大類：示意類圖標(biāo)和半裝飾類圖標(biāo)。

1. 示意類圖標(biāo)

示意類圖標(biāo)（也有稱之為功能類圖標(biāo)）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨(dú)使用。

該類圖標(biāo)在中后臺(tái)系統(tǒng)的界面中會(huì)比較常用，例如基礎(chǔ)組件、導(dǎo)航菜單、狀態(tài)、功能性模塊。示意類圖標(biāo)不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會(huì)怎么樣）。

2. 半裝飾類圖標(biāo)

為什么我們要取名「半裝飾類圖標(biāo)」呢？原因在于，在 B 端界面上，不會(huì)無緣無故出現(xiàn)純裝飾、毫無寓意的圖標(biāo)，任何圖標(biāo)的出現(xiàn)即便原本是為了裝飾，設(shè)計(jì)者在設(shè)計(jì)時(shí)也需要思考其含義屬性。

該類圖標(biāo)會(huì)在中后臺(tái)導(dǎo)航、中后臺(tái)工作臺(tái)、Dashboard、B 端網(wǎng)站等地方出現(xiàn)，它們可以讓 B 端界面活躍起來。

我們可以發(fā)現(xiàn)，某些場(chǎng)景下使用示意類圖標(biāo)會(huì)更好（比如基礎(chǔ)組件），某些場(chǎng)景下使用半裝飾類圖標(biāo)會(huì)更好（比如 B 端網(wǎng)站），某些場(chǎng)景下使用任意一類圖標(biāo)都可以（比如中后臺(tái)導(dǎo)航菜單）。

回到一開始客戶的問題：把圖標(biāo)設(shè)計(jì)的好看點(diǎn)，他說了好幾個(gè)地方，記得好像有樹控件 、導(dǎo)航菜單、按鈕等。設(shè)計(jì)者們需看看目前客戶講的場(chǎng)景是哪個(gè)，有些場(chǎng)景不適合亮麗的圖標(biāo)，這會(huì)喧賓奪主，例如基礎(chǔ)組件中。

我們深刻了解 B 端圖標(biāo)類型的使用場(chǎng)景，在設(shè)計(jì)決策時(shí)會(huì)更加得心應(yīng)手。

圖標(biāo)設(shè)計(jì)規(guī)則

雖然示意類圖標(biāo)和半裝飾類圖標(biāo)視覺形式不同，但在繪制上的規(guī)則是互通的。我們團(tuán)隊(duì)輸出了一套企業(yè)級(jí) B 端圖標(biāo)設(shè)計(jì)規(guī)范，不僅可以幫助新人設(shè)計(jì)師快速上手，并且可以使團(tuán)隊(duì)內(nèi)設(shè)計(jì)師高效協(xié)作，保證設(shè)計(jì)結(jié)果的一致性。接下來和大家分享下思路，這是一套可復(fù)用的方法。

1. 約定圖標(biāo)繪制區(qū)域

我們需要給一整套圖標(biāo)約定合適的繪制區(qū)域，保證不論哪位設(shè)計(jì)師輸出的圖標(biāo)，均符合設(shè)計(jì)標(biāo)準(zhǔn)。并且原始圖標(biāo)大小一致，可以保證前端使用也非常友好。

假如都是 48px*48px 區(qū)域繪制的圖標(biāo)，它們均縮放到 16px*16px 即可；如果一個(gè)是在 48px*48px 畫板上繪制的，一個(gè)是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會(huì)導(dǎo)致圖標(biāo)看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標(biāo)設(shè)計(jì)繪制規(guī)則。

這里在和大家分享一個(gè)小心得：我們團(tuán)隊(duì)在約定圖標(biāo)繪制區(qū)域時(shí)，發(fā)現(xiàn)了一個(gè)問題。Antd 的圖標(biāo)是繪制在 1024px*1024px 畫板上的，但又有一些團(tuán)隊(duì)是繪制在 16px*16px，到底應(yīng)該選取哪種畫板呢？經(jīng)過實(shí)際操作后我們發(fā)現(xiàn)，畫板越大，設(shè)計(jì)細(xì)節(jié)可以越豐富。但縮小到小尺寸時(shí)，會(huì)有小數(shù)點(diǎn)的虛邊（不過不妨礙前端應(yīng)用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標(biāo)，畫板全在視線范圍內(nèi)，設(shè)計(jì)師繪制圖標(biāo)時(shí)更有安全感。所以，不論用什么尺寸的畫板，只要團(tuán)隊(duì)成員一致認(rèn)同即可，不用過于糾結(jié)。

2. 設(shè)置出血位

除了要讓圖標(biāo)繪制到統(tǒng)一的畫板中，我們還約定了出血位，要求所有圖標(biāo)均保留出血位（出血位默認(rèn)使用固定值），出血位起到的作用是：防止設(shè)計(jì)師圖標(biāo)繪制不小心貼邊后，圖標(biāo)在實(shí)際應(yīng)用場(chǎng)景中會(huì)出現(xiàn)缺失現(xiàn)象。當(dāng)然，出血位的默認(rèn)數(shù)值并不是一成不變的，允許設(shè)計(jì)師在繪制一些特殊形狀的圖標(biāo)時(shí)，有調(diào)整空間，保證視覺平衡。

3. 約定元素調(diào)整規(guī)則

針對(duì)示意類圖標(biāo)：

線條：我們會(huì)要求設(shè)計(jì)師在繪制圖標(biāo)的線條/圓點(diǎn)時(shí)默認(rèn)使用某個(gè)數(shù)值，然后設(shè)定線條粗細(xì)/圓點(diǎn)大小的遞增或遞減規(guī)律，例如以 2 的倍數(shù)為主基調(diào)繪制，默認(rèn)為 6px 粗細(xì)/6px 大小。但允許設(shè)計(jì)師在繪制圖標(biāo)時(shí)，不合適用默認(rèn)數(shù)值的，就按照增減規(guī)律去指導(dǎo)設(shè)計(jì)，如下所示。

圓角：圖標(biāo)采用何種內(nèi)外圓角設(shè)計(jì)會(huì)影響圖標(biāo)給人的感覺，數(shù)值大的圓角會(huì)讓用戶感覺親切；數(shù)值小的圓角會(huì)讓用戶感覺硬朗、專業(yè)。采用哪種圓角方式，設(shè)計(jì)師可以參考產(chǎn)品調(diào)性去規(guī)定。

針對(duì)半裝飾類圖標(biāo)：

半裝飾類圖標(biāo)在設(shè)計(jì)上也不是隨意為之，除了要可以表達(dá)文案內(nèi)涵外，假如是一整套的圖標(biāo)系列也需要約定元素調(diào)整的規(guī)則。

例如約定在「幾何圖形+業(yè)務(wù)圖形」的設(shè)計(jì)基礎(chǔ)上進(jìn)行發(fā)揮，保證圖標(biāo)放到一起具有很強(qiáng)的一致性。并且半裝飾類圖標(biāo)還要設(shè)定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴(yán)謹(jǐn)有序?？梢钥吹津v訊云官網(wǎng)的圖標(biāo)采用了類似的設(shè)計(jì)方法。

4. 分層打造秩序

對(duì)于圖標(biāo)畫板來說，它不是一個(gè)平面，它就像樓房一樣，是分層的。從底層到最上層的內(nèi)容依次為：主畫板區(qū)域、核心內(nèi)容繪制區(qū)域、基礎(chǔ)圖形參考區(qū)域、實(shí)際圖標(biāo)。

5. 從基礎(chǔ)型拓展

我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)，都應(yīng)該先從基礎(chǔ)型開始思考——圓形、矩形、三角形、正方形等，保證設(shè)計(jì)構(gòu)圖上的節(jié)奏感和規(guī)整性。當(dāng)基礎(chǔ)型無法滿足需要的時(shí)，以它們?yōu)闇?zhǔn)向外散發(fā)，在遵循設(shè)計(jì)規(guī)范的基礎(chǔ)上，做視覺上的平衡和微調(diào)。

如果是落到實(shí)際軟件中應(yīng)用的，建議所有圖標(biāo)最后都要合并路徑，保證圖形規(guī)整和干凈，同時(shí)便于正確輸出和使用。

圖標(biāo)畫板尺寸

在「2.1、約定圖標(biāo)繪制區(qū)域」中，我們說到了要為一套圖標(biāo)約定統(tǒng)一的畫板區(qū)域，但這個(gè)事情給設(shè)計(jì)師造成了困擾，還不止一位設(shè)計(jì)師問我：“那是不是我不能再用其他尺寸的畫板來設(shè)計(jì)圖標(biāo)了?！贝鸢府?dāng)然是否定的。約定畫板尺寸不是約束，恰恰是在規(guī)則中給予了設(shè)計(jì)師有序拓展的能力。

假如不約定畫板尺寸，那么設(shè)計(jì)師直接放飛，每個(gè)圖標(biāo)都有自己的尺寸，并且有些還會(huì)出現(xiàn)長(zhǎng)方形的形態(tài)。畢竟每個(gè)人的工作習(xí)慣不同、面對(duì)的產(chǎn)品不同，直接打開軟件畫圖標(biāo)是最快的方式。

而首先約定畫板尺寸，設(shè)計(jì)師就會(huì)有條理地進(jìn)行繪制，在遇到特殊情況時(shí)進(jìn)行有序拓展，我們可以稱之為場(chǎng)景拓展法。例如設(shè)計(jì)師可以為 B 端基礎(chǔ)組件、工作臺(tái)常用導(dǎo)航模塊、結(jié)果頁的圖標(biāo)各自設(shè)計(jì)一套繪制尺寸。

那設(shè)計(jì)師要怎么判斷什么時(shí)候采用場(chǎng)景拓展法去設(shè)計(jì)呢？我們可以優(yōu)先使用默認(rèn)畫板尺寸設(shè)計(jì)圖標(biāo)，在遇到特殊場(chǎng)景不允許情況下，采用場(chǎng)景拓展法去執(zhí)行，針對(duì)界面風(fēng)格有場(chǎng)景區(qū)別的，可以規(guī)定幾類畫板尺寸，為不同場(chǎng)景使用。

線型與面型

線型圖標(biāo)與面型圖標(biāo)也是設(shè)計(jì)師經(jīng)常在討論的話題，他們常常討論「什么情況下使用線型圖標(biāo)，什么情況下使用面型圖標(biāo)」。做過比較多 B 端產(chǎn)品的小伙伴可以發(fā)現(xiàn)，沒有說哪種場(chǎng)景必須使用線型圖標(biāo)，哪種場(chǎng)景必須使用面型圖標(biāo)，主要還是看當(dāng)前產(chǎn)品調(diào)性合適哪種，并且使用某類型圖標(biāo)后，對(duì)界面產(chǎn)生的效果是什么。

例如當(dāng)界面圖標(biāo)較多時(shí)，采用面型圖標(biāo)，會(huì)顯得頁面很重，會(huì)把用戶視覺引導(dǎo)到圖標(biāo)而不是重點(diǎn)數(shù)據(jù)上。

線型圖標(biāo)與面型圖標(biāo)在界面中使用，是一項(xiàng)系統(tǒng)工程，是由多方因素決定的。但我們?cè)O(shè)計(jì)師需要保證 B 端界面圖標(biāo)使用的統(tǒng)一性，即便按照?qǐng)鼍皡^(qū)分，也需要認(rèn)真思考，是不是有必要。就如界面字號(hào)使用定律一樣，建議不要超過 3 種，多了會(huì)讓界面雜亂，降低界面設(shè)計(jì)品質(zhì)。圖標(biāo)也是如此，不論面型還是線型，要站在產(chǎn)品角度去整體把握，而非線型和面型的簡(jiǎn)單選擇。很多 B 端產(chǎn)品是兩種類型混用的，但它們很好的劃分了使用場(chǎng)景。

這里我總結(jié)了一些線型圖標(biāo)與面型圖標(biāo)常用的場(chǎng)景（以 B 端中后臺(tái)為例，但這并不是唯一選擇）：

1. 在導(dǎo)航上（菜單極其多），常見默認(rèn)用線型，選中用面型。

2. 在導(dǎo)航上（菜單很少，單層），粗一些的線型圖標(biāo)或者面型圖標(biāo)都會(huì)用，且會(huì)比較個(gè)性化，以提升產(chǎn)品整體調(diào)性。

3. 在基礎(chǔ)組件中，通常使用線型圖標(biāo)，且顏色淺，用戶可以把注意力聚焦在信息本身。

4. 在表格數(shù)據(jù)的狀態(tài)中，面型和線型是均分使用的狀態(tài)出現(xiàn)。

5. 在文字按鈕中如果要添加圖標(biāo)，讓界面展現(xiàn)更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標(biāo)會(huì)讓界面顯得太重。

6. 若標(biāo)題區(qū)要出現(xiàn)按鈕，面型按鈕會(huì)使得區(qū)塊顯得更整體。

視覺尺寸與規(guī)范尺寸

這里還想和大家說說「視覺尺寸與規(guī)范尺寸」的事情。之前遇到設(shè)計(jì)師這么問：“既然已經(jīng)約定了圖標(biāo)的設(shè)計(jì)規(guī)范，那是不是就嚴(yán)格按照規(guī)范區(qū)間來（嚴(yán)格按照基礎(chǔ)圖形參考區(qū)域來），但是有些圖標(biāo)不適合直接套用規(guī)范啊。”

是的，其實(shí)很多不規(guī)則圖標(biāo)是不適合直接套用規(guī)范的，就像一份周報(bào)格式不是所有崗位都適用一樣。如果設(shè)計(jì)師發(fā)現(xiàn)有些圖標(biāo)直接套用規(guī)范不可行，是可以根據(jù)「視覺大小一致性」進(jìn)行微調(diào)的。這不僅保證了前端開發(fā)的便捷，也保證了界面視覺的整潔。

圖標(biāo)命名

既然是一套 B 端產(chǎn)品層/企業(yè)級(jí)圖標(biāo)庫，那么必須要有規(guī)范的命名方式，這樣會(huì)方便設(shè)計(jì)師之間的協(xié)同，也會(huì)更方便開發(fā)與設(shè)計(jì)之間的協(xié)作，同時(shí)查找效率會(huì)提升。

那么命名有什么規(guī)律呢？其實(shí)只要根據(jù)項(xiàng)目的情況，團(tuán)隊(duì)內(nèi)有統(tǒng)一的認(rèn)知即可。關(guān)于命名的中英文，也是視團(tuán)隊(duì)而定，各有優(yōu)缺點(diǎn)。比如是英文，那會(huì)方便開發(fā)直接用名字，不用重新取名（當(dāng)然設(shè)計(jì)師取的英文名開發(fā)不喜歡，也會(huì)改）；用中文的話，方便檢索。

可以是：

尺寸/類型/圖標(biāo)名稱/狀態(tài)
16px/導(dǎo)航/上傳/默認(rèn)

形態(tài)/格式/圖標(biāo)名稱
面型/方型/新增

模塊/圖標(biāo)名稱/狀態(tài)
導(dǎo)航/分享/正常

三方圖標(biāo)庫

好用的三方圖標(biāo)庫還是很多的，雖然圖標(biāo)庫質(zhì)量參差不齊，但還是在一定程度上解放了設(shè)計(jì)師天天畫圖標(biāo)的痛苦。這里介紹幾個(gè)圖標(biāo)質(zhì)量不錯(cuò)的網(wǎng)站：

1. Noun Project

網(wǎng)站鏈接：https://thenounproject.com

2. Iconfont

網(wǎng)站鏈接：https://www.iconfont.cn

3. ICONS8

網(wǎng)站鏈接：https://icons8.com

4. Font Awesome

網(wǎng)站鏈接：https://fontawesome.dashgame.com/

5. IconPark

網(wǎng)站鏈接：https://iconpark.oceanengine.com/home

寫在最后

當(dāng)客戶提出圖標(biāo)好不好看時(shí)，是一個(gè)正常人的反應(yīng)，試著想想我們自己，不也總是會(huì)很表面得看待一件事情么。因此，客戶不會(huì)知道原來一個(gè)小小的圖標(biāo)也是藏著大大智慧的。不過沒關(guān)系，當(dāng)我們了解了小圖標(biāo)內(nèi)部的大智慧后，我們可以更輕松的駕馭圖標(biāo)了，也可以知道在何種場(chǎng)景下，使用何種圖標(biāo)可以提升界面展示效果，得到客戶的好評(píng)。

作者：小果

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！