如果您想訂閱本博客內(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ù)的認可以及歸屬感，舉個例子，前段時間筆者至上海出差數(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é)可以模擬真實光影效果?！巴杲袢铡眲t表現(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ū)Ρ?，QQ團隊在對影集的功能規(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 意象與認知相符，有情理之中意料之外的驚喜，引起用戶好奇心。
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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
響應(yīng)式已經(jīng)成為網(wǎng)頁設(shè)計的主流，目前已很多網(wǎng)站能兼容手機端 ，但是唯有 dashboard 的界面是相當(dāng)難在移動端顯示，特別是數(shù)據(jù)復(fù)雜、內(nèi)容較多的后臺數(shù)據(jù)，是很難直接展示到移動端的。
今天我們分享一系列 dashboard UI 設(shè)計作品，主要展示一些用戶數(shù)據(jù)、圖表的可視化組合設(shè)計。這些作品界面布局合理，層級分明，設(shè)計美觀，對要做這類 UI 的同學(xué)有很好的參考價值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟蹤器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活動追蹤 by Cuberto
– 04 –
醫(yī)院 APP 設(shè)計 by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Ka?aska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移動端后臺 by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
電子單車 APP 后臺設(shè)計 by Arnar ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易證券數(shù)據(jù)界面設(shè)計 by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
記帳應(yīng)用統(tǒng)計界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
銀行 APP 數(shù)據(jù)界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特幣交易界面設(shè)計 by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
醫(yī)療護理app用戶后臺 by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
這個展開菜單很好看呢 by Martin Mro?
dribbble.com/martinmroc
從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區(qū)別，移動端的后臺只能顯示少量或簡化版的數(shù)據(jù)。比如 PC 一個頁面的功能，在移動端可以分開1-2個頁面來區(qū)分，或者使用類似 Tab 的形式來展現(xiàn)。
如果是手機 WEB 端可以用響應(yīng)式來解決，以節(jié)省成本，但這樣通常交互并不十分友好，如果時間和成本允許的話，建議產(chǎn)品和交互人員策劃新的后臺版本。
藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在多人團隊里，通常不同的設(shè)計師負責(zé)不同的流程，如果沒有UI設(shè)計規(guī)范，不同的設(shè)計師就會對相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作，效率比較低。而制作設(shè)計規(guī)范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁面，把設(shè)計師從基礎(chǔ)工作中釋放出來，大大提升設(shè)計效率。
目錄
一、為什么要建立規(guī)范
二、規(guī)范的適用范圍
三、如何建立規(guī)范
1 利于多人協(xié)作，提率
2 增強一致性，塑造品牌感
制作和遵循設(shè)計規(guī)范，能夠保證整個產(chǎn)品的交互效果和視覺風(fēng)格、乃至文案的統(tǒng)一性，提升用戶的體驗。
3 減少冗余內(nèi)容，方便維護和更新
同類內(nèi)容使用一樣的組件，能夠降低輸出的內(nèi)容量，減少冗余的控件和代碼。同時也便于維護，在迭代時進行統(tǒng)一的更新和應(yīng)用。
4 利于工作交接
方便設(shè)計團隊和其他團隊交接，如果團隊有人員變動，也方便后續(xù)入職的同事能夠通過規(guī)范迅速熟悉產(chǎn)品，快速上手。
前面的文章我提到過，如果產(chǎn)品處于啟動期的話，這個時候最重要的事情是圈到第一波用戶，讓自己活下去。在這個階段產(chǎn)品會頻繁的改版、驗證，迭代非常快，整個團隊可能都處于拼命加班的狀態(tài)。在這種情況下做設(shè)計規(guī)范文檔顯然事倍功半，一個是浪費人力資源，另外就算做了，在頻繁更新的背景下也很難去執(zhí)行。
因此設(shè)計規(guī)范文檔更適合于那些跨越0-1階段的產(chǎn)品，這個時候產(chǎn)品已經(jīng)用有了一定的用戶，團隊也會擴張。這個時候我們可以選擇制作基礎(chǔ)的設(shè)計規(guī)范，比如柵格、配色、字體、圖標(biāo)規(guī)范等等。對于成熟期的產(chǎn)品來說，大版本更新的周期是非常長的，這個階段通常會制作更為詳細的設(shè)計指南、設(shè)計原則、do & don’t、品牌書、圖標(biāo)手冊等等。
電商類的產(chǎn)品對于大家來說都是比較熟悉的，就算不從事這個方面，日常使用也會很頻繁，所以此次案例我們以下面這個電商APP作為示范。
做規(guī)范時通常會有這兩種情況：
1、不打算進行大版本更新的產(chǎn)品
對于小版本迭代的產(chǎn)品來說，建立規(guī)范只需要在sketch里把所有設(shè)計稿進行歸攏和分類。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對不符合規(guī)范的文件進行調(diào)整即可。
2、新版本 新規(guī)范
而對于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來說，在做設(shè)計稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容，比如顏色、字體、柵格等等，然后在設(shè)計過程中去制作KIT、對基礎(chǔ)的規(guī)范進行補充。
1 制定統(tǒng)一的柵格系統(tǒng)
因為現(xiàn)在都是一稿適配多端，所以首先需要確定設(shè)計的基準(zhǔn)尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個公司設(shè)計稿的基準(zhǔn)都不一樣，我們是以一倍圖為基準(zhǔn)進行設(shè)計的，所以我這里的基準(zhǔn)尺寸就是375*667，單位為pt。
柵格一種情況是制定網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)的話首先要制定最小的設(shè)計單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設(shè)計單位之后，界面中所有間距采用最小單位的倍數(shù)。
假定我們最小單位4的網(wǎng)格，排版時橫向和縱向的間距都是4的倍數(shù)，比如8、12、24。
第二種情況是可以直接建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方是能夠同時被2、3、4整除，因此能夠根據(jù)具體需求靈活的設(shè)計各種模塊。當(dāng)然如果產(chǎn)品比較輕量化，是不需要這么復(fù)雜的柵格的，可以根據(jù)需求設(shè)置6、4甚至2柵格等等。
2 色彩規(guī)范
色彩規(guī)范主要表明色彩的色值和使用范圍，一般會從品牌色、輔助色、基礎(chǔ)色、狀態(tài)用色等等。如下圖所示。
如果產(chǎn)品常用到漸變的話，需要注明漸變的角度以及漸變色的色值。包括產(chǎn)品如果有夜間模式的話，要額外注明日間和夜間模式下各個顏色的對應(yīng)色值。當(dāng)然這里的夜間模式說的是真·夜間，而不是微博那種直接加一個黑色透明度蒙層的偽·夜間。
額外提一句，重要內(nèi)容和正文內(nèi)容要保證文本的可識別度，WCAG指南中指出，文本和背景色的對比度需要達到3：1。大家可以通過
https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色。我這里的品牌色和強調(diào)色對比度為3：1和6.3：1，而輔助顏色（比如標(biāo)簽）的對比度則在2-3之間。
3 字體
字體規(guī)范最需要注意的是提取出各個場景下需要用的字體和字號。
需要注意的是，要標(biāo)注上應(yīng)用場景方便其他人理解。不然其他成員也并不知道到底什么時候應(yīng)用一級標(biāo)題、什么時候用二級標(biāo)題。
4 圖標(biāo)
通常來說圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。
功能性圖標(biāo)是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)和簡介，方便用戶識別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無彩色。
展示性圖標(biāo)通常為頁面入口，會有更多形狀、顏色、質(zhì)感的表達，吸引用戶的注意力和點擊欲望，強調(diào)差異性，比如各種品類區(qū)的圖標(biāo)、徽章、等級圖標(biāo)等等。
圖標(biāo)規(guī)范通常來說會先定一些基礎(chǔ)尺寸，梳理好各個頁面的圖標(biāo)尺寸，進行整合，最后確定好幾個基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個。功能層級一致的圖標(biāo)尺寸要一致。
為了保證不同形狀的圖標(biāo)在視覺上保持大小一致，會制作一個圖標(biāo)的基礎(chǔ)制作說明。制作說明里會統(tǒng)一圖標(biāo)的圓角、描邊的粗細；如果是涉及到展示性圖標(biāo)的話，還會有圖標(biāo)的視角選擇、配色的選擇、以及如何表現(xiàn)質(zhì)感等等等等
5 默認圖
電商APP的話有大量的產(chǎn)品圖片，所以我們也把默認的占位圖樣式進行了統(tǒng)一。因為我們這里樣式都是一致的，所以采用了統(tǒng)一的規(guī)范，如果有多種默認樣式，或者有其他類型的占位圖，需要分別進行說明。
頁面組件通常包括導(dǎo)航欄、工具欄、彈框、列表、卡片、空狀態(tài)等等，按照原子設(shè)計理念來說，還可以把組件拆分為原子、分子等更小的基礎(chǔ)設(shè)計組件，比如角標(biāo)、標(biāo)簽、按鈕、圖像、優(yōu)惠券、選擇器、進度指示器等等
頁面組件除了梳理出規(guī)范之外，通常會整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導(dǎo)入為Libraries直接調(diào)用。當(dāng)然，也可以直接在KIT上備注出規(guī)范和注意事項，具體輸出什么格式這個看團隊的需求即可。
因為組件部分是一個比較龐大的內(nèi)容，需要根據(jù)具體產(chǎn)品
1按鈕
按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優(yōu)先級，屬于強引導(dǎo)型按鈕。
按鈕通常會有三種狀態(tài)，常規(guī)狀態(tài)、點擊狀態(tài)和不可用狀態(tài)。因此在規(guī)范中需要標(biāo)明按鈕在這三種狀態(tài)下的樣式，比如顏色、投影、圓角、文字大小等等
除此以外，也可能會有加載狀態(tài)，也就是在點擊按鈕后，如果有1S以上的數(shù)據(jù)延遲，通常會考慮觸發(fā)按鈕的加載狀態(tài)。加載狀態(tài)的按鈕樣式為按鈕上顯示進度指示器。
2 導(dǎo)航
對現(xiàn)有頁面的導(dǎo)航進行收攏和分類，比如我這里分類為常規(guī)標(biāo)題樣式、標(biāo)簽樣式、搜索框樣式、無標(biāo)題樣式、字母導(dǎo)航……
標(biāo)題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點擊區(qū)域，我這里icon的尺寸設(shè)置為24pt，但是熱區(qū)是44pt，所以要注意間距的設(shè)置，熱區(qū)不能重疊。
3 標(biāo)簽
標(biāo)簽通常有多個使用場景，我們可以對標(biāo)簽進行分組，比如運營類標(biāo)簽、內(nèi)容屬性標(biāo)簽、篩選標(biāo)簽等等
然后對每類的標(biāo)簽統(tǒng)一樣式、文字內(nèi)邊距以及說明適用場景。
4 彈窗
彈窗是為了提示和通知用戶而位于頁面內(nèi)容之上的一種控件。它是引導(dǎo)用戶專注于某一項任務(wù)，用戶可以通過操作來關(guān)閉彈框。彈框包含模態(tài)（對話框、操作菜單）和非模態(tài)（toast、 snake bar等）兩種形式。
模態(tài)彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內(nèi)的文字說明和按鈕。
我這里拿一個對話框的規(guī)范進行舉例，這是一個無ICON的雙按鈕對話框，因此在這里我們需要說明標(biāo)題、正文文本、按鈕以及背景遮罩的信息，還有字號、行距、文字極限值、文字色、按鈕的狀態(tài)等等……
除此之外，組件類的規(guī)范可以配上常用案例、don’t&do，會更方便團隊人員理解，防止錯誤狀況。
5 列表
列表是由多個等寬的行組成的、按照一定規(guī)律排列的連續(xù)條目。列表在一些資訊類產(chǎn)品里會有更多的組合形式。我這款產(chǎn)品里用到的列表主要是單行和雙行列表，那么我們就整理出對應(yīng)的列表類型和需要說明的事項。
寫這篇文的初衷，是因為從去年底我建立公眾號，并且在站酷發(fā)表了一些文章，得到了很多人的認可。很多粉絲私信我各種問題，陸續(xù)有人問我設(shè)計規(guī)范怎么做、交互規(guī)范什么樣之類的問題。但是公司內(nèi)部的文件確實沒有辦法公開分享，所以我就想說，那不如專門寫一篇文章詳細教大家制作移動UI設(shè)計規(guī)范吧。
這篇的基礎(chǔ)部分我做的比較詳細，組件部分寫的有些概括，主要是因為組件部分不是通用的，要根據(jù)自己的稿子進行整理和歸納，歸納好之后做好標(biāo)注和規(guī)范說明即可，這部分是一個羅列的內(nèi)容，所以就不必展開了……
當(dāng)然還有很多內(nèi)容沒有展開說，比如在Sketch里把KIT制作成Libraries統(tǒng)一使用，但是我想作為一篇設(shè)計規(guī)范入門教程目前應(yīng)該足夠了，更多的內(nèi)容我在后續(xù)開新文去補充吧。
藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(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)造力或天賦?！惯@是不對的。在重新審視簡·奧斯汀（Jane 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)的工作。他唯一不會做的事就是畫畫，需要助理代為完成。
他的工作量巨大，整日都待在工作室里。以至于人們一度認為「克里斯托巴爾·巴倫西亞加」是一個假名，也許并無其人。幾乎沒有人采訪過他或是見過他，也幾乎沒有他的照片。他從不參加社交活動，除了和一兩個老朋友相聚外，他很少出去吃飯。
這一切都使他得以專注于創(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)造了一種表面粗糙的昂貴玻璃，之后他為其取名「熔巖」?！溉蹘r」的靈感來自他在維蘇威火山附近發(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)作時通常都是以自我為中心的。他們不允許其他人越俎代庖，因為他們想確保他們的工作朝著自己認同的方向發(fā)展。而且，這是因為他們喜歡創(chuàng)造自己的生活，而不是讓別人為他們創(chuàng)造生活。當(dāng)然，在大多數(shù)現(xiàn)代環(huán)境中，在工作中以自我為中心是不現(xiàn)實的，也是不的。但每個人都有自己的方式。有些人是推動者，有些人是獨裁者。
PS：當(dāng)然還有更多偉大的創(chuàng)造者值得我們?nèi)懀o論男女）。這個名單僅代表個人觀點。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(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è)計( sillybuy.com )是一家專注而深入的界面設(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)按鈕樣式、顏色的變化。需要用戶確認的操作行為的一致能有效減少用戶在行動時的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗，從而實現(xiàn)最終商業(yè)上的交易成就。
04 | 標(biāo)題不可取代
雖然通過使用占位符代替標(biāo)題的方式擴充了表單的填寫空間，減少了視覺噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發(fā)輸入，占位符消失，用戶可能會陷入這里該填寫什么的迷茫，必須刪除所有輸入內(nèi)容后才能再次顯示標(biāo)題，顯然，這是違背人性的。
05 | 輸入域符合預(yù)期
輸入域的長度與預(yù)期輸入的內(nèi)容成正比，確保輸入字段長度符合用戶心理預(yù)期，并能在表單中能完整呈現(xiàn)。
06 | 不隱藏基礎(chǔ)幫助信息
作為一個購物流程中的信息確認和采集環(huán)節(jié)，需要用戶對于購買的產(chǎn)品有明確的認知。因此在設(shè)計過程中對于用戶填寫表單有基礎(chǔ)幫助的信息應(yīng)該做強調(diào)或顯示設(shè)計，避免出現(xiàn)因為隱藏幫助信息導(dǎo)致的客戶投訴。
07 | 減少二次確認
基于OTA行業(yè)特性，出行表單業(yè)務(wù)對標(biāo)電商購買表單業(yè)務(wù)需要填寫的信息更為冗長，層級更為復(fù)雜，為了減少用戶填寫過程中的心理負擔(dān)，降低填寫難度，我們需要對不必要的信息進行刪減或合并，為用戶信息輸入提供便利。
以注冊環(huán)節(jié)為例，在Web設(shè)計時往往會有二次確認密碼的環(huán)節(jié)，但在移動端這樣的操作會增加用戶填寫的負擔(dān)，因此大部分移動端界面上我們不建議對用戶的密碼信息進行二次確認，轉(zhuǎn)而通過使用明文顯示或者優(yōu)化密碼消失交互的方法來改善這一環(huán)節(jié)的體驗。
08 | *號的使用
沿用通用符號習(xí)慣，在表單設(shè)計中若是對業(yè)務(wù)必填的信息，我們往往采用 * 號的形式來幫助用戶區(qū)分信息優(yōu)先級。但當(dāng)表單中必填信息多于非必填信息時，大量 * 號的應(yīng)用反而會給用戶認知增加負擔(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è)置默認選項
在復(fù)雜表單中，對于如證件類型、手機區(qū)號、國籍等較為通用的選項，為用戶提供默認選擇的交互可以有效簡化操作步驟，減輕用戶填寫表單的負擔(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 | 二次確認
因移動端特性，用戶在填寫場景較為不穩(wěn)定如吃飯途中、行駛途中等，當(dāng)用戶花費精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場景，需要在此時進行二次操作確認，確認用戶操作意圖。當(dāng)然，如果用戶沒有對表單進行任何編輯，這樣的退出操作是不需要二次確認的。
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)則，移動端的密碼已簡化至只輸入一次，暗文的顯示會讓用戶無法確認所輸密碼信息。因此在需要隱私保護的場景下，我們需要完善密碼交互的呈現(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)整。
如取消險模塊，此前為避免客訴，將所有需要用戶確認和查看的信息都進行了高亮提示和行動引導(dǎo)。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時想要詳細了解的，過多的信息干擾反而影響了有用信息識別，也降低了用戶填寫表單的效率。因此新版表單重構(gòu)時我們將協(xié)議信息整合至末尾統(tǒng)一確認，同時對文字、icon進行視覺減負，統(tǒng)一弱化輔助信息呈現(xiàn)，轉(zhuǎn)而強調(diào)用戶需要確認的取消險金額和投保人模塊。
從上圖國際酒店改版前后的方案進行對比可見，每個細分模塊都有著或多或少細節(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è)計( sillybuy.com )是一家專注而深入的界面設(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
交互設(shè)計中的“所見即所得”原則
“所見即所得”原則我記得在之前的文章中就提到過，但是沒有詳細說明。最近在體驗一些產(chǎn)品時，發(fā)現(xiàn)很多交互設(shè)計上的坑都可以歸納到“所見非所得”上。
所見非所得
我們可以首先來看一下“所見非所得”的案例：上周寄件去北京，在填寫收件人信息時候，發(fā)現(xiàn)了一個“智能填寫”的功能很有意思。所謂“智能填寫”就是OCR識別技術(shù)，系統(tǒng)可以識別圖片上的地址。例如，你的收件人地址正好是身份證上的住址，那么你就可以上傳身份證照片，系統(tǒng)直接識別照片上的地址而不需要手動去輸入。
用戶具體的操作流程是：
1 拍攝/上傳照片；
點擊“上傳圖片”按鈕，用戶可以選擇拍攝或者上傳相冊里的照片，框選合適的識別區(qū)域；
2 系統(tǒng)識別并展示結(jié)果；
系統(tǒng)會自動識別圖片中的地址信息，并且在輸入框中展示，如果有識別錯誤的地方，用戶可以手動編輯修改；
3 用戶確認；
用戶對地址信息確認無誤了，點擊“智能填寫”按鈕，輸入框里的地址信息會自動回填到地址欄；
了解了大致流程，我們來看一下兩款競品。產(chǎn)品A和B都提供了“智能填寫”的功能，但是在交互設(shè)計上存在差異。產(chǎn)品A，當(dāng)用戶上傳完圖片才會出現(xiàn)“智能填寫”按鈕；產(chǎn)品B是全程展示“智能填寫”按鈕的。我個人更加偏愛產(chǎn)品A的處理模式，因為當(dāng)用戶都沒有上傳圖片時，給用戶展示“智能填寫”按鈕是沒有任何意義的，這里的“智能填寫”雖然可見但是不可得，用戶也不能點擊。當(dāng)然有人會說，雖然不可點擊，但是展示了也沒什么問題吧？當(dāng)然有問題，它會給用戶帶來兩個痛點：
1） 增加了用戶的學(xué)習(xí)成本；
對于新用戶來說，產(chǎn)品A肯定更加容易上手。因為新用戶一進入這個頁面，只能看到上傳圖片的按鈕，用戶明白了我首先要上傳圖片。產(chǎn)品B是直接一股腦的把所有選項展示出來，用戶不知道這些選項之間的聯(lián)系和操作順序。
2） 阻斷正常操作流程；
給用戶展示了他們本不應(yīng)該看到的元素，可能會阻斷正常的操作流程。用戶如果還沒上傳圖片，就點擊“智能填寫”按鈕會直接報錯，“所傳參數(shù)不能為空”，用戶哪里看懂這是什么意思。
之前在火車站取票，前面排隊的大嬸跟我說她的票取不了。我湊過去一看，發(fā)現(xiàn)她沒有關(guān)閉購買保險的彈框。因為這個彈框沒有蓋住底部“確認打印”按鈕，用戶誤以為還是可以點擊的，導(dǎo)致無法正常完成取票流程。
了解到這些痛點，那么如何才能在交互設(shè)計上實現(xiàn)“所見即所得”原則呢？我總結(jié)了兩個方法：限制和就近。
限制原則
了解限制原則，我們需要回答兩個問題：
1）為什么要限制？
因為多才要限制，多會帶來哪些壞處？內(nèi)容多，用戶處理不過來；選項多，用戶挑花了眼；時間多，優(yōu)惠券沒有有限期限制用戶懶得用。
2）限制什么？
限制用戶與界面交互的觸點。還是以智能填寫為例，當(dāng)前界面有三個觸點：上傳圖片按鈕、輸入框、智能填寫按鈕。這三個觸點分別對應(yīng)著步驟一、步驟二和步驟三。如果我們在步驟一的階段給用戶提供了步驟三的觸點，保不齊會有用戶嘗試去交互，這樣的無效操作會觸發(fā)報錯場景。所以當(dāng)用戶處于一個線性的操作流程中，根據(jù)用戶所處的階段，分析用戶可能進行交互操作，提供交互觸點，保證用戶看到的觸點都是可交互的。
罔顧用戶的操作階段，一股腦的把所有觸點都提供給用戶。設(shè)計師倒是很省心，但是用戶卻會很糟心，他們需要花時間去判斷和分析每一個觸點的作用以及它們之間可能存在的聯(lián)系。這個工作應(yīng)該由我們代勞，我們來分析用戶處于不同階段所需要的功能觸點。
舉個知乎的例子，知乎有一個“向知友提問”的功能。但是這個按鈕只會在用戶滑動搜索結(jié)果頁3屏后才會出現(xiàn)，因為滑動了3屏，我們可以猜測用戶對當(dāng)前的搜索結(jié)果不滿意，引導(dǎo)用戶去提問。
當(dāng)然限制原則不僅僅是限制交互觸點，還可以應(yīng)用到產(chǎn)品邏輯中，幫助用戶解決很多問題。我曾經(jīng)遇到過一個場景，公司上線了一款優(yōu)惠券，用戶點擊“立即領(lǐng)取”按鈕即可領(lǐng)取。但是有些用戶會被風(fēng)控判定為了風(fēng)險等級過高，導(dǎo)致領(lǐng)取失敗。對于這個報錯文案，我們改了好幾版，但是每次都會收到用戶的投訴。我們無法直接告訴用戶，你是因為風(fēng)險等級過高導(dǎo)致無法領(lǐng)取，因為用戶風(fēng)險等級過高是因為開通了某項業(yè)務(wù)。當(dāng)時開通的時候，我們并未告知開通后會被判定為高風(fēng)險用戶。所以為了不必要的麻煩，最好的辦法就是進行判斷前置，如果判斷用戶為高風(fēng)險用戶那么就直接不展示該優(yōu)惠券。
就近原則
從上面的闡述中，我們可以發(fā)現(xiàn)“所見即所得”原則最根本的目的是為了節(jié)省用戶的操作時間，提升產(chǎn)品易用性。廣義的操作時間還應(yīng)該包括了用戶對于反饋的感知時間，因為只有充分理解系統(tǒng)反饋的信息才能進行進一步的操作。如何幫助用戶快速的消化反饋的信息呢？因為反饋是系統(tǒng)對于用戶操作的回應(yīng)，那么我們可以讓操作和反饋盡量的貼近一點，這就是就近原則。就近原則可以分為兩類：位置就近和形式就近。
1） 位置就近
所見即所得，這里的“所見”即代表著用戶的視線，而用戶的視線總是停留在上一個交互觸點附近。
例如，還是寄件的場景，要填寫發(fā)件人信息，我懶得重新填寫一遍地址，正好看到輸入框右邊有一個附近地址的功能。我點了一下，沒有反應(yīng)，又點了幾下才發(fā)現(xiàn)底部出現(xiàn)了一個“附近地址”的列表。這里的交互觸點是“附近地址”的文字鏈接，我的視線也是停留在附近，沒有注意到下拉列表已經(jīng)出現(xiàn)在底部。操作和反饋完全不在同一視覺區(qū)域。
2）形式就近
形式就近，這里的形式特指反饋形式。目前最通用的反饋方式是彈框，彈框的弊端也就恰恰在于它的“通用”上。所有類型的反饋都可以用彈框來承載，用戶無法立刻感知到彈框所傳遞內(nèi)容是什么。既然反饋是系統(tǒng)對于用戶操作的回應(yīng)，而用戶操作又是一個個交互觸點所觸發(fā)的。如果我們可以通過改變觸點自身形態(tài)的變化來完成信息的傳遞，用戶感知起來會更加容易。
舉個例子，用戶在輸入登錄密碼的時候，其觸點是輸入框。當(dāng)用戶密碼輸入錯誤的時候，我們可以通過抖動輸入框的方式告知用戶輸入錯誤，這里抖動是現(xiàn)實生活中“搖頭”的映射，我們都知道搖頭代表著否定的意思，用戶不用看到彈框上的“密碼錯誤”幾個字也能明白密碼輸錯了。
總結(jié)
以上就是我對交互設(shè)計中“所見即所得”原則的總結(jié)和分析，如果你有不同的意見和看法，歡迎留言或者加群討論
藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
藍藍設(shè)計的小編 http://sillybuy.com