如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
大多數(shù)設(shè)計師在實際工作中，經(jīng)常會碰到設(shè)計稿改來改去，改得焦頭爛額，甚至懷疑自己的設(shè)計水平，這是為什么呢？又有什么解決的方法？這篇文章為你答疑解惑。「設(shè)計」這一門工種，似乎是永遠避免不了「改稿」這一環(huán)節(jié)的，即便是非常頂尖的設(shè)計師，不為甲方不為外部原因所妥協(xié)，也會在自我實踐中尋求改變。但是，「改設(shè)計」也未必是越改越好，如果溝通不當(dāng)，也會存在越改越糟的結(jié)果。所以，作為設(shè)計師，一方面我們要吸取不同的意見，另一方面也要全面提升自己的知識架構(gòu)、堅守自己的原則。
接下來以「UI設(shè)計」為例，剖析我們?nèi)粘９ぷ髦小父牧擞指摹沟膯栴}。在實際工作中，UI設(shè)計師通常會面臨來自老板、產(chǎn)品、運營、開發(fā)等各方人員的意見，也常常會因為字體的粗細、間距的大小、顏色的選擇等等問題各執(zhí)一詞、爭論不休，就像下圖一樣：
為什么會這樣呢？其實，在UI設(shè)計中，頻繁改稿主要存在三種情況：
針對以上問題，在實際項目中怎樣避免陷入頻繁改稿的死循環(huán)，從而提高工作效率、推動項目進展，提升自己作為設(shè)計師的成就感呢？
首先我們來了解一下UI設(shè)計的工作流，只有清楚自己崗位的流程，才能更好地拿捏設(shè)計。每個公司的類型和規(guī)?？赡芏疾惶粯?，但基本一致，無非就是5個階段：需求 – 設(shè)計 – 開發(fā) – 測試 – 上線。如果按職位劃分就是：產(chǎn)品經(jīng)理 – 交互設(shè)計師 – UI設(shè)計師 – 前后端開發(fā)工程師 – 測試人員 – 產(chǎn)品上線。
所以我們UI設(shè)計師是處于流水線中游的狀態(tài)，向上對接產(chǎn)品，向下對接開發(fā)。在這個流程中，要做到減少設(shè)計修改的頻率：
向上要明確產(chǎn)品經(jīng)理的需求，將原型需求準(zhǔn)確恰當(dāng)?shù)囊曈X化；
向下要考慮開發(fā)實現(xiàn)以及時間成本，因為如果一個設(shè)計做的非常絢麗，但是開發(fā)實現(xiàn)不出來或者很難實現(xiàn)或者實現(xiàn)的時間成本很大，那么肯定需要對設(shè)計方案做出調(diào)整，采納折中方案。
所以，不想讓自己的設(shè)計改了又改，那么一定要全方位的多溝通，一定不要「閉門造車」。
UI設(shè)計師接到產(chǎn)品原型后，一定要弄清這幾點，再開始設(shè)計：
1. 原型是否確定，會不會存在變動？
我們在接收到產(chǎn)品經(jīng)理遞交過來的交互原型稿之后，先和對方確定收到的需求是否完整，是否是最終稿件以及是否會存在變動。一般來講，在大型企業(yè)里面流程都比較規(guī)范，產(chǎn)品經(jīng)理輸出最終原型之后，后期變動的可能性較低。但在中小型企業(yè)，通常因為項目時間緊張，流程不夠完善，反復(fù)的可能性較多。一些大型需求，產(chǎn)品經(jīng)理有可能會分模塊、一部分一小點的流轉(zhuǎn)到UI設(shè)計，這樣存在的問題隱患比較多，因為經(jīng)驗較少的產(chǎn)品經(jīng)理全局概念較差，雖然口頭上說這一部分的需求已經(jīng)完善了，實際上當(dāng)所有需求匯總之后極有可能需要再次調(diào)整。所以作為UI設(shè)計師，我們盡可能不要去接局部輸出的原型，需要再次確認(rèn)無誤后，我們再著手設(shè)計，這樣就避免了原型需求的變動造成設(shè)計的變動。
還有一點，在產(chǎn)品經(jīng)理給到交互原型時，我們是被動的接受，還是在需求溝通之中也能及時參與呢？最好在產(chǎn)品需求的評審階段，對應(yīng)的UI設(shè)計師可以積極參與討論，一起溝通。一來可以熟悉產(chǎn)品思考的整個過程，二來可以在原型的溝通中站在設(shè)計的角度及時發(fā)現(xiàn)問題，提出建議，避免在原型定稿后再去修改的尷尬。
2. 項目的時間周期
在接到產(chǎn)品的原型后，一定要及時確認(rèn)項目的時間周期，通常產(chǎn)品經(jīng)理會主動告知項目的周期，詢問UI設(shè)計完成時間，我們根據(jù)需求的復(fù)雜程度給出UI輸出的預(yù)計時間，再根據(jù)這個時間節(jié)點來劃分每一天完成的工作量。如果產(chǎn)品經(jīng)理給的時間周期比較短，那么盡可能的闡述原因申請設(shè)計時間。如果時間過于倉促的話，設(shè)計思考的時間就少，考慮的問題很難全面，不利于界面效果的最佳呈現(xiàn)，導(dǎo)致后續(xù)改稿的可能性也很大。
3. 理清設(shè)計意圖，處理好信息層級
接到產(chǎn)品原型，一定要理清設(shè)計意圖，處理好信息層級。
當(dāng)產(chǎn)品經(jīng)理遞交給我們確定的需求原型之后，切莫盲目開始設(shè)計，UI設(shè)計并不是把原型框架進行簡單的排列，我們需要理清設(shè)計意圖，熟悉功能架構(gòu)、掌握交互邏輯，明白產(chǎn)品經(jīng)理想要解決什么問題，達到什么程度以及具體的設(shè)計方向。
信息層級這個問題，好像我們在實際工作中經(jīng)常會提起，但是要做到恰如其分的標(biāo)準(zhǔn)還是有點難度的。準(zhǔn)確把握界面的信息層級還需要跟產(chǎn)品經(jīng)理多方面的溝通，因為有些時候我們以為的，并不是產(chǎn)品想要的，所以一定要多次確認(rèn)，才能精準(zhǔn)把握。
△ 上圖左側(cè)是lofter首頁列表，右側(cè)是我統(tǒng)一梳理層級關(guān)系之后的效果
改動的重點：
在實際設(shè)計過程中，當(dāng)碰到一個設(shè)計模塊拿捏不準(zhǔn)的時候，可以在 sketch 或者 ps 中建立多個畫板，將幾種不同的設(shè)計方案平鋪展開，進行視覺對比分析。如果自己拿不準(zhǔn)，可以叫組員或者其他部門的「小白」來進行選擇投票或者提出改善性建議。不要小看「小白」，不要覺得他們不懂設(shè)計，提的建議對設(shè)計無用。其實不然，我們的設(shè)計最終目的是給人用的，而且要好用，所以一定要多結(jié)合小白用戶的多方面意見，才能讓自己的設(shè)計更經(jīng)得起推敲。
上圖為筆者在處理個人中心界面效果拿捏不準(zhǔn)的時候，布局了多個效果進行對比，通過對比的呈現(xiàn)后，就可以清晰判斷每一個界面存在的問題。
另外，UI設(shè)計中，不要停留于表面，不要用「好看或不好看」去做簡單評斷，在設(shè)計過程中我們的界面布局、顏色把控、字符間距、icon設(shè)置等多方面都要經(jīng)得起推敲：為什么這樣設(shè)計？換一種設(shè)計合不合適？
只有讓每一處設(shè)計都有理論的支撐，深思熟慮后，才會讓設(shè)計更切實際，才能讓人信服，才能實現(xiàn)產(chǎn)品指數(shù)的增長，也更能體現(xiàn)設(shè)計師的價值。
當(dāng)設(shè)計稿出來之后，一般會組織 UI評審，UI設(shè)計師一定要將自己的設(shè)計理念表達清楚，將設(shè)計中考究的觀點輸送給參與評審的各方人員，這樣會讓你的設(shè)計更有信服力。如果在評審過程中，產(chǎn)品、運營或開發(fā)對設(shè)計稿提出不同的意見，我們首先不要急于否定，要確定立場：大家都是以產(chǎn)品為核心去思考問題，也不要人云亦云，要清楚他們?yōu)槭裁磿岢鲞@個意見，是不是自己的設(shè)計哪里沒有展現(xiàn)好？即便對方的建議本身沒有可取性，那么你也要站在你的視角用你的觀點解釋給對方聽。這決定于每個設(shè)計師的自身知識架構(gòu)和理論支撐，所以一定要讓自己不停地吸收，才能讓自己的設(shè)計更經(jīng)得起推敲。
以上是我在實際工作中的一些比較淺薄的總結(jié)，如有闡述不周的地方大家可以相互探討。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
目錄
1.「注」入重量感
2.「空」出高級感
3.「圓」有親近感
4.「裝」出華麗感
5.「質(zhì)」換畫面感
6.「寫」出文藝感
一.「注」入重量感
突出重量感是大多數(shù)設(shè)計師常用的技巧，在設(shè)計中，為了提高文案或者標(biāo)題的視覺層級，很多設(shè)計師往往會從字體的重量感進行思考，給字體注入內(nèi)容往往能加大字體視覺重量，字體的重量感也就是版面中的“存在感”，“存在感”一旦提高，視覺層級也伴隨著提高。
一般我們在突出字體重量感的方法上常常會選擇線條較粗的字體、加大描邊或者設(shè)計成立體字來突出“重量”，甚至可以縮小字體間距，營造緊張的感覺，使文字更具“重量"。另外在顏色上，黑色物品相對于淺色物品在視覺上顯得更重，這一點在字體上也同樣適用的。
二.「空」出高級感
字體的高級感一般體現(xiàn)在品等產(chǎn)品的設(shè)計上，利用大量的留白，在字體的顏色上盡量選擇近乎無彩色如灰色，做到簡潔大方、少即是多。而在字體類型的選擇上，襯線體往往比非襯線體更具有格調(diào)，宋體往往比黑體更加高雅，利用傳統(tǒng)字體也能給讀者一種信賴感。
看到這里也許有人會說：“從用戶體驗角度思考應(yīng)該使用非襯線體，因為其更易讀、字形更簡潔?！倍凇对O(shè)計師要懂心理學(xué)》一書中表明研究發(fā)現(xiàn)：常規(guī)的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。
三.「圓」有親近感
字體所展示出的親近感主要體現(xiàn)在于字體端角的圓滑上，先從生活常見的例子講起，在人類的常識里尖銳的物品往往會給人冰冷、危險和難以靠近的感覺，而圓滑的東西往往讓人有親近感，更利于吸引讀者接近。這里最形象的例子要數(shù)按鈕和圖標(biāo)的演變，按鈕和圖標(biāo)的設(shè)計從直角到圓角的演變，其中不乏也有以上原因。
在突出親近感時，圓角類型的字體所表達的感覺如果還不夠強烈，這里不妨可以選用較粗的線條字體再加上暖色系的顏色，這樣親近感就更加強烈了。
四.「裝」出華麗感
一般文字是用于閱讀，而為了博人眼球，設(shè)計師也慢慢讓文字字體有了裝飾，利用線條的不規(guī)則粗細來突出文字的“美”，從而體現(xiàn)出華麗感，華麗感較強的字體大多數(shù)用于女性品牌的產(chǎn)品，裝飾性高的文字，不僅引人注目的效果，還能強調(diào)了產(chǎn)品的“貴”。要注意的是修飾性的文字不利于閱讀，不適合大量文字，容易視覺疲勞。
五.「質(zhì)」換畫面感
材質(zhì)感的字體往往用在游戲的設(shè)計上比較多，將武器或游戲場景等有質(zhì)感的東西貼在字體上，間接展示游戲場景、風(fēng)格等。因此，運用材質(zhì)的字體往往更具有畫面感，從而影響讀者視覺對大腦的影響，產(chǎn)生了身臨其境的感覺，于是在腦海中留下對產(chǎn)品認(rèn)知。
質(zhì)感的字體往往容易讓人感覺到“力量”，這也和第一點注入內(nèi)容說法一樣。
六.「寫」出文藝感
手寫的字體，會讓讀者感覺到手的溫暖與膚觸的溫柔，這里被利用到的應(yīng)該算淘寶商家的感謝信了，利用牛皮紙加上手寫字體，可謂是為了好評誠意滿滿。
手寫的字體還常常與手繪貼圖一起出現(xiàn)在手帳本，或可愛優(yōu)雅、或呆萌粗線條；另外，你或許還能在文藝菜單上看到它，樸實無華卻清晰溫暖，文藝感十足。
后言
沒有最好的字體，只有合適的字體，字體的難度并不在于設(shè)計和選擇上，而是在于你選擇或設(shè)計的字體給讀者的感覺是否符合產(chǎn)品所想表達的亦或是讀者所需要的。
在設(shè)計中，字體的樣式往往起到輔助文案傳遞的作用，所以如何在不同的設(shè)計風(fēng)格中用好字體尤為重要。字體如果用得好，在設(shè)計中常常會給讀者所需要的感覺，這里我們例舉幾種常見的感覺：
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
短視頻產(chǎn)品成為年輕用戶社交娛樂的主場景，QQ在短視頻社交的耕耘過程中，打造了豐富的發(fā)表能力，讓用戶更方便的記錄生活精彩瞬間，同時也更方便的與好友互動，今天我們對設(shè)計過程進行復(fù)盤，將過程難點與設(shè)計思路從能力建構(gòu)、設(shè)計切入、設(shè)計亮點引入、設(shè)計亮點深挖簡述供各位參考。
二 發(fā)表能力建構(gòu)
————————
同質(zhì)化競爭突圍
發(fā)表能力構(gòu)建方面從最輕的發(fā)表成本以及最多的發(fā)表回饋兩個維度做橫向的鋪陳，建構(gòu)了除了拍攝以外，輕量主觀表達的文字視頻，不受時空與題材影響發(fā)表動機的影集，勾引起共同參與及話題的游戲，最多社交參與感的問答等發(fā)表能力等四種發(fā)表方式。打造輕量發(fā)表成本的文字視頻可以確保發(fā)表量足夠，以解決發(fā)表量與觀看量不對等的問題，在小游戲與問答等發(fā)表方式，除了可以營造社交場景以外，創(chuàng)新的玩法也能與競品拉開差異，在眾多的短視頻產(chǎn)品中具有自身的特色。
然而單純的發(fā)表能力差異容易被模仿，能夠保持自身優(yōu)勢與特色的時間十分短暫，建立起與用戶情感上的連接可以有效的加深用戶對服務(wù)的認(rèn)可以及歸屬感，舉個例子，前段時間筆者至上海出差數(shù)日，意料之外的一份小禮物卻促使我成為該酒店的常客，這證明了建立情感連接確實可以成為與同業(yè)同質(zhì)化競爭時不錯的突圍點。
三 設(shè)計切入角度
————————
建立情感連接，是視頻設(shè)計“雙面性”的一面
參考諾曼的理論，情感化設(shè)計分為本能，行為，反思三個層面。在打造視頻制作工具的過程中，滿足本能的外觀愉悅以及確保行為過程的順暢性屬于基本要求，可以參照過去設(shè)計工具的手法，保證架構(gòu)流程界面反饋每一環(huán)節(jié)的使用效能和低理解成本，而反思的范疇則與內(nèi)容相關(guān)。為制作視頻內(nèi)容而設(shè)計，需要將用戶的經(jīng)驗，喜好，文化轉(zhuǎn)化成特殊符號，以觸及情感連結(jié)最重要的反思環(huán)節(jié)。
用戶與產(chǎn)品接觸的過程按時間展開分為初次接觸、逐漸了解、熟悉依賴三個階段，若在每個階段都能與用戶保持情感連接，必能逐步加深用戶印象，達到競爭差異化的目的。下文兩個案例演示我們?nèi)绾卧谝肫诤统砷L期選擇合適觸點，制定相應(yīng)設(shè)計策略和方案，從而達到此目的。
四 設(shè)計亮點引入
————————
喚起情感，拉近與用戶的距離
為了讓用戶更主動的發(fā)表相冊視頻，QQ團隊在影集發(fā)表模塊上規(guī)劃了智能相冊的能力，借助用戶回憶塑造超級符號，把用戶的親身經(jīng)歷與產(chǎn)品功能建立聯(lián)系，提高使用意愿。在影集的引導(dǎo)步驟中，尋找合宜的契機，把零散的照片按特定線索重新組織，經(jīng)過精心包裝以回憶墻的方式重新呈現(xiàn)給用戶。
影集功能的重新包裝：
4.1 場景搭建
QQ經(jīng)授權(quán)后訪問用戶相冊，沿時間和位置線索用聚類算法對照片歸類，產(chǎn)生與特定場景關(guān)聯(lián)的照片組，再用圖像識別技術(shù)從照片組中精選特定n張合成視頻，為后續(xù)情緒升級埋下基礎(chǔ)。
4.2 意境傳達
為視頻搭配轉(zhuǎn)場音樂是主要增色手段。
轉(zhuǎn)場效果設(shè)計要以情緒傳達為目的，過渡動畫和快慢節(jié)奏的靈活搭配打造大片質(zhì)感，疊加細節(jié)讓畫面生動不僵硬。
在配樂標(biāo)準(zhǔn)上，我們基于用戶習(xí)慣推導(dǎo)，明晰場景+節(jié)奏的音樂選擇維度。
轉(zhuǎn)場和音樂的挑選需貼合場景特征。在“聚會”場景中，設(shè)計師選用翻轉(zhuǎn)重組的效果傳遞歡快愉悅氛圍，曝光和光暈細節(jié)可以模擬真實光影效果。“往年今日”則表現(xiàn)出安靜氛圍，沉浸的復(fù)古濾鏡和低調(diào)的疊黑效果讓情緒表達含蓄收斂，漣漪波動仿若時光倒流。
4.3 捕捉時機，宣傳專屬回憶
在信息架構(gòu)層的設(shè)計使用卡片橫滑的方式，一方面可以暗喻時光隧道，另一方面考慮到大卡片比其他尺寸的縮略圖在陳列和交互行為上更利于突出視頻的優(yōu)勢。
4.4 案例回顧
我們采用情感符號引導(dǎo)發(fā)表的策略，得到數(shù)據(jù)的支撐，影集發(fā)表總量和發(fā)表轉(zhuǎn)化率均有明顯提升。經(jīng)過市場橫向?qū)Ρ龋琎Q團隊在對影集的功能規(guī)劃和整體設(shè)計理念上占據(jù)了優(yōu)勢位置。
五 設(shè)計亮點深挖
————————
打造情感體驗峰值，強化用戶印象
在任何體驗中，都應(yīng)該重視體驗過程中的情感峰值，如同丹尼爾卡曼說，體驗產(chǎn)品時能夠被記住的只有峰值與終值的體驗，我們在智能相冊的環(huán)節(jié)之中建立起與用戶情感上的鏈結(jié)，而鏈結(jié)后的情感峰值，則選擇在發(fā)表成本最高發(fā)表頻率的文字視頻中深挖，讓體驗情感的峰值在高頻率的場景中發(fā)生獲取最高的投入回饋。
5.1 過程頗折
文字視頻上線后發(fā)現(xiàn)用戶發(fā)表意愿未達預(yù)期，癥結(jié)在于其過程缺少能激發(fā)用戶主觀意愿表達的情緒觸發(fā)點。我們提出兩個優(yōu)化思路，
1 降低理解成本，體驗對齊于常見動態(tài)發(fā)表界面。
2 支持自定義背景，用帶場景暗示的背景烘托情緒氛圍。對比實驗后發(fā)現(xiàn)2既可增加文字視頻的意境表達又不干擾基礎(chǔ)操作，是為更佳方案。
文字視頻的初期方案和優(yōu)化方向：
5.2 策略制定
QQ團隊基于對用戶發(fā)表場景統(tǒng)計，確定以傳達心情和高頻發(fā)表時間點為線索，策略制定是考慮到既要與用戶表達有耦合但不能具體有所指。
5.3 意境傳達
背景模版設(shè)計有以下原則：
1 界限分明，背景效果不要干擾主體信息。
2 意象與認(rèn)知相符，有情理之中意料之外的驚喜，引起用戶好奇心。
3 表義避免太具象。抽象表達騰出更大想象空間，讓用戶創(chuàng)意不受縛于環(huán)境。
以下是全部模版效果展示。
5.4 案例回顧
經(jīng)優(yōu)化后文字視頻的背景從純視覺角度轉(zhuǎn)變成帶動用戶情緒刺激發(fā)表的觸發(fā)點，后續(xù)團隊結(jié)合運營策略，在特殊節(jié)日或特殊事件前更新模版可以持續(xù)刺激拉升文字視頻發(fā)表量，該策略的運用屢建奇效。
六 總結(jié)心得
————————
設(shè)計經(jīng)驗
產(chǎn)品體驗路徑中植入情感因素意義重大。在引入期喚起情感降低用戶心理戒備，產(chǎn)生熟悉親切感。接觸期有效調(diào)動用戶情緒制造情感峰值，加深印象。成熟期創(chuàng)造互動機會，讓情感得到延伸寄托進而鞏固市場地位。此過程環(huán)環(huán)相扣層層遞進，在用戶心理推波助瀾。
好設(shè)計是能影響用戶非理性，改變情緒最終影響他的行為。設(shè)計的高境界在于只影響不明說，用戶不需要領(lǐng)會設(shè)計意圖，但情緒已經(jīng)被感染了，在情緒的作用下，按照設(shè)計者預(yù)定的軌跡，自然做出選擇。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
我們的文化中會將大師們捧上天，凸顯他們和常人差別最大的那個部分。大師當(dāng)然是有屬于他們的秘訣的，可是他們的成功同樣植根于他們生而為人的煙火氣。從一個人的視角來解讀大師，在崇敬的同時，我們也應(yīng)當(dāng)對自己有信心——他們已經(jīng)替我們走出了一條，可供參考的道路。創(chuàng)造力是我們每個人與生俱來的，我們天生就是創(chuàng)造者。人人都可以創(chuàng)造，而且大多數(shù)人都以不同方式進行著創(chuàng)造。毫無疑問，創(chuàng)造新事物時，我們是最快樂的。
不幸的是，許多人會找借口不去創(chuàng)造，比如：「我沒有足夠的創(chuàng)造力或天賦?！惯@是不對的。在重新審視簡·奧斯?。↗ane Austin）、畢加索（Picasso）、愛迪生（Edison）、蒂凡尼（Tiffany）和丘吉爾（Churchill）等著名人物的經(jīng)歷之后，我意識到，創(chuàng)造力和我們常說的天賦，只是勇氣和不懈努力的副產(chǎn)物。
每個人都是有創(chuàng)造力的。眾生平等，人人皆可創(chuàng)造。個體性和獨立性只是用來發(fā)掘和完善內(nèi)心世界的。因此我們每個人都是有創(chuàng)造力的。
正如我在上文中提到的，勇氣是與創(chuàng)造力和創(chuàng)新直接相關(guān)的。對此 Paul Johnson 賦予了最好的定義：
創(chuàng)意往往反映出巨大的勇氣，尤其是當(dāng)藝術(shù)家不向最終的敵人——年齡或衰老，低頭的時候。
我開始探索，我想知道創(chuàng)造力是什么。為什么有些人能夠通過他們的創(chuàng)造改變歷史的進程？是什么引導(dǎo)他們創(chuàng)造？他們的工作背后有什么秘訣嗎？為什么有的人名垂青史而另一些則不然？
最終我發(fā)現(xiàn)了一個殘酷的事實——以創(chuàng)造為事業(yè)的人每天都在不知不覺中辛苦工作，而且前途未卜。正如約翰遜所寫的，你必須能夠戰(zhàn)勝時間和任何可能出現(xiàn)的身體缺陷。比如貝多芬不得不和他的聽覺缺陷作斗爭；愛迪生失敗了幾千次才發(fā)明出最后的燈泡；瓦格納生活貧困，經(jīng)常向人要錢；艾米麗·狄金森從不顧及公眾的態(tài)度，無論是鼓勵或批評，始終獨自一人寫詩。
在我致力于研究不同性格的人的時候，最讓我驚訝的是每個創(chuàng)作者總是在前人的基礎(chǔ)上創(chuàng)作。沒有人憑空創(chuàng)造出好作品，而這打破了我一直以來所持有的刻板印象。
所以讓我們深入研讀一下創(chuàng)造者們的經(jīng)歷，看看他們是如何工作的，讓他們?nèi)绱颂貏e的秘密，就在其中。
「如果我沒有足夠的天賦，又有很多競爭對手，那么我將每天創(chuàng)作一幅畫，直到讓世人知道我是活著的最偉大的畫家?！惯@無疑是畢加索踏上成為歷史上最成功的藝術(shù)家的道路時，一直秉持的信條之一。
畢加索出生于西班牙的馬拉加，僅有的繪畫啟蒙知識是由他的父親傳授的。至于其他方面，我們可以很容易地說畢加索是自學(xué)成才、自我推銷，在他所居住城市的街道上接受教育的。從很小的時候起，他就一直密切關(guān)注著市場，因此他總能知道什么才是可以賣出去的。
不同于等待靈感的到來，找尋上帝賦予才華的人們，畢加索每天都在創(chuàng)作。他的工作原則是速度勝于準(zhǔn)確和努力。他是我們所知道的最不安分、最具實驗性的創(chuàng)造者之一。他做的每件事都必須盡快完成，不會對作品精雕細琢。
畢加索做過許多工作。除了繪畫，他還做雕塑、面具。無論是在畫布上、紙上，石頭上，陶瓷上還是在金屬上，他都是卓越的藝術(shù)大師。對他來說，沒有任何物質(zhì)障礙。他是一個絕對的實驗主義者，每十年都會改變他的風(fēng)格，對于顛覆從前的自己從不畏懼。
他還設(shè)計過海報、標(biāo)志、廣告、戲劇服裝和服裝。畢加索離世前留下了超過3萬件作品，這是有來源的（catalogue raisonne – 1932-1978）。畢加索是一個有數(shù)量觀念、強烈的職業(yè)道德和實驗精神的人。
也許你不會想到這份名單上會出現(xiàn)這位政壇人物，但我這樣做是有充分理由的。他是一位首相，二戰(zhàn)后他在歷史上贏得了一席之地，但他確實值得被列入名單，因為他也是一位畫家和文字大師。
丘吉爾是如何開始寫作的？父親離世后，丘吉爾悲痛萬分。他覺得喪失了自我，也失去了內(nèi)心的平靜。因此，他決定寫一本完整的傳記獻給他的父親。在那之后，他發(fā)現(xiàn)了自己對文字的熱愛和激情。丘吉爾不知道什么是創(chuàng)造力，他只知道「努力工作」這幾個字。
溫斯頓日以繼夜地工作。感謝上帝，他很好，只有在8小時睡眠不足的情況下才會感到疲倦。——丘吉爾的妻子?Clementine Churchill
很少有人知道丘吉爾一生中寫作超過1000萬字。這其中包括他的演講稿、書籍和文章。這種寫作量比任何作家寫的都多。他從小就有寫下所有他感興趣或參與之事的習(xí)慣。
他不僅練就了寫作技能，而且還從中賺錢。每次他去不同的國家，或者參與一場戰(zhàn)爭，他都會寫相關(guān)的文章賣給報紙或期刊。他寫了三本關(guān)于二戰(zhàn)的書，共有約200萬字，是關(guān)于那個時期覆蓋范圍最廣、最有價值的資料之一。
語言是唯一不會消亡的東西?！獪厮诡D·丘吉爾
當(dāng)他不寫作、不娛樂、不與政治斗爭時，他就畫畫。他發(fā)現(xiàn)畫不僅可以作為愛好，而且可以成為面對困境時的避風(fēng)港。因為畫畫的時候你要保持心無旁騖，這樣便可以放松你的大腦。
他從不逃避艱苦的工作，相反，他竭盡全力地工作：議會、行政、地緣政治、寫作、繪畫、建造田園詩般的房屋和花園。丘吉爾自命不凡，他的創(chuàng)造力流淌在他的血液中。他希望自己所見的一切，都能親自動手實現(xiàn)，這就是他有別于他那個時代的其他人的特質(zhì)。
在所有創(chuàng)意大師中，克里斯托巴爾·巴倫西亞加是最專注于創(chuàng)造美好事物的創(chuàng)造者。工作滲透了他生活的方方面面，他將自己全部的精力交付于工作。
作為著名品牌巴黎世家的創(chuàng)始人，他是怎么進入時尚圈的？三歲時他參加了一個縫紉班，他對此表現(xiàn)出極大的熱情。在接下來的74年里，他的縫紉技術(shù)爐火純青。在他的余生中，他每天都要做一件針線活以保持手的靈活度。他是當(dāng)時唯一一個在服裝設(shè)計上獨當(dāng)一面的設(shè)計師，他做過縫紉、剪裁、選料等一切與制衣相關(guān)的工作。他唯一不會做的事就是畫畫，需要助理代為完成。
他的工作量巨大，整日都待在工作室里。以至于人們一度認(rèn)為「克里斯托巴爾·巴倫西亞加」是一個假名，也許并無其人。幾乎沒有人采訪過他或是見過他，也幾乎沒有他的照片。他從不參加社交活動，除了和一兩個老朋友相聚外，他很少出去吃飯。
這一切都使他得以專注于創(chuàng)作能永遠流傳的作品。他孜孜不倦地工作和創(chuàng)造。這就是為什么現(xiàn)在幾乎沒有設(shè)計師能夠創(chuàng)造出像他在上世紀(jì)五六十年代那樣的創(chuàng)作作品，這些作品正如同其他人所說的——那都是館藏級的作品。
他工作非常努力。巴黎世家每個系列都有200-250個設(shè)計，所有這些都是他自己完成的，因為他幾乎不信任任何助手。他甚至拒絕了年輕有為的紀(jì)梵希（Hubert de Givenchy）的幫助。
從他三歲到生命的最后幾天，他每天都努力工作。在上世紀(jì)60年代最艱難的時期，他停止了工作，因為心臟病發(fā)作，大師最終離世而去。
路易斯·康福特·蒂芙尼癡迷于用玻璃制作窗戶和燈具，并以玻璃進行珠寶創(chuàng)作。他的父親查爾斯·路易斯·蒂凡尼（Charles Lewis Tiffany）生于1812年，1837年在紐約開了一家商店，銷售文具和精美的器皿。他似乎繼承了他父親的品味，把平凡與非凡融合在一起。
蒂芙尼是一位真正的創(chuàng)造者，他勇于嘗試，樂于為自己設(shè)定不可能完成的任務(wù)。盡管他父親是個商人，他早年還是選擇了學(xué)習(xí)繪畫。但從本質(zhì)上講，他也是組織者、領(lǐng)導(dǎo)者和商人，也是一個揮霍無度的人和收藏家。如果要給出一個定義，蒂芙尼是一位創(chuàng)造者和推動者，他的遠見卓識和組織能力使這一切成為了可能。
在二十世紀(jì)初，他雇用了100多名玻璃行業(yè)的出色工人，鼓勵他們試驗自己的想法，并輔以化學(xué)方法，對這些想法進行進一步的研究和推動。
他利用他的珠寶工作室實驗特殊的金屬反應(yīng)。這些金屬與彩色玻璃結(jié)合在一起，形成了「寶石花瓶」。他一直在研究他在旅行或參觀博物館時挑選的古代玻璃碎片。他在尋找可以用于復(fù)刻它們的化學(xué)方法。
蒂凡尼對探索發(fā)現(xiàn)和實驗有著一種無法言喻的渴望，這讓他能夠創(chuàng)作出如今每件價值超過100萬美元的作品。他經(jīng)常去不同的國家旅行，研究與玻璃有關(guān)的古代文化。他保存了旅途中的許多發(fā)現(xiàn)，參觀博物館都會留下詳細的筆記。
重要的一點是，蒂芙尼喜歡與他人合作或從其他風(fēng)格中獲得靈感，但他從不抄襲。他寫道：
神賜給我們的才干不是要我們模仿別人的才能，而是要我們運用自己的頭腦和想象力。即使是在團隊中工作，藝術(shù)家的個人風(fēng)格也是通向真正美麗的道路?！狢harles Lewis Tiffany
他還創(chuàng)造了一種表面粗糙的昂貴玻璃，之后他為其取名「熔巖」。「熔巖」的靈感來自他在維蘇威火山附近發(fā)現(xiàn)的碎片。他對古代的研究發(fā)現(xiàn)，埋在灰燼中的瓷磚（如龐貝古城）經(jīng)過了2000年的化學(xué)變化，產(chǎn)生了光澤。這個變化過程可以在工廠實現(xiàn)。不久，他賣的瓷磚比花瓶還多。
要成為一個創(chuàng)造者，就必須成為一個藝術(shù)家？大錯特錯。發(fā)明家和商人托馬斯·阿爾瓦·愛迪生背后有1000多項專利。大多數(shù)發(fā)明家在現(xiàn)代社會發(fā)展中發(fā)揮了至關(guān)重要的作用。他們的靈感來自于解決他人需求的渴望，以及與藝術(shù)家合作。
他的靈感來源于給予人們聞所未聞的東西。例如，他發(fā)明第一臺錄音機的靈感來自偉大的歌手和樂器演奏家的聲音。他想給他們更好的創(chuàng)作工具。
他在電力方面的貢獻也是如此。他信任與其他創(chuàng)作者和藝術(shù)家的合作。他鼓勵蒂芙尼將燃氣燈換成電燈，這樣生意會更好。后來他與蒂芙尼合作，設(shè)計了紐約第一家完全使用電燈照明的劇院，幫助許多舞者尋找新的可能性來發(fā)展自己的演藝事業(yè)。
天才是1%的靈感加上99%的汗水。——愛迪生
他的實驗室看起來更像是畫室，而不是科學(xué)家的工作室。有時他沉迷工作就會睡在地板上的衣服里。他的名言「天才是1%的靈感和99%的汗水」詮釋了他的職業(yè)道德觀。做一個創(chuàng)造者不是一句空話，而是一種生活方式。
有句話說，只有業(yè)余愛好者才需要別人給靈感，專業(yè)的創(chuàng)作者靠的是自己日復(fù)一日重復(fù)工作。我多么不希望這是真的，但別無他法?；蛘呔拖裎业囊粋€朋友說的：「如果你不利用各種信息，你就不可能保持靈感?！顾f的信息是指讀書，看電影，聽音樂，去畫廊，和聰明有趣的人交談，旅行和探索一個新的國家。這可以看作一種「消費」。一旦你「消費」了，你就必須創(chuàng)造并回饋世界。
在閱讀了這些創(chuàng)造者的故事后，我們可以看到所有人都有一個共同點——努力工作。所有的創(chuàng)造者都有一個人生座右銘——不斷創(chuàng)造。其他的部分只是他們的個性。
做一個創(chuàng)造者不是一個頭銜，而是一種生活方式。這不是三天打魚兩天曬網(wǎng)的事，也不僅僅是一個愛好，這是你的生活。當(dāng)然，他們能夠堅持下去，也因為他們內(nèi)心對于這件事情足夠熱愛。
我們不需要上帝般的靈感來創(chuàng)造非凡。真正的創(chuàng)造者總是在收集周遭各種各樣的信息，無論是在自然中、在不同的國家、在書籍中、在電影中、在音樂中、在食物中，還是在與藝術(shù)家或其他像你這樣的創(chuàng)造者的合作中。
同樣值得注意的是，創(chuàng)作者在創(chuàng)作時通常都是以自我為中心的。他們不允許其他人越俎代庖，因為他們想確保他們的工作朝著自己認(rèn)同的方向發(fā)展。而且，這是因為他們喜歡創(chuàng)造自己的生活，而不是讓別人為他們創(chuàng)造生活。當(dāng)然，在大多數(shù)現(xiàn)代環(huán)境中，在工作中以自我為中心是不現(xiàn)實的，也是不的。但每個人都有自己的方式。有些人是推動者，有些人是獨裁者。
PS：當(dāng)然還有更多偉大的創(chuàng)造者值得我們?nèi)懀o論男女）。這個名單僅代表個人觀點。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
常見的頁面跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)等，再設(shè)計時需要考慮好其中的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，從而做出最合適的設(shè)計。
頁面跳轉(zhuǎn)在APP中屬于最常見，也是最基礎(chǔ)的一個交互細節(jié)點。
我們常見的跳轉(zhuǎn)方式：直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)、聯(lián)動；其它酷炫的效果我們看過很多，但是現(xiàn)實中能做到的又有幾個呢？
首先我們看一下，我們的視覺順序「閱讀順序」是：左→右，上→下。因此延伸出目前APP最常見的兩種頁面跳轉(zhuǎn)方式：左右跳轉(zhuǎn)，上下跳轉(zhuǎn)。
最原始、最簡單的跳轉(zhuǎn)方式，web端常見，在APP中出現(xiàn)較少，標(biāo)簽切換常見，這個比較簡單，沒什么講的。
常用于快速開發(fā)，Android中常用。
實現(xiàn)難度：無；
維護成本：無。
最常見的跳轉(zhuǎn)方式。（ios原生效果）
實現(xiàn)難度：簡單 ；
維護成本：低；
運用場景：夫級→子級→子子級，依次類推。
常用場景：
這里有個細節(jié)要注意，就是我們的返回鍵在左上角，也就養(yǎng)成了用戶一種習(xí)慣，左上角的鍵，與點擊之后的效果，往往就應(yīng)該是頁面從右側(cè)退出的樣子，與進入時反向的效果。
這也是為什么大部分APP不會把入口按鈕放在左上角的原因。
那么左上角這個位置，除了給返回鍵當(dāng)做固有的位置外。還常常用于抽屜式導(dǎo)航，因為抽屜式導(dǎo)航的方向，與返回時的移動方向是一致的。常見抽屜式導(dǎo)航APP如：滴滴打車、摩拜單車等。
相對于左右跳轉(zhuǎn)，上下跳轉(zhuǎn)就比較難理解了。
實現(xiàn)難度：簡單 ；
維護成本：低。
這種跳轉(zhuǎn)方式也很常見，但是大部分人不清楚什么時候用，這里我們簡單分析下。
運用場景：
1. 對當(dāng)前頁面創(chuàng)建新的條目時；
2. 獨立啟動的一個子內(nèi)容。（如小程序：微信/支付寶等）
比如我們在微信聊天頁，發(fā)起一個聊天的時候：
還有我們新添加群人員時，新建筆記本時，新建地址時等。
我們用微信聊天頁面在舉例：點擊＋號離的內(nèi)容時：圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現(xiàn)，因為這些創(chuàng)建都是對當(dāng)前聊天窗口一次性產(chǎn)生內(nèi)容。（大家可以去感受一下這些細節(jié)）
下面我們看下百度的設(shè)置>地址管理>添加地址：左右>左右>上下。
實現(xiàn)難度：中等；
維護成本：低；
運用場景：完全切換內(nèi)容，換到一個全新的內(nèi)容集合里。
常見的有平安好醫(yī)生中間的按鈕，一級大姨媽APP中間的商城。
實現(xiàn)難度：高 ；
維護成本：高；
運用場景：元素之間從上級到下級關(guān)聯(lián)性強。
如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內(nèi)APP很少有這種聯(lián)動效果，因為一旦頁面結(jié)構(gòu)改變，整個效果基本無法復(fù)用。
類似于這種強聯(lián)動，我們會在很多概念設(shè)計稿中看到，但是在實際的APP是很少見到的。因為開發(fā)成本/維護成本都很高。
這里強調(diào)一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口，另一種是搜索框做入口。
icon做入口：更像是上下級關(guān)系，常用左右跳轉(zhuǎn)來實現(xiàn)。比如：抖音。
搜索框做入口：點擊就給與獲取光標(biāo)的感知，所已做好做簡單的聯(lián)動過渡效果。比如：微信、云音樂。
關(guān)于其它方式，基本上只有極個別的APP中可以看到。
其它的方式，要結(jié)合實際的情況來考究。一定要注意關(guān)聯(lián)性。比如微信新出的浮動展開效果，因為元素要浮動，為了更加貼合所以有了收縮的效果。
形式上其實就是上下左右內(nèi)外?？紤]好之間的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，就可以幫助我們找到最合適的設(shè)計。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
表單作為平臺與用戶聯(lián)系最為緊密的一環(huán)，也是影響商業(yè)交易成功與否的重要分水嶺。良好的表單設(shè)計可以給用戶提供流暢自然的交易體驗，保證用戶購物情緒的正向增長，而混亂無序的表單則引起用戶的負面情緒，影響甚至阻礙用戶交易的完成，降低用戶的品牌好感度和信賴度。
那么在設(shè)計過程中，需要怎樣規(guī)避風(fēng)險，提升表單頁面的產(chǎn)品體驗?zāi)?？下面我們將結(jié)合實際案例，從七個方面介紹表單設(shè)計中的常見注意事項。當(dāng)然，這些規(guī)則都是在表單設(shè)計中的一般準(zhǔn)則，每條準(zhǔn)則都有例外。
01 | 單列瀏覽
表單承載的主要功能是向用戶清楚地傳達信息，保持有秩序的單列表單形式更利于用戶瀏覽動線，它能幫助用戶識別并填寫內(nèi)容，而多列的表單形式則會破壞用戶填寫規(guī)律，影響效率。
02 | 豎向排列
在表單中有多個選項以供用戶選擇時，將每個選項以豎向的排列方式位于每個選項下方時，更利于用戶閱讀瀏覽的習(xí)慣。
03 | 操作一致
表單填寫過程中我們應(yīng)當(dāng)避免在整流程中出現(xiàn)按鈕樣式、顏色的變化。需要用戶確認(rèn)的操作行為的一致能有效減少用戶在行動時的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗，從而實現(xiàn)最終商業(yè)上的交易成就。
04 | 標(biāo)題不可取代
雖然通過使用占位符代替標(biāo)題的方式擴充了表單的填寫空間，減少了視覺噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發(fā)輸入，占位符消失，用戶可能會陷入這里該填寫什么的迷茫，必須刪除所有輸入內(nèi)容后才能再次顯示標(biāo)題，顯然，這是違背人性的。
05 | 輸入域符合預(yù)期
輸入域的長度與預(yù)期輸入的內(nèi)容成正比，確保輸入字段長度符合用戶心理預(yù)期，并能在表單中能完整呈現(xiàn)。
06 | 不隱藏基礎(chǔ)幫助信息
作為一個購物流程中的信息確認(rèn)和采集環(huán)節(jié)，需要用戶對于購買的產(chǎn)品有明確的認(rèn)知。因此在設(shè)計過程中對于用戶填寫表單有基礎(chǔ)幫助的信息應(yīng)該做強調(diào)或顯示設(shè)計，避免出現(xiàn)因為隱藏幫助信息導(dǎo)致的客戶投訴。
07 | 減少二次確認(rèn)
基于OTA行業(yè)特性，出行表單業(yè)務(wù)對標(biāo)電商購買表單業(yè)務(wù)需要填寫的信息更為冗長，層級更為復(fù)雜，為了減少用戶填寫過程中的心理負擔(dān)，降低填寫難度，我們需要對不必要的信息進行刪減或合并，為用戶信息輸入提供便利。
以注冊環(huán)節(jié)為例，在Web設(shè)計時往往會有二次確認(rèn)密碼的環(huán)節(jié)，但在移動端這樣的操作會增加用戶填寫的負擔(dān)，因此大部分移動端界面上我們不建議對用戶的密碼信息進行二次確認(rèn)，轉(zhuǎn)而通過使用明文顯示或者優(yōu)化密碼消失交互的方法來改善這一環(huán)節(jié)的體驗。
08 | *號的使用
沿用通用符號習(xí)慣，在表單設(shè)計中若是對業(yè)務(wù)必填的信息，我們往往采用 * 號的形式來幫助用戶區(qū)分信息優(yōu)先級。但當(dāng)表單中必填信息多于非必填信息時，大量 * 號的應(yīng)用反而會給用戶認(rèn)知增加負擔(dān)，使得無法快速識別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設(shè)計中，當(dāng)必填項多于非必填項時，隱藏 * 號標(biāo)記，轉(zhuǎn)而通過暗提示標(biāo)記非必填項的形式來幫助用戶識別。
09 | 暗提示的應(yīng)用
暗提示作為輔助用戶填寫表單的主要方式，在設(shè)計上，需要盡可能地減少視覺噪音，確保文案言簡意賅，表現(xiàn)形式不干擾用戶。因此，對比度過深或過淺，色彩過于突出的都不適合用于暗提示的視覺表現(xiàn)。
在交互上，暗提示也并不是一直存在的。當(dāng)光標(biāo)觸發(fā)表單項時，暗提示保持顯示，指導(dǎo)用戶輸入。而當(dāng)用戶輸入字段后，暗提示內(nèi)容隱藏，讓用戶專注于已填內(nèi)容。
10 | 設(shè)置默認(rèn)選項
在復(fù)雜表單中，對于如證件類型、手機區(qū)號、國籍等較為通用的選項，為用戶提供默認(rèn)選擇的交互可以有效簡化操作步驟，減輕用戶填寫表單的負擔(dān)，更快地幫助用戶完成表單內(nèi)容的填寫。
11 | 替代輸入
對于表單填寫過程中可以固化選擇的信息，應(yīng)讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。
如：出游人信息采集時，提供添加常用出游人選項可以幫助減少重復(fù)填寫的負擔(dān)；證件類型采集時提供證件類型選項可以減少用戶困惑，在已有的選項中快速選擇；郵箱采集時自動聯(lián)想顯示Email網(wǎng)址可以輔助用戶規(guī)范文本格式，快速完成表單填寫。
12 | 鍵盤匹配
根據(jù)表單填寫類型的不同，自動匹配鍵盤類型。如“中文輸入”呼出中文鍵盤，“姓名（英文）”輸入呼出鎖定大寫的英文鍵盤，“手機號碼”輸入呼出數(shù)字鍵盤……免去用戶切換鍵盤操作的步驟。
同時根據(jù)填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助用戶實現(xiàn)換行/完成的操作，省去用戶收起點開鍵盤的重復(fù)動作和表單上下填寫項的切換，讓填寫表單的過程更為順暢，用戶思考不被打斷。
13 | 按鈕層級
在用戶面對多個按鈕的場景選擇時，我們應(yīng)當(dāng)幫助用戶預(yù)先區(qū)分出主要行動和次要行動，通過視覺語言強調(diào)主要按鈕，弱化次要按鈕，引導(dǎo)用戶進行選擇。
14 | 二次確認(rèn)
因移動端特性，用戶在填寫場景較為不穩(wěn)定如吃飯途中、行駛途中等，當(dāng)用戶花費精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場景，需要在此時進行二次操作確認(rèn)，確認(rèn)用戶操作意圖。當(dāng)然，如果用戶沒有對表單進行任何編輯，這樣的退出操作是不需要二次確認(rèn)的。
15 | 多行文本
在復(fù)雜表單中，面對填寫內(nèi)容過長的同類表單，用戶會在預(yù)覽時產(chǎn)生輸入壓力。運用字號、顏色、間距等視覺手段將相似層級的信息進行邏輯分組，幫助用戶更好地區(qū)分多行文本的信息層級，便于輸入。
16 | 號碼組合規(guī)律
對于一些常用的號碼字段，可以采用線下通用的數(shù)字組合規(guī)律幫助用戶閱讀和記憶，如電話號碼的組合規(guī)律為 3 4 4 ，銀行卡號的組合規(guī)律為 4 4 4 4 3?？崭裨跀?shù)字呈現(xiàn)處的應(yīng)用雖然細微，但是在長數(shù)字的閱讀場景中仍能給用戶帶來識別便利。
17 | 選項露出
在網(wǎng)頁端表單設(shè)計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設(shè)計中，觸發(fā)選擇器后的二次點擊會增加用戶的填寫成本。所以在設(shè)計時，當(dāng)選項少于8時，在表單中直接顯示所有可選項，當(dāng)選項超出過多時則在列表浮層中進行選擇。
18 | 減少頁面跳轉(zhuǎn)
在表單填寫中我們期望用戶保持專注，盡量避免產(chǎn)生引導(dǎo)用戶離開當(dāng)前頁面的填寫交互，這種交互跳轉(zhuǎn)很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。
19 | 關(guān)聯(lián)標(biāo)記
當(dāng)用戶提交表單信息后，如已填寫的內(nèi)容有偏差，需要明確的標(biāo)記有問題的數(shù)據(jù)及錯誤原因，幫助用戶找到問題并解決問題。杜絕報錯信息描述模糊，信息不關(guān)聯(lián)的報錯信息引發(fā)用戶困惑。
20 | 實時校驗
在某些業(yè)務(wù)場景中，為了幫助用戶在提交信息前校正他所填寫的內(nèi)容，避免大面積報錯場景的出現(xiàn)。我們可以使用實時校驗的方法，在用戶輸入完成后進行判斷及結(jié)果反饋，如登陸注冊流程的驗證碼校驗就可以運用實時校驗的報錯方式。
當(dāng)然需要注意的是，運用實時校驗的表單需在用戶明確離開此項輸入狀態(tài)時再進行結(jié)果反饋，而非在填寫過程中進行實時校驗，避免出現(xiàn)填寫時持續(xù)報錯的情況。
21 | 密碼保護
在輸入密碼的表單中，部分平臺會在密碼輸入時顯示暗文字段以此保護用戶隱私，而鑒于前述第七條準(zhǔn)則，移動端的密碼已簡化至只輸入一次，暗文的顯示會讓用戶無法確認(rèn)所輸密碼信息。因此在需要隱私保護的場景下，我們需要完善密碼交互的呈現(xiàn)形式，當(dāng)輸入時，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入后再變成暗文，這樣的交互改善可以確保用戶在輸入中明確內(nèi)容，也滿足了其隱私需求。
22 | 提交反饋
在用戶完成整個任務(wù)環(huán)節(jié)時，提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強烈的情感反饋。所以在設(shè)計時，我們需要提供正向的激勵夸贊用戶表單填寫成功，在表單沒有完成時鼓勵用戶修改內(nèi)容，重新提交，不可以負面情緒責(zé)怪用戶。
今年上半年，本著提升途牛產(chǎn)品調(diào)性，為內(nèi)容傳達提效的初衷，由途牛UED組織并發(fā)起了一次針對現(xiàn)有關(guān)鍵頁面升級的項目，在架構(gòu)升級全量推進初期，我們優(yōu)先選取了酒店表單業(yè)務(wù)作為此次設(shè)計重構(gòu)的首選試驗點。
表單作為一個偏理性的產(chǎn)品，直接影響著用戶決策到產(chǎn)品轉(zhuǎn)化的數(shù)據(jù)，在此環(huán)節(jié)，更需要降低用戶成本，維持產(chǎn)品決策熱情以實現(xiàn)商業(yè)價值上的成功。在酒店表單業(yè)務(wù)改版過程中，除了應(yīng)用上述七方面的設(shè)計準(zhǔn)則幫助提升用戶體驗，我們也結(jié)合了酒店現(xiàn)有問題和產(chǎn)品特性進行了更為精細化的設(shè)計重構(gòu)。
整合信息框架
—
體制讓步
對用戶來說，途牛是一個整體的產(chǎn)品，所有表單的基礎(chǔ)體驗應(yīng)該是一致的。以往，基于企業(yè)平臺的發(fā)展，酒店細分的國內(nèi)酒店和國際酒店兩個業(yè)務(wù)相對獨立，雖然同樣隸屬于下單環(huán)節(jié)，但是業(yè)務(wù)迭代進程及側(cè)重方向的不同導(dǎo)致表單前臺呈現(xiàn)差異較大。
借助途牛整體關(guān)鍵頁面升級的項目，在此次酒店業(yè)務(wù)重構(gòu)初期，協(xié)同兩個業(yè)務(wù)的產(chǎn)品、設(shè)計、研發(fā)我們共同整合資源，解決歷史遺留體驗問題，為國內(nèi)、國際酒店表單業(yè)務(wù)進行整體體驗的統(tǒng)一和提升助力。另一方面，UED也通過酒店業(yè)務(wù)的試點思路，將基礎(chǔ)表單框架進行模塊細分，逐步影響并推廣至全站表單業(yè)務(wù)升級。
框架構(gòu)建
回顧現(xiàn)有酒店表單業(yè)務(wù)的問題，主要體現(xiàn)在內(nèi)容層級模糊，類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項，只是基于業(yè)務(wù)類型進行了單模塊的設(shè)計，而對于用戶來說，差異化的表單項樣式無形中增加了填寫時信息獲取的成本。
基于人體本身的生理構(gòu)造，我們在獲取文本信息時，并不會逐字閱讀，往往采用“掃視”的方式識別段落輪廓從而獲取信息，規(guī)律性的排列方式也會幫助持續(xù)這種“掃視”的節(jié)奏，提升信息轉(zhuǎn)化效率。
因此在設(shè)計上我們遵循相似信息一致性的原則，簡化重復(fù)冗余的視覺噪音，將每個單元表單項模型遵循“上類型+下內(nèi)容”的形式幫助用戶快速對所需填寫的表單類型建立心理預(yù)期。在大量相同的填寫區(qū)域，統(tǒng)一左側(cè)內(nèi)容標(biāo)題對齊方式，并通過字色、字重等形式確保未觸發(fā)時內(nèi)容標(biāo)題為主，暗提示為輔，填寫后填寫內(nèi)容為主，內(nèi)容標(biāo)題為輔的視覺表達，從而在表單的不同階段仍舊保證了用戶對于主次信息的識別體驗。
品牌信息傳達
為了減弱表單填寫頁冰冷感，在框架信息整合的基礎(chǔ)上，我們此次改版也將品牌解構(gòu)，用色彩的形式融入表單頁面設(shè)計，將品牌功能化，輔助產(chǎn)品以深化品牌用戶心中形成立體感知。
當(dāng)然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控件、操作、提示這四個方面展開，在不影響表單主要信息呈現(xiàn)的基礎(chǔ)上，遵循適度、適量兩個原則。
內(nèi)容層級排序
—
用戶吸引
回顧整個購買流程，填寫訂單業(yè)務(wù)承擔(dān)著維系用戶在產(chǎn)品詳情所產(chǎn)生的內(nèi)容吸引到內(nèi)容轉(zhuǎn)化的責(zé)任，而如何在枯燥的酒店表單中維穩(wěn)甚至加固用戶的內(nèi)容吸引？為此，我們參照了《Actionable Gamification》關(guān)于人性八大核心驅(qū)動力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們。
結(jié)合對用戶使用場景的需求分析，我們將信息在用戶心中的關(guān)注度進行了重新排序，首屏弱化了用戶已經(jīng)在詳情頁明確的酒店名稱，轉(zhuǎn)而對用戶需在此環(huán)節(jié)明確的房型、入住時間、離店時間等內(nèi)容進行了強化和整合，明確產(chǎn)品歸屬。同時為了加固用戶的內(nèi)容吸引，我們前置了酒店“超值價”、“可免費取消”等信息來解除用戶對于產(chǎn)品價格和沉沒成本的疑慮，從而正向地激勵用戶完成后續(xù)的表單填寫。
細分模塊
除了對首屏信息的排序重置外，對于需要用戶填寫的每個單元模塊我們也做出了一些調(diào)整。
如取消險模塊，此前為避免客訴，將所有需要用戶確認(rèn)和查看的信息都進行了高亮提示和行動引導(dǎo)。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時想要詳細了解的，過多的信息干擾反而影響了有用信息識別，也降低了用戶填寫表單的效率。因此新版表單重構(gòu)時我們將協(xié)議信息整合至末尾統(tǒng)一確認(rèn)，同時對文字、icon進行視覺減負，統(tǒng)一弱化輔助信息呈現(xiàn)，轉(zhuǎn)而強調(diào)用戶需要確認(rèn)的取消險金額和投保人模塊。
從上圖國際酒店改版前后的方案進行對比可見，每個細分模塊都有著或多或少細節(jié)的調(diào)整，當(dāng)然還有沒有展現(xiàn)的輔助信息交互浮層框架的統(tǒng)一。這些信息呈現(xiàn)的形態(tài)與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡、幫助用戶、信息分組、減少跳轉(zhuǎn)、及時反饋”這七大原則，每一個細節(jié)都可以展開來細細剖析，這里就不多加贅述了。
結(jié)語
—
蚍蜉亦可撼樹，在產(chǎn)品升級的過程中，用戶體驗的提升往往需要依靠像表單這樣一個個微小的業(yè)務(wù)作為突破點，從而裂變反哺至全局。此次酒店表單重構(gòu)項目從產(chǎn)品角度來看，功能上并沒有改變，而通過代入用戶場景，用戶感知，用戶行為習(xí)慣等方面進行細節(jié)的體驗升級。后續(xù)我們還將進行更加深入地探索與迭代，將體驗升級持續(xù)擴散至其他業(yè)務(wù)，為每一位途牛用戶帶來更便捷、更自然的出行體驗。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
字符是指計算機中使用的字母、數(shù)字、標(biāo)點符號等等。
計算機最初發(fā)明出來是用來解決數(shù)字計算問題的。
后來發(fā)現(xiàn)，計算機還可以做更多的事，例如文本處理。其實計算機挺笨的，它讀到的所有字符都是由1和0組成的字符串，因為計算機電路只有兩種狀態(tài)，「開」和「閉」，對應(yīng)「1」和「0」。計算機也只可以直接存儲和處理二進制數(shù)字。
「二進制」是數(shù)字世界里的基本規(guī)則。
下面這些不同格式的文件，在本質(zhì)上都是一串由1和0組成的代碼，要了解這些文件首先要了解二進制。人有十根手指頭，但計算機電路只有「開」和「閉」兩種狀態(tài)，所以滿十進一位的計數(shù)方式更適合人類計算，而滿二進一的二進制更適合計算機。計算機只需要1和0這兩個數(shù)字就可以傳遞一切信息。
△ MP4
△ MP3
△ JPG
△ TXT
△ AVI
以圖像為例，我們用電腦或手機看到的圖像都是在某個角落里存儲著下面這樣的一串?dāng)?shù)據(jù)。開頭的16位翻譯過來就是 BMP文件開始的標(biāo)識。
BMP文件標(biāo)識后面的數(shù)字就是圖像的各項基本信息。
△ 圖像的各項基本信息
△ 顏色深度
最開始的24位，都是1，像素顯示為紅、綠、藍三種顏色，相加后顯示為白色。
接下來的24位，前8位是1，后面都是0，像素顯示為紅色。
再后面24位的前16位都是1，最后8位為0，像素顯示紅、綠兩色，相加后顯示為黃色。
根據(jù)這樣的規(guī)則整個55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色。
△ 二進制圖片生成方式
△ 色光三原色和顏料三原色區(qū)別
下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設(shè)計好的規(guī)則排列好，只需要找到正確的打開方式按照特定的規(guī)則來解讀這些數(shù)據(jù)，我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規(guī)則排列的？我們又要用怎樣的方式來解讀？這就用到了擴展名，在文件的名字后面加幾個特定的字符，就可以幫助系統(tǒng)辨別出文件的類型，從而提示電腦去按照某種特定的規(guī)則來正確解讀其中的信息。
△ MP4格式擴展名
△ MP3格式擴展名
△ JPG格式擴展名
△ TXT格式擴展名
△ AVI格式擴展名
更多其他文件拓展名：
為了在計算機上顯示字符，必須將字符轉(zhuǎn)換成二進制數(shù)字。所以就有了統(tǒng)一、標(biāo)準(zhǔn)字符轉(zhuǎn)換規(guī)則，即字符編碼。字符編碼是給所有的漢字定一個的數(shù)字編號，并用1和0來表示這個數(shù)字編號。
文字的一個字符對應(yīng)一個編碼（碼點），而編碼對應(yīng)字符集里的一個「字」，字符通過字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個「字」分配一個編碼。
△ 文本編碼流程
字符集里的每一個編碼對應(yīng)的是一個「字」而不是「字形」，也就是一個「字」在不同的地區(qū)或標(biāo)準(zhǔn)中可能有不同的「字形」，但字符集中只能對其分配一個編碼（除非相差過大，比如簡化字），要顯示其不同的「字形」要通過使用為不同地區(qū)或標(biāo)準(zhǔn)設(shè)計的字體來實現(xiàn)。
△ 字異形（左簡體中文，右日文）
ASCII
ASCII（American Standard Code for Information Interchange，美國信息交換標(biāo)準(zhǔn)代碼）出現(xiàn)在上個世紀(jì)60年代的美國，ASCII 一共定義了128個字符，包括英文字母 A-Z，a-z，0-9，一些標(biāo)點符號和控制符號。ASCII 采用的編碼模型是簡單字符集，在英語系國家里 ASCII 標(biāo)準(zhǔn)很完美。但是世界上有好幾千種語言，其他語言系的國家想使用計算機，ASCII 就遠遠不夠了。所以編碼進入了混亂的時代。
△ ASCII編碼
混亂時代
計算機的一個字節(jié)是8位，可以表示256個字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規(guī)定好的128個字符沒有異議，但是不同語系的人對于其他字符的需求不一樣，所以對于剩下的128個字符的擴展千奇百怪。而且在亞洲語言系統(tǒng)中有更多的字符。于是就又產(chǎn)生了各種多字節(jié)表示一個字符的方法，每個語系都有自己特定的編碼頁（code pages），這就使整個局面更加混亂不堪。這時 Unicode 出現(xiàn)了。
Unicode
Unicode 就是給計算機中所有的字符各自分配一個代號。Unicode 可以認(rèn)為是字符的編號，它為每種語言中的每個字符設(shè)定了統(tǒng)一并且唯一的二進制編碼，Unicode 字符集和編碼方式解決了跨語言、跨平臺的交流問題。但在 Unicode 里每一個字符都是用4個字節(jié)來編碼，原本英文字母僅需1個字節(jié)編碼，中文需2~3個字節(jié)編碼即可，這對于存儲或傳輸資源而言是很不劃算的。
UTF-8
UTF-8 基于 Unicode 編碼的一種節(jié)約字節(jié)的編碼，是一種可變長度字符編碼方式。在UTF-8編碼中，英文字母是一個字節(jié)，中文（非生僻字）是2~3個字節(jié)?？梢哉J(rèn)為， UTF-8 是對 Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節(jié)約了存儲空間和傳輸帶寬，因而受到了極大的推廣應(yīng)用。并且 UTF-8 兼容 ASCII 字符集。
UTF：Unicode Transformation Format
△ 中文編碼類型
「文字」是信息交流的工具，可讀性、易讀性至關(guān)重要。在網(wǎng)頁設(shè)計中文字使用需要考慮幾個要素：首先考慮字體，其次是字重、字號、行高、字間距、行間距、段間距等。
△ 字體、字重
△ 字間距、字號、行高
△ 行間距、段間距
「字體」是文字的外在形式特征，不同的字體有不同的性格。
字體種類
綜合中文、英文都適用的廣義分類。
襯線、無襯線
△ 襯線和無襯線差異1
△ 襯線和無襯線差異2
字體 – 中文
字體構(gòu)成：
△ 筆畫
中宮，是指等分成九個小方格最中間的那一格。
△ 中宮
△ 中宮和字體關(guān)系
△ 中宮緊湊、中宮松散
間架結(jié)構(gòu)，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結(jié)構(gòu)可分為兩類：單體字、合體字。
△ 單體字 間架結(jié)構(gòu)
△ 合體字 間架結(jié)構(gòu)
漢字字形眾多，有些字形會產(chǎn)生視覺大小變化，頂格、縮格、出格就是針對不同結(jié)構(gòu)的字體筆畫特征進行微調(diào)，讓他們看起來更加均衡、等大、視覺更完整。
△ 調(diào)整前
△ 調(diào)整后
字形調(diào)整實例：
襯線、無襯線字形演變：
△ 襯線 字形演變
△ 無襯線 字形演變
字體對比：
微軟雅黑、方正蘭亭黑簡體、思源黑體、蘋方-簡，筆畫寬度均勻，橫平豎直。同一字號，微軟雅黑最粗，小字號時閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來，可以更好地適應(yīng)其他應(yīng)用場合。
黑體、華文黑體、冬青黑體筆畫末端寬度不同。
字體 – 英文
「字谷」概念來自西文字母設(shè)計，字谷指字母中部分或完全封閉的空間，即字母當(dāng)中留白部分。
英文的字體結(jié)構(gòu)是由4條平行線組成，有時候是5條，但是一般大寫線會忽略?！富€」在西文中是標(biāo)準(zhǔn)，單個字母的所有立腳點都是在這條線上（除了 g、j、p、y）。英文文字結(jié)構(gòu)多種多樣，4條平行線的位置也會發(fā)生改變。
升部：上緣線和主線之間的內(nèi)容。
降部：下緣線和基線之間的內(nèi)容。
字體對比：Helvetica Neue、Arial、DIN
Helvetica Neue：中性，無襯線，現(xiàn)代主義風(fēng)格字體。字體末端嚴(yán)格保持橫平豎直，性格嚴(yán)謹(jǐn)、保守，沒有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本，擁有更多的字重，更易于不同場合的應(yīng)用。字形則相對偏胖，筆畫更清晰，而且小字號的情況下可讀性也很高。
Arial：Arial 是一套隨同多套微軟應(yīng)用軟件所分發(fā)，無襯線。該字體比例及字重和 Helvetica 極相似，其實是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細微的調(diào)整和變動，以增加它在電腦屏幕的不同分辨率的可讀性。
DIN：字形瘦長，無襯線，適合顯示比較長的數(shù)字，但是小字號的情況下識別度較低。DIN 字體在德國有著悠久歷史，是交通標(biāo)志、路牌、門牌和車牌的標(biāo)準(zhǔn)字體。雖然曾經(jīng)是德國納粹使用的字體，但是經(jīng)過設(shè)計和重新升級。DIN 在雜志、海報以及其他各種設(shè)計領(lǐng)域都被廣泛地使用。
Helvetica Neue、Arial、DIN 數(shù)字對比：
「字重」是同一種字體的不同字形粗細，即字體重量。字重的劃分根據(jù)不同字體廠商各有不同，不同的字重稱呼也可以不一樣，常見的劃分如下：
在排版中，一種字體會在標(biāo)題、正文、說明注釋等不同內(nèi)容下使用，單一的字重不能很好適應(yīng)排版需求，于是衍生出了同一個字體的不同字重。
「字號」是字體的高度，不同平臺字號規(guī)范不同。
在界面設(shè)計中，文字字號決定了信息層次和權(quán)重。首先要設(shè)定基準(zhǔn)字號（最小字號），然后可依據(jù)一定規(guī)律設(shè)定導(dǎo)航、標(biāo)題等稍大字號。一般網(wǎng)頁基準(zhǔn)字號有12px、14px、16px等。
字號也受閱讀距離影響，眼睛到屏幕距離40~70cm，為較適合的閱讀距離。
Ant Design 定義的電腦顯示器閱讀距離（50 cm）從原先的12上升至14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。
「行高」可以理解為一個包裹在字體外面的無形的盒子。字號和行高決定著一套字體系統(tǒng)的動態(tài)與秩序之美。
西文：西文基本行高是字號的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創(chuàng)造行間空隙。
中文：中文因為字符密實且高度一致，所以一般行高需要更大，根據(jù)不同人群的特點（兒童、年輕人、老年人）以及使用環(huán)境，可達到1.5~2倍甚至更大。
Ant Design 受到5音階以及自然律的啟發(fā)定義了10個不同字號以及與之相對應(yīng)的行高。
「字間距」是指一組字母之間相互間隔的距離，受字偶距和字體影響。
字偶距：是指兩個字母（或其他字符，比如數(shù)字，標(biāo)點符號等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協(xié)調(diào)的。所以需要調(diào)整字偶距來提升可讀性。
按字間距可分類為：比例字體（Proportional）和等寬字體（Monospaced）。
比例字體：根據(jù)字符外形特點設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。
等寬字體：每個字符設(shè)置相同字距的字體，其優(yōu)點是可以很好的控制排版對齊。
行間距（line spacing / leading）：行與行之間的距離，作為一段文本中的留白，行間距讓字與字之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。
排版推薦使用行間距1.2~2倍。
如何設(shè)定行間距，如何規(guī)范行間距
行間距由行高決定，為了確保可讀性增加行間距，就需要增加行高。舉個例子：字號12，行高設(shè)定20，那么行間距=「（行高-字號）÷2」×2，除2又乘2，我就簡單的簡化成行間距 = 行高 – 字號，那么行間距就是20-12=8，并且可以將這個數(shù)值固定下來，重復(fù)使用。
注：至于為什么是20，因為最初一個字節(jié)用8個二進制位來表示，所以現(xiàn)在的很多網(wǎng)頁設(shè)計中常用到8。12+8=20，參考 Ant Design，網(wǎng)上有很多設(shè)計師總結(jié)的行間距計算方法，對于一個數(shù)學(xué)不好的我來說，參考已有總結(jié)和經(jīng)驗得出的數(shù)值，固定這個數(shù)值重復(fù)使用，這樣最簡單。
段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁面節(jié)奏，與字體、行高相互關(guān)聯(lián)。為保證文章易讀性，正文段間距，可以簡單地取一個空行（也就是一個行高），這是比較常規(guī)也比較合適的做法。舉個例子：字號12，行高設(shè)定20，段間距 = 行高 + 行間距。
要設(shè)置「有節(jié)奏感的文本內(nèi)容」就要遵循這些規(guī)則：段間距大于行高，行高大于行間距，行間距大于字間距。
網(wǎng)頁設(shè)計內(nèi)容一般都是通過電腦各種瀏覽器來承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統(tǒng)里的字體。
字體是界面設(shè)計中最基本的構(gòu)成之一，科學(xué)的字體系統(tǒng)：始終保證信息具有優(yōu)秀的易讀可讀性，提升用戶的閱讀體驗及工作效率。
下圖數(shù)據(jù)來源：世界互聯(lián)網(wǎng)市場份額統(tǒng)計網(wǎng)站 Net MarketShare。
△ 操作系統(tǒng)市場占有率 TOP10
各操作系統(tǒng)默認(rèn)字體：
電腦瀏覽器直接讀取用戶操作系統(tǒng)里的字體，不同瀏覽器對文字的渲染方式不同，因此了解市場瀏覽器使用情況很有必要。
下圖數(shù)據(jù)來源：世界互聯(lián)網(wǎng)市場份額統(tǒng)計網(wǎng)站 Net MarketShare
除了操作系統(tǒng)默認(rèn)字體，其次需要優(yōu)先選擇使用的就是已購版權(quán)字體，如果沒有已購買的字體，可考慮一些免費字體，非免費字體使用時需謹(jǐn)慎。
△ 公司常購版權(quán)字體
字體使用三原則
體系化：在同一個系統(tǒng)UI設(shè)計中先建立體系化的設(shè)計思路，對主、次、輔助、標(biāo)題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場景中進行微調(diào)。建立體系化的設(shè)計思路有助于強化橫向字體落地的一致性，提高字體應(yīng)用的性價比，減少不必要的樣式浪費。
重復(fù)：重復(fù)設(shè)計中出現(xiàn)的一個或多個內(nèi)容。任何事情都可以重復(fù)。字體、字重字號、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過3種，一般同一個系統(tǒng)UI設(shè)計內(nèi)容的字體數(shù)量建議2種即可，中文一種、英文數(shù)字一種。且字體樣式上也遵循重復(fù)原則，避免毫無意義的使用大量字號、顏色、字重、行高等。
韻律：在需要拉開差距的時候可以嘗試選擇對比大的字體字號，令字號之間產(chǎn)生一種微妙的韻律感。為保證良好的閱讀體驗，每行保持適當(dāng)?shù)淖址麛?shù)量。每行上擁有適當(dāng)?shù)淖址麛?shù)量是文本可讀性的關(guān)鍵。如果每行文字太短，視線必須反復(fù)折回來，打破讀者的節(jié)奏。如果一行文字太長，用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符，因為會大大延緩用戶掃描和閱讀的速度。
現(xiàn)有產(chǎn)品字體統(tǒng)計
字體規(guī)范
綜合考慮不同操作系統(tǒng)選用最佳字體體驗。
代碼聲明：
一般情況下會選用「一粗一細」兩種字重。
粗體：在視覺面積上較重，筆畫加粗，字腔（筆畫間空間）小，突出顯示，產(chǎn)生強調(diào)作用。常用于標(biāo)題和標(biāo)語。
細體：在視覺面積上較輕，筆畫輕細，字腔（筆畫間空間）大，結(jié)構(gòu)疏朗清透，閱讀時不會讓讀者產(chǎn)生壓迫感。常用于正文和說明。
中文、英文推薦使用字重：
現(xiàn)有產(chǎn)品字號統(tǒng)計
字號規(guī)范
參考：Ant Design 受到5音階以及自然規(guī)律啟發(fā)定義了10個不同字號以及與之相對應(yīng)的行高。
使用比例字體，根據(jù)字符外形特點設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。
Ant Design 兩大色彩體系：系統(tǒng)級、產(chǎn)品級。
系統(tǒng)級色彩體系
系統(tǒng)級色彩體系主要定義了螞蟻中臺設(shè)計中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。
產(chǎn)品級色彩體系
產(chǎn)品級色彩體系則是在具體設(shè)計過程中，基于系統(tǒng)色彩進一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。
中性色包含了黑、白、灰。在網(wǎng)頁設(shè)計中被大量使用，合理的選擇中性色能夠令頁面信息具備良好的主次關(guān)系，助力閱讀體驗。中性色板一共包含了從白到黑的10個顏色。
Ant Design 的中性色主要應(yīng)用在文字、背景、邊框、分割線等場景中。產(chǎn)品中性色的定義需要考慮深色淺色背景的差異，同時結(jié)合 WCAG 2.0標(biāo)準(zhǔn)。中性色在落地的時候是按照「透明度」的方式實現(xiàn)。
VIP大數(shù)據(jù)用戶體驗部 的中性色也是主要應(yīng)用在界面的文字、背景、邊框、分割線等場景中?？紤]到深淺色背景的差異，中性色根據(jù)設(shè)計需求在落地的時候可按照色值和透明度兩種方式實現(xiàn)，兩種方式優(yōu)先使用色值方式，盡量避免兩者混搭使用。
功能色代表了明確的信息以及狀態(tài)，比如成功、警告、失敗、提醒、鏈接等。
功能色的選取需要遵守用戶對色彩的基本認(rèn)知。在一套產(chǎn)品體系下，功能色盡量保持一致，不要有過多的自定義干擾用戶的認(rèn)知體驗。
文案內(nèi)容來源于 Ant Design，一文一字之間可研究琢磨的空間還很大。
分享一個感觸很深的例子，里面有一個專業(yè)用語「閾yù值」和「閥fá值」，這兩個字一開始我看了很久才看出來區(qū)別，查資料了解到，其實「閥fá值」在專業(yè)行業(yè)里是一個錯別字，是一個錯誤的用詞，其正確用法是「閾值」是所屬行業(yè)認(rèn)可通用詞?！搁搚ù值」又叫臨界值，是指一個效應(yīng)能夠產(chǎn)生的值或最高值。
所以精準(zhǔn)、清晰的語言會更容易讓用戶理解，合適的語氣更容易讓用戶建立信任感。因此在界面設(shè)計時，在使用和定義文案時要注意以下幾點：
在有限的空間內(nèi)將重要的信息放在最前面，讓用戶第一眼看到最重要的內(nèi)容。（或通過高亮、留白等方式突出重要信息）。
因為硬件軟件一直在變化，設(shè)計規(guī)范和內(nèi)容也要定時更新，規(guī)范是為了在繁多復(fù)雜業(yè)務(wù)中尋求一種平衡，幫助各團隊更的完成任務(wù)，有些內(nèi)容適合強制規(guī)定，有些內(nèi)容適合規(guī)范一個范圍，有些內(nèi)容適合制定一種規(guī)律方法……當(dāng)出現(xiàn)特殊情況時需要重新審視和不斷完善靈活使用。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
UXRen
打造有價值產(chǎn)品的首要規(guī)則是，它應(yīng)該對某些人有真正的使用價值。也就是說，一個真實的人(或許多個人)會因為你的工作而解決了某些問題或?qū)崿F(xiàn)了某些需求。
這個道理是顯而易見的，但是，如果你去聽一聽這些產(chǎn)品設(shè)計們的日常用語，就會發(fā)現(xiàn)，在日常生活中，我們不常這樣說。
反而，在語言交流中，設(shè)計師經(jīng)常會“走捷徑”。有時會直接使用行業(yè)語言或?qū)＜倚g(shù)語來提高表達度，但大多數(shù)情況都是為了避免廢話。
舉例來講：
想象一下，當(dāng)用戶聽這些話時，他們能相信我們的最終目的是為他們創(chuàng)造價值嗎？
當(dāng)然，我們在使用語言捷徑時，其實是在把我們腦海中的各個點連接起來，這種基于對內(nèi)容的理解，在腦海中將一個概念與另一個概念聯(lián)系起來的思考方式——就像是火車在有序的系統(tǒng)中飛馳而過，直到停留在人們期待的站臺上一樣。
但在實際交流中，有可能出現(xiàn)兩種完全預(yù)料不到的結(jié)果：
第一種情況是，當(dāng)與一個認(rèn)知和你不太一致的人交流時，你認(rèn)為重要的事情，對方有可能完不理解為什么這樣。
比如說，作為一個設(shè)計師，當(dāng)我說“為什么這些東西不一致”的時候，我自己的邏輯是這樣的：
不夠一致=> 這些東西雖然看起來很像，但當(dāng)點擊的時候，可能有人會選A，也有人會選B=>這就會使用戶困惑，并且影響他們從我們構(gòu)建的內(nèi)容中獲得最大的價值。
其他精通設(shè)計語言的人，一般而言都會跟我一樣的思考問題。比如，讓東西“簡潔”其實是指讓它專注于最重要的點，以便人們能一眼就知道如何使用它。讓界面“可以呼吸”則是指讓人們在閱讀或者瀏覽時能更輕松愉悅。
但如果你并沒有建立這些認(rèn)知連接，你可能會不解：一致性、簡潔性和可呼吸空間為什么這么重要呢，這些價值觀看起來是不是有點隨意？而且這些疑惑有可能是對的，為了一致性而保持一致也許并沒有必要。如果這世上沒有人會對兩個看起來相似但反應(yīng)不同的事物感到困惑的話（假設(shè)開發(fā)成本投入不算很大的話），那么這不會是一個問題。
許多工程師和產(chǎn)品經(jīng)理跟我講過，關(guān)于“一致性”的討論經(jīng)常意見很難統(tǒng)一，但當(dāng)我說“目標(biāo)是讓用戶感覺沒有困惑”時，爭議就不存在了。
使用“語言捷徑”的第二個意想不到的后果是，我們有可能會忽視真正的最終目標(biāo)。你看待問題的方式和角度會更多地從公司出發(fā)而不是用戶真正面臨的問題。
舉個例子，我們要如何提高這一功能的使用率？這可能并不是任何一個你的用戶會關(guān)心的問題，在討論這一問題的時候，你有可能會開始從公司角度思考解決方案，比如讓功能更顯眼，不斷提醒用戶這一功能的存在等。
但其實這些做法只有在強調(diào)的功能的確很重要的時候，才會起作用。但如果這一功能的使用率本來就低，那么更有可能說明這一功能對用戶而言沒那么重要。如果你沒有真正以人為中心來思考問題，很難發(fā)現(xiàn)這一點。
歸根結(jié)底，雖然語言只是一個小的方面，但我相信它是非常重要的。多關(guān)注一點在工作時使用的談話方式，如果你是為人設(shè)計的，那么請用人們更熟悉的語言。
舉例來講：
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
人工智能已經(jīng)成為新一輪科技革命和產(chǎn)業(yè)變革的核心驅(qū)動力，正在對世界經(jīng)濟、社會進步和人類生活產(chǎn)生極其深刻的影響。其中，普羅大眾對人工智能感知最為深切的當(dāng)屬人機交互。語音交互、人臉識別等人工智能技術(shù)已經(jīng)化為應(yīng)用產(chǎn)品走進了我們的生活。近日，百度人工智能交互設(shè)計院發(fā)布了一份聚焦于未來3年內(nèi)的AI人機交互趨勢研究報告（以下簡稱“《報告》”）。
該報告是百度人工智能交互設(shè)計院基于過去一年多對AI領(lǐng)域前沿技術(shù)、產(chǎn)品和設(shè)計的深入研究和洞察，結(jié)合產(chǎn)業(yè)界和學(xué)術(shù)界的經(jīng)驗探析而來。AI賦能的人機交互革新了大眾的生活形態(tài)，未來，AI加持的人機交互模式又會呈現(xiàn)出什么樣的態(tài)勢呢？
《報告》從“人機交互介質(zhì)”、“交互對象”、“AI應(yīng)用場景”、“人機關(guān)系”等方面總結(jié)了AI人機交互的八大趨勢。
趨勢一：語音交互技術(shù)進步，更趨向人類自然對話體驗
研究公司Ovum預(yù)測稱，到2021年，地球上的語音助手的數(shù)量會和人類一樣多，人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中，語音交互技術(shù)在用戶終端上的覆蓋最為廣泛。
以智能音箱為例，有數(shù)據(jù)顯示，2018年全球智能音箱市場同比增長200%。其中，中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業(yè)均加速了用語音交互技術(shù)開啟大眾智能生活的步伐。截止2018年12月31日，搭載百度對話式人工智能操作系統(tǒng)DuerOS的智能設(shè)備激活量也已超2億。
目前，語音交互技術(shù)已經(jīng)加速在智能家居、手機、車載、智能穿戴、機器人等行業(yè)的滲透和落地。《報告》指出，未來隨著語音技術(shù)的不斷完善，語音交互的自然度將進一步提升，并愈加趨向人類自然對話的體驗。具體表現(xiàn)為：語音交互將從機械的單輪對話進階到更流暢的多輪對話；合成語音更自然、真實，接近真人水平；語音交互具備聽覺選擇能力，提升多人對話體驗；語音交互將支持多種方言，并針對細分群體進行差異化設(shè)計。
趨勢二：人臉、手勢等通道更多出現(xiàn)在產(chǎn)品中，多通道融合交互成為主流交互形式
媒介學(xué)家雷吉斯·德布雷（Régis Debray)曾提出：“技術(shù)能實現(xiàn)不同區(qū)域里不同文化的人之間的連接”。隨著技術(shù)的發(fā)展，人與人之間的連接早已不成問題。當(dāng)前，AI技術(shù)更是拓展了人與智能體交互的通道。除語音交互外，計算機視覺技術(shù)的發(fā)展已使得智能體實現(xiàn)了通過識別人臉、指紋、面部表情、肢體動作等人體信息，而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優(yōu)勢和場景適用性外，也有一定的局限性。
《報告》認(rèn)為，未來，人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式，為人類打開更多的交互空間和應(yīng)用場景。具體表現(xiàn)為：人臉檢測及識別聚集更細維度的面部特征，拓展更多的交互空間和場景；空中手勢交互將成為新熱點；觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道；生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。
趨勢三：智能體開始擁有明確的人設(shè)
近期，明星“人設(shè)”崩塌已成大家茶余飯后的熱門話題。但是你想過，智能體也將擁有明確的“人設(shè)”么？《報告》認(rèn)為，未來，用戶可以更加明顯地感知到智能體鮮活的“人設(shè)”。
所謂智能體的“人設(shè)”是指，用戶在與智能體的互動過程中，根據(jù)感知到的綜合特征推斷出一種具有一致性的角色形象，一般由性格（如外向、善良等）、關(guān)系（如助手、朋友等）和基本屬性（如性別、年齡等）構(gòu)成。《報告》指出，目前，智能體人設(shè)的設(shè)計和表達主要聚焦在語音（如音色、語調(diào)等）和語言層面（如表達方式），并且通常局限在部分場景、部分話術(shù)上，缺少一致性和全局感。
《報告》提出，未來，智能體人設(shè)將從語音、產(chǎn)品外觀、虛擬形象等多維度進行設(shè)計，甚至聘用編劇設(shè)計具有統(tǒng)一形象特點的話術(shù)，利用混合現(xiàn)實（MR）、全息投影等技術(shù)將人設(shè)具象化，讓用戶在不同場景下均感受到智能體一致、明顯的人設(shè)特征。換句話說，未來，智能體的人設(shè)會具有很明顯的特征，但不會輕易崩塌。
此外，《報告》還認(rèn)為，打造用戶喜愛的人設(shè)也將成為企業(yè)在市場競爭中形成差異化、吸引更多用戶的重要方式。
趨勢四：智能體在被動交互外，開始出現(xiàn)主動交互行為
技術(shù)的發(fā)展雖然革新了我們的生活方式，但是長久以來，人機交互一直延續(xù)著人類“輸入”，機器“反饋”的循環(huán)模式，人類始終是主動的，機器始終是被動的。
《報告》認(rèn)為，人工智能賦予了機器情境感知和自主認(rèn)知能力，使我們有機會構(gòu)建機器主動服務(wù)于人的交互模型。智能體出現(xiàn)主動交互行為的具體表現(xiàn)為：主動交互越來越“貼心”；主動交互在“家”和“車”的場景下率先商用落地；主動交互將提升公共場景下人機協(xié)同的效率。
趨勢五：智能體開始擁有情感判斷及反饋智能
2014年在北美上映的動畫片《超能陸戰(zhàn)隊》中的機器人大白，以對主人公關(guān)懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是，具有情感判斷和應(yīng)對能力的智能體正逐漸成為現(xiàn)實。
過去20年，在人機交互中，機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現(xiàn)的如情感陪護機器人、智能音箱、智能汽車等已經(jīng)初步具備一些情感識別能力，可以根據(jù)不同的場景、對象，進行適當(dāng)?shù)那楦薪换ァ?
《報告》指出，未來，情感計算技術(shù)的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力；同時智能體對于人類思維理解、情景理解能力也將更加完善，情感交互能力將更智能、更體貼。
趨勢六：AI對特定人群的關(guān)懷得到快速發(fā)展和應(yīng)用
人機交互的發(fā)展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務(wù)，提供了充分可能。當(dāng)前市面上已經(jīng)出現(xiàn)大量針對兒童教育的AI產(chǎn)品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求，特別開發(fā)了兒童語音識別引擎，并定制兒童語音播報音色及對話邏輯，陪伴兒童一起成長。在養(yǎng)老領(lǐng)域，為老人提供陪聊、提醒等陪護服務(wù)的智能產(chǎn)品也被AI企業(yè)提上了日程。此外，少數(shù)AI產(chǎn)品也開始專注殘障、病患等更加細分的人群，如2018年11月，百度推出了AI眼底篩查一體機，幫助患者快速篩查眼底疾病，為基層醫(yī)療帶去了極大的便利。
《報告》提出，未來，AI對人類的關(guān)懷將得到快速發(fā)展和應(yīng)用，覆蓋更加細分的人群和更深入的場景。為兒童，AI將從易于交互到提供心智陪伴的服務(wù)；為老人，AI將縮小他們與科技的鴻溝，助推他們開啟品質(zhì)生活；為感官殘障人士，AI將幫助他們重獲對世界的立體感知；為特殊疾病人群，AI將提供預(yù)測、診斷和康復(fù)服務(wù)。
趨勢七：智能設(shè)備互聯(lián)互通，多場景銜接
以BAT為首的互聯(lián)網(wǎng)企業(yè)，在2018年紛紛調(diào)整組織架構(gòu)，轉(zhuǎn)向To B。巨頭重提產(chǎn)業(yè)互聯(lián)網(wǎng)戰(zhàn)略成為當(dāng)前市場新現(xiàn)象。此現(xiàn)象背后，正是AI、5G、云計算等新興技術(shù)的發(fā)展與升級。2018年的政府工作報告，進一步強調(diào)了“產(chǎn)業(yè)升級的人工智能應(yīng)用”?！爱a(chǎn)業(yè)化”和“應(yīng)用化”成為未來幾年人工智能的兩大發(fā)展方向。
《報告》指出，隨著AI技術(shù)的進一步成熟和落地，及其與大數(shù)據(jù)、IoT的結(jié)合，AI將從單品智能、獨立場景到互聯(lián)智能，場景融合進階。智能設(shè)備將互聯(lián)互通，場景將進一步融合，實現(xiàn)多場景銜接；VR/AR將促進線上和線下、虛擬和現(xiàn)實的聯(lián)結(jié)，未來，VR會加速拓展到更多的產(chǎn)業(yè)和實體，AR中的現(xiàn)實與虛擬將從簡單疊加到有機融合，實現(xiàn)用戶可以源自自然意識進行人機互動。
趨勢八：人機開始走向深度協(xié)同，信任構(gòu)建成為首要突破點
2018年6月，百度研究院發(fā)布并開源“神經(jīng)條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力，可以大幅提升醫(yī)生閱讀病理切皮的效率和準(zhǔn)確率。人機協(xié)同即，通過人工智能增強人類智能，讓人工智能成為人類智能的自然延伸和擴展。
目前，人機協(xié)同已在工業(yè)領(lǐng)域初步實現(xiàn)，而隨著智能體從工業(yè)生產(chǎn)領(lǐng)域向商業(yè)服務(wù)、社會服務(wù)和家居服務(wù)領(lǐng)域拓展，人機將走向深度協(xié)同?！秷蟾妗氛J(rèn)為，人機深度協(xié)同可以最大化發(fā)揮雙方優(yōu)勢，實現(xiàn)合作共贏。
而人們對AI的信任，是智能體全面進入人類工作和生活，實現(xiàn)真正人機協(xié)同的前提。即，信任構(gòu)建成為了實現(xiàn)人機深度協(xié)同的首要突破點。與此同時，AI倫理道德將更加細化，成為所有從業(yè)者需遵守的行業(yè)準(zhǔn)繩。AI行業(yè)的發(fā)展在帶給大眾便利生活之時，避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業(yè)者們亟需重視的問題。
最后，《報告》指出，AI時代的人因工程是一個真正的系統(tǒng)工程。而每個人機交互行業(yè)的從業(yè)者都需要擁有AI思維。最重要的是，中國的人機交互設(shè)計和研究者們將首次和發(fā)達國家站在同一起跑線上，我們有機會去定義這些體驗標(biāo)準(zhǔn)，而不再是追隨或遵守。
AI時代大門緩緩開啟，屬于中國和中國企業(yè)引領(lǐng)世界前沿的新時機已到來。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
發(fā)好看的國外設(shè)計作品，總有人會評論你換成漢字試試。不過確實有很多人存在疑問：看國外的作品真的有用嗎？今天這篇超全面的教程，教你一個正確觀看優(yōu)秀作品的姿勢，保證能讓你換一雙看作品的眼睛。之前聽一位同學(xué)在公司看國外作品學(xué)習(xí)的時候，公司的一個老員工發(fā)現(xiàn)了，就過來語重心長地和他說，你看這些東西沒用的，學(xué)不到東西，就是在浪費時間等等，類似這樣的話說了一堆。聽到這個話題的時候就特別的親切，因為在開始接觸設(shè)計的時候，和那位老員工的想法一樣。但是隨著對設(shè)計的理解越來越深，接觸的項目多了以后，這種想法慢慢就淡化了。
其實新人對研究國外作品這件事存在誤區(qū)是很正常的，畢竟應(yīng)用的文字不一樣，內(nèi)容多數(shù)我們也看不懂，把時間花在這上面給人的第一感覺確實有點不合適，哪有直接去看國內(nèi)的作品來得過癮。我們暫時拋開作品的數(shù)量與質(zhì)量不談，來聊聊這個話題。
我們平時在工作中完成的作品，里面基本都會包含文字、圖片或圖形、色彩這幾種基本元素，不管你做的是海報、logo還是畫冊都離不開它們，比如純文字類型的海報、公告、條幅。
純圖片形式的燈箱、畫冊、展板、品大片。
純圖形的UI圖標(biāo)、布展裝飾、logo徽章。
包括純顏色的手機屏保、背景墻之類的設(shè)計，這些基本的設(shè)計元素，會在設(shè)計作品中單獨出現(xiàn)。
而更多的設(shè)計作品都是這幾種元素同時出現(xiàn)的結(jié)果，這些海報中，文字、圖片、圖形、色彩這幾種元素都占全了。注意，這些海報用的都是中文，屬于國內(nèi)的海報對吧？也能夠在這上面學(xué)到一些東西，那我們換幾張國外的作品看看，有什么不一樣的地方。
日本的、歐洲的等等都是優(yōu)質(zhì)的設(shè)計作品，我們可以來分析一下這些作品，風(fēng)格、技法、表現(xiàn)形式暫時可以拋開。
構(gòu)成他們的元素和國產(chǎn)海報有什么區(qū)別？都存在文字、圖片、圖形包括色彩，唯一的區(qū)別就是上面說的，不同的國家，使用的文字會不太一樣。那么這種文字上的差異真的會影響到我們對這個作品的研究、欣賞嗎？
答案很明顯，不會的。了解一些構(gòu)成知識的同學(xué)都知道，構(gòu)成版面的基本元素就是點、線、面，而文字、圖片、圖形包括色彩，他們在版面中整體來看，本質(zhì)上就是點線面的具象表現(xiàn)。那我們在欣賞這些作品的時候，完全可以把文字看成是點線面的存在，這樣的話也就沒有必要糾結(jié)他用的是哪個國家的文字了。
像這張國外的海報，我們把這里存在的視覺元素標(biāo)注出來，他們本質(zhì)上就是這些東西。
國內(nèi)的也一樣，如果你看到的是這些東西，還需要糾結(jié)這是哪個國家的作品嗎？
版面中的所有視覺元素，都可以看成是點線面的存在。
來做一組實驗，這張英文海報，我們把這里面的英文，替換成漢字。前后對比一下，海報的整體感覺，基本沒有出現(xiàn)什么變化。
再換一組，感覺基本一致。
再來一組，這回我們把英文替換成日文。類似這個版面構(gòu)成的形式，我們把文字替換成英文、漢字，變化也不會很多，依然很美觀。我們研究、學(xué)習(xí)、欣賞優(yōu)秀作品的時候，一定不能受到類似「看國外的設(shè)計沒用」這類思維的束縛，不然的話你會錯過很多的。
不光從構(gòu)成的角度看這個問題是這樣，其實從設(shè)計發(fā)展的角度來看，也能得出同樣的結(jié)論。因為現(xiàn)代設(shè)計教育的起源來自德國的包豪斯，后來包豪斯的理念傳到了美國，又通過美國傳遍了整個世界。包括我們現(xiàn)在學(xué)習(xí)的平面設(shè)計體系，都是一脈相承的。從這個起源的角度來看，也不存在國內(nèi)、國外那么大的差別。都是一個門派的，只要做的好，那看誰的都一樣。說了這么多，應(yīng)該能看出來，我們是鼓勵大家去多看優(yōu)秀作品的。那么堅持做這件事，又能得到什么呢？下面就來說一下，為什么要養(yǎng)成欣賞優(yōu)秀作品的習(xí)慣？
先來看看這個習(xí)慣能給我們帶來的好處有哪些。
1. 提升審美
長時間欣賞優(yōu)秀的作品，會對我們個人的審美能力有質(zhì)的提升，幫助我們開闊眼界。眼高手低雖然是個貶義詞，不過這對于正在成長的我們來說是好事，最起碼能讓自己對自己的能力有一個比較清晰的認(rèn)知，知道自己做的不夠好，這樣會有動力不斷的鞭策自己學(xué)習(xí)新的東西，把專業(yè)做到更好。
2. 培養(yǎng)興趣
如果我們對這個行業(yè)沒興趣的話，就算你再有設(shè)計天賦，也很難做好的。堅持看優(yōu)秀的作品給我們提供持續(xù)的刺激，說不定哪幅作品就非常合你的胃口，勾起你的興趣，讓你花時間去研究。
3. 利用碎片化的時間學(xué)習(xí)
平時都很忙很累，再懶一點，就沒什么完整的時間學(xué)習(xí)。這個時候如果能把碎片化的時間利用上，我們坐地鐵、坐公交、午休、睡覺前，包括上廁所的時候都是可以通過欣賞這些優(yōu)秀的作品提升自己的，這也是一個提升學(xué)習(xí)效率的習(xí)慣。
4. 為設(shè)計提供靈感和參照
這也是最重要的一點，不知道你有沒有一接到項目，大腦就一片空白的感覺，是因為你干活干的太少的原因嗎？不一定，有不少人每天不停的干活還這樣。其實出現(xiàn)這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過，怎么可能有印象，沒印象就更不可能把他們應(yīng)用到我們平時的工作中了。
所以說，我們想有好的想法、無盡的靈感，必須通過看優(yōu)秀作品這個成本低、見效快的方式來提升了，并且通過我們持續(xù)不斷的積累，得到的東西會越來越多，這是一種可以不斷提升自己的方式。
當(dāng)然了，欣賞優(yōu)秀作品也是有方法的，走馬觀花的看一大堆，最后能得到的可能只有審美的提升。就是感覺自己周圍的人做的東西都是垃圾，輪到自己做，發(fā)現(xiàn)自己也很垃圾。那為了避免這個悲劇發(fā)生在你的身上，下面分享一些欣賞優(yōu)秀作品的正確方法。
我們欣賞作品的場景主要有兩種，第一種是有目的、有針對性的去看；第二種是沒有針對性的看。這兩種場景要看的東西差不多，細節(jié)上會有一些差異，我們先來了解一下有針對性的。一般來說，有目的有針對性指的是我們接到了具體的項目，但是這個項目以前沒有接觸過，需要了解一下別人都是怎么做的，然后帶著問題去尋找答案。
先從項目要求入手，就是看看你做的內(nèi)容是關(guān)于什么的，比如你要做日本壽司海報，就去搜集這方面的作品。有些同學(xué)在搜索的時候很實在，要做關(guān)于壽司的海報就專門去找日本壽司的作品，這種方式的缺陷特別明顯，如果你要做的這個項目品類能找到的優(yōu)秀作品很多還好，不過多數(shù)情況下，優(yōu)秀作品是不那么好找的。這個時候把思路打開，選擇的余地就會大很多。
比如把日本壽司海報這個關(guān)鍵詞縮減成日本料理海報，優(yōu)秀作品的數(shù)量會成倍的增加。
或者你要做的是海報，那我們搜索的時候除了海報，還可以找日式的包裝、畫冊。
網(wǎng)站、插畫等等作品，都會給我們帶來很多的思路。
數(shù)量的問題，這也是我們推薦看國外優(yōu)秀作品的一個原因，光去找中文的作品，在一個小品類里，很難找到足夠多的優(yōu)秀作品，一般的東西又沒有什么學(xué)習(xí)的價值，這時候加入國外的東西會讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時，連帶關(guān)于項目的一些圖片、文字材料都可以一起搜索，這樣能幫助我們更深的理解這個項目，學(xué)到更多的知識。
其實學(xué)習(xí)這個行為不是非得上學(xué)、看書才能學(xué)，我們設(shè)計師在接觸各種項目的時候，通過與客戶溝通和查閱項目相關(guān)資料的過程也是在學(xué)習(xí)，而且我覺得這種學(xué)習(xí)方式比我們單純的去上學(xué)讀書更深刻、實用。學(xué)到的東西也是在工作中甚至生活中用得上。
在找到這些優(yōu)秀作品以后，就可以嘗試去尋找這些作品共同的規(guī)律。
比如文字，如果文字屬于同一種題材的設(shè)計，就算是不同國家的作品，我們也會在里面找到一些共同的特征。比如這些關(guān)于食品的字體，都會表現(xiàn)出屬于食物的那份圓潤的特征，這就是一種規(guī)律。這些規(guī)律性的東西總結(jié)出來，就可以嘗試應(yīng)用到自己的作品中。這個是學(xué)習(xí)大的規(guī)律，在這個大規(guī)律的基礎(chǔ)上，再去關(guān)注這里面的一些小的細節(jié)。想做好東西，稍小的細節(jié)也很重要。
再比如文字組的形式。文字的主要作用是傳遞信息，那么如何、美觀的把文字表現(xiàn)出來就要靠文字組了。一款作品做的是否優(yōu)秀，通過觀察文字組的處理是否細致，很容易看出來。信息的層級關(guān)系需要文字組來表現(xiàn)，主標(biāo)題、副標(biāo)題、段落文字、時間、裝飾性的文字等等，這些文字可不是隨便扔到版面中就行了，它們都是通過設(shè)計師的處理，以文字組合的形式分布在版面的各個位置。
這里面每一個文字組合都是一個小的個體，比如很常見的日期的處理方式就有很多，像這張海報里日期文字組合的處理方式。
我們看到了覺得這個形式不錯，就可以記下來。那這些處理方式我們見過了，遇到合適的項目，換一個字體，或者調(diào)整一下數(shù)字，就能應(yīng)用到自己的項目中了，這些組合形式，你沒看見、沒有印象，自己拍腦袋是很難想出來的。
包括這種產(chǎn)品或圖形的表現(xiàn)排列形式，在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經(jīng)常會碰到。
自己排不好的話，就可以借鑒這些作品的形式和規(guī)律，再上手就輕松多了。如果你想做的是logo設(shè)計，也可以去觀察優(yōu)秀作品的細節(jié)，比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制，包括別人的創(chuàng)意點在哪，這些東西都是可以在別人的作品中學(xué)到的。
就像異形同構(gòu)這篇文章，你看到了這類作品，就能回憶起這款 logo 使用的是異形同構(gòu)中的邊線同構(gòu)這個方式設(shè)計的，這種方式有哪些特點？如何能設(shè)計出類似的作品？教程里都講過了，這樣又把之前學(xué)到東西鞏固了一遍。
△ 《平面設(shè)計中，如何通過“抄襲”優(yōu)秀的作品成為高手？》
包括你看過的作品，他們的網(wǎng)格是怎么劃分的。使用的是什么樣的字體、構(gòu)圖如何都可以作為我們思考學(xué)習(xí)的方向，關(guān)于這幾點的詳細內(nèi)容，在之前的文章里很細致的講過，沒看過的同學(xué)可以去看看。
如果是沒有針對性的看作品，和上面的思考路徑是一致的，只不過是利用碎片化的時間來學(xué)習(xí)而已，更靈活一些，可以快速瀏覽，也可以觀察細節(jié)。如果你有收藏整理這些材料的習(xí)慣會更好，拿出來就能用，收集整理的越多、越細致，以后工作起來越輕松。
所謂的創(chuàng)意就是我們把不同的元素重新發(fā)散、打散、重組呈現(xiàn)的過程。能夠保證有想法、思路的前提就是見識，要見過很多好東西，有了很深的印象以后才能憑借這些印象，學(xué)到的東西設(shè)計成新的、屬于你自己的作品。下面給大家演示一遍，我們看多了優(yōu)秀作品以后，再去做設(shè)計的時候會發(fā)生什么變化。
比如我們要用這些材料來設(shè)計一款網(wǎng)頁頭圖。
看到這些材料，可能會想到以前在哪見過，類似這種左右放置的圖配文形式。
產(chǎn)品價格的處理方式見過這樣的。
文字的形式全部使用黑體和無襯線字體，很多作品都是這樣處理的，放在一起很和諧。
還見過所有的文字組，都以左對齊的形式進行排列的作品。
只要有印象，我們在設(shè)計的過程中就會下意識的往這些方向上靠，設(shè)計出的作品也會接近前面的那些規(guī)則。
在這些規(guī)則影響的基礎(chǔ)上，如果我們還見過襯線體搭配無襯線體的作品，圖疊字的形式，也能做出接近的風(fēng)格作品。
同樣內(nèi)容，不同的表現(xiàn)形式。你看過的優(yōu)秀作品越多，選擇的空間就越大。
我們再來看這個案例，一張藝術(shù)展的海報。
整體的骨架是這樣的，這種骨架布局的方式來自于左邊這個案例，類似的形式有很多。
主體文字組合的結(jié)構(gòu)是因為見過類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設(shè)計成類似的形式。
如果說我們設(shè)計的這個文字組合之間，距離稍遠，也有很多的作品會使用線的分割來解決這個問題。
包括其他文字組合的布局方式，也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式，中文的宋體和西文的襯線體具有類似的筆畫特征，基礎(chǔ)文字的統(tǒng)一性能夠得到保障。
將和主題相關(guān)的照片填充到劃分好的網(wǎng)格中，這里面使用的照片是同一張照片的不同局部，這種對照片重復(fù)的處理方式也很常見，在給版面增加變化的同時，也會制造出一定的故事性，引發(fā)受眾的聯(lián)想。
一張海報從無到有的創(chuàng)作過程。
想設(shè)計出不錯的作品，沒有大量的積累，對優(yōu)秀的作品沒有印象是肯定行不通的。
怎么樣，是不是覺得多看看優(yōu)秀的作品還是有用的？不管是國外的、國內(nèi)的都一樣能學(xué)到很多。類似我是做電商的，看印刷品的設(shè)計沒用；我是做包裝的，看版式的作品沒用；我專門做商業(yè)項目的，看藝術(shù)類的項目沒用；我們公司是做金融產(chǎn)品的，那看其他行業(yè)的東西都沒用。遇到這種言論，我們可以冷靜的思考一下，是真的沒用，還是這個人，他不會用。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.yvirxh.cn