如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
短視頻產品成為年輕用戶社交娛樂的主場景，QQ在短視頻社交的耕耘過程中，打造了豐富的發表能力，讓用戶更方便的記錄生活精彩瞬間，同時也更方便的與好友互動，今天我們對設計過程進行復盤，將過程難點與設計思路從能力建構、設計切入、設計亮點引入、設計亮點深挖簡述供各位參考。
二 發表能力建構
————————
同質化競爭突圍
發表能力構建方面從最輕的發表成本以及最多的發表回饋兩個維度做橫向的鋪陳，建構了除了拍攝以外，輕量主觀表達的文字視頻，不受時空與題材影響發表動機的影集，勾引起共同參與及話題的游戲，最多社交參與感的問答等發表能力等四種發表方式。打造輕量發表成本的文字視頻可以確保發表量足夠，以解決發表量與觀看量不對等的問題，在小游戲與問答等發表方式，除了可以營造社交場景以外，創新的玩法也能與競品拉開差異，在眾多的短視頻產品中具有自身的特色。
然而單純的發表能力差異容易被模仿，能夠保持自身優勢與特色的時間十分短暫，建立起與用戶情感上的連接可以有效的加深用戶對服務的認可以及歸屬感，舉個例子，前段時間筆者至上海出差數日，意料之外的一份小禮物卻促使我成為該酒店的?？停@證明了建立情感連接確實可以成為與同業同質化競爭時不錯的突圍點。
三 設計切入角度
————————
建立情感連接，是視頻設計“雙面性”的一面
參考諾曼的理論，情感化設計分為本能，行為，反思三個層面。在打造視頻制作工具的過程中，滿足本能的外觀愉悅以及確保行為過程的順暢性屬于基本要求，可以參照過去設計工具的手法，保證架構流程界面反饋每一環節的使用效能和低理解成本，而反思的范疇則與內容相關。為制作視頻內容而設計，需要將用戶的經驗，喜好，文化轉化成特殊符號，以觸及情感連結最重要的反思環節。
用戶與產品接觸的過程按時間展開分為初次接觸、逐漸了解、熟悉依賴三個階段，若在每個階段都能與用戶保持情感連接，必能逐步加深用戶印象，達到競爭差異化的目的。下文兩個案例演示我們如何在引入期和成長期選擇合適觸點，制定相應設計策略和方案，從而達到此目的。
四 設計亮點引入
————————
喚起情感，拉近與用戶的距離
為了讓用戶更主動的發表相冊視頻，QQ團隊在影集發表模塊上規劃了智能相冊的能力，借助用戶回憶塑造超級符號，把用戶的親身經歷與產品功能建立聯系，提高使用意愿。在影集的引導步驟中，尋找合宜的契機，把零散的照片按特定線索重新組織，經過精心包裝以回憶墻的方式重新呈現給用戶。
影集功能的重新包裝：
4.1 場景搭建
QQ經授權后訪問用戶相冊，沿時間和位置線索用聚類算法對照片歸類，產生與特定場景關聯的照片組，再用圖像識別技術從照片組中精選特定n張合成視頻，為后續情緒升級埋下基礎。
4.2 意境傳達
為視頻搭配轉場音樂是主要增色手段。
轉場效果設計要以情緒傳達為目的，過渡動畫和快慢節奏的靈活搭配打造大片質感，疊加細節讓畫面生動不僵硬。
在配樂標準上，我們基于用戶習慣推導，明晰場景+節奏的音樂選擇維度。
轉場和音樂的挑選需貼合場景特征。在“聚會”場景中，設計師選用翻轉重組的效果傳遞歡快愉悅氛圍，曝光和光暈細節可以模擬真實光影效果?！巴杲袢铡眲t表現出安靜氛圍，沉浸的復古濾鏡和低調的疊黑效果讓情緒表達含蓄收斂，漣漪波動仿若時光倒流。
4.3 捕捉時機，宣傳專屬回憶
在信息架構層的設計使用卡片橫滑的方式，一方面可以暗喻時光隧道，另一方面考慮到大卡片比其他尺寸的縮略圖在陳列和交互行為上更利于突出視頻的優勢。
4.4 案例回顧
我們采用情感符號引導發表的策略，得到數據的支撐，影集發表總量和發表轉化率均有明顯提升。經過市場橫向對比，QQ團隊在對影集的功能規劃和整體設計理念上占據了優勢位置。
五 設計亮點深挖
————————
打造情感體驗峰值，強化用戶印象
在任何體驗中，都應該重視體驗過程中的情感峰值，如同丹尼爾卡曼說，體驗產品時能夠被記住的只有峰值與終值的體驗，我們在智能相冊的環節之中建立起與用戶情感上的鏈結，而鏈結后的情感峰值，則選擇在發表成本最高發表頻率的文字視頻中深挖，讓體驗情感的峰值在高頻率的場景中發生獲取最高的投入回饋。
5.1 過程頗折
文字視頻上線后發現用戶發表意愿未達預期，癥結在于其過程缺少能激發用戶主觀意愿表達的情緒觸發點。我們提出兩個優化思路，
1 降低理解成本，體驗對齊于常見動態發表界面。
2 支持自定義背景，用帶場景暗示的背景烘托情緒氛圍。對比實驗后發現2既可增加文字視頻的意境表達又不干擾基礎操作，是為更佳方案。
文字視頻的初期方案和優化方向：
5.2 策略制定
QQ團隊基于對用戶發表場景統計，確定以傳達心情和高頻發表時間點為線索，策略制定是考慮到既要與用戶表達有耦合但不能具體有所指。
5.3 意境傳達
背景模版設計有以下原則：
1 界限分明，背景效果不要干擾主體信息。
2 意象與認知相符，有情理之中意料之外的驚喜，引起用戶好奇心。
3 表義避免太具象。抽象表達騰出更大想象空間，讓用戶創意不受縛于環境。
以下是全部模版效果展示。
5.4 案例回顧
經優化后文字視頻的背景從純視覺角度轉變成帶動用戶情緒刺激發表的觸發點，后續團隊結合運營策略，在特殊節日或特殊事件前更新模版可以持續刺激拉升文字視頻發表量，該策略的運用屢建奇效。
六 總結心得
————————
設計經驗
產品體驗路徑中植入情感因素意義重大。在引入期喚起情感降低用戶心理戒備，產生熟悉親切感。接觸期有效調動用戶情緒制造情感峰值，加深印象。成熟期創造互動機會，讓情感得到延伸寄托進而鞏固市場地位。此過程環環相扣層層遞進，在用戶心理推波助瀾。
好設計是能影響用戶非理性，改變情緒最終影響他的行為。設計的高境界在于只影響不明說，用戶不需要領會設計意圖，但情緒已經被感染了，在情緒的作用下，按照設計者預定的軌跡，自然做出選擇。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
響應式已經成為網頁設計的主流，目前已很多網站能兼容手機端 ，但是唯有 dashboard 的界面是相當難在移動端顯示，特別是數據復雜、內容較多的后臺數據，是很難直接展示到移動端的。
今天我們分享一系列 dashboard UI 設計作品，主要展示一些用戶數據、圖表的可視化組合設計。這些作品界面布局合理，層級分明，設計美觀，對要做這類 UI 的同學有很好的參考價值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟蹤器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活動追蹤 by Cuberto
– 04 –
醫院 APP 設計 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 后臺設計 by Arnar ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易證券數據界面設計 by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
記帳應用統計界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
銀行 APP 數據界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特幣交易界面設計 by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
醫療護理app用戶后臺 by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
這個展開菜單很好看呢 by Martin Mro?
dribbble.com/martinmroc
從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區別，移動端的后臺只能顯示少量或簡化版的數據。比如 PC 一個頁面的功能，在移動端可以分開1-2個頁面來區分，或者使用類似 Tab 的形式來展現。
如果是手機 WEB 端可以用響應式來解決，以節省成本，但這樣通常交互并不十分友好，如果時間和成本允許的話，建議產品和交互人員策劃新的后臺版本。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在多人團隊里，通常不同的設計師負責不同的流程，如果沒有UI設計規范，不同的設計師就會對相同的組件做出不同的方案。產生大量重復工作，效率比較低。而制作設計規范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁面，把設計師從基礎工作中釋放出來，大大提升設計效率。
目錄
一、為什么要建立規范
二、規范的適用范圍
三、如何建立規范
1 利于多人協作，提率
2 增強一致性，塑造品牌感
制作和遵循設計規范，能夠保證整個產品的交互效果和視覺風格、乃至文案的統一性，提升用戶的體驗。
3 減少冗余內容，方便維護和更新
同類內容使用一樣的組件，能夠降低輸出的內容量，減少冗余的控件和代碼。同時也便于維護，在迭代時進行統一的更新和應用。
4 利于工作交接
方便設計團隊和其他團隊交接，如果團隊有人員變動，也方便后續入職的同事能夠通過規范迅速熟悉產品，快速上手。
前面的文章我提到過，如果產品處于啟動期的話，這個時候最重要的事情是圈到第一波用戶，讓自己活下去。在這個階段產品會頻繁的改版、驗證，迭代非?？?，整個團隊可能都處于拼命加班的狀態。在這種情況下做設計規范文檔顯然事倍功半，一個是浪費人力資源，另外就算做了，在頻繁更新的背景下也很難去執行。
因此設計規范文檔更適合于那些跨越0-1階段的產品，這個時候產品已經用有了一定的用戶，團隊也會擴張。這個時候我們可以選擇制作基礎的設計規范，比如柵格、配色、字體、圖標規范等等。對于成熟期的產品來說，大版本更新的周期是非常長的，這個階段通常會制作更為詳細的設計指南、設計原則、do & don’t、品牌書、圖標手冊等等。
電商類的產品對于大家來說都是比較熟悉的，就算不從事這個方面，日常使用也會很頻繁，所以此次案例我們以下面這個電商APP作為示范。
做規范時通常會有這兩種情況：
1、不打算進行大版本更新的產品
對于小版本迭代的產品來說，建立規范只需要在sketch里把所有設計稿進行歸攏和分類。直接根據現有的稿子梳理出規范，再對不符合規范的文件進行調整即可。
2、新版本 新規范
而對于需要做新版本并且建立新版本規范的產品來說，在做設計稿之前，我們就需要先統一一些基礎的內容，比如顏色、字體、柵格等等，然后在設計過程中去制作KIT、對基礎的規范進行補充。
1 制定統一的柵格系統
因為現在都是一稿適配多端，所以首先需要確定設計的基準尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個公司設計稿的基準都不一樣，我們是以一倍圖為基準進行設計的，所以我這里的基準尺寸就是375*667，單位為pt。
柵格一種情況是制定網格系統，網格系統的話首先要制定最小的設計單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設計單位之后，界面中所有間距采用最小單位的倍數。
假定我們最小單位4的網格，排版時橫向和縱向的間距都是4的倍數，比如8、12、24。
第二種情況是可以直接建立橫向柵格系統，常用的是12柵格，12柵格比較好的地方是能夠同時被2、3、4整除，因此能夠根據具體需求靈活的設計各種模塊。當然如果產品比較輕量化，是不需要這么復雜的柵格的，可以根據需求設置6、4甚至2柵格等等。
2 色彩規范
色彩規范主要表明色彩的色值和使用范圍，一般會從品牌色、輔助色、基礎色、狀態用色等等。如下圖所示。
如果產品常用到漸變的話，需要注明漸變的角度以及漸變色的色值。包括產品如果有夜間模式的話，要額外注明日間和夜間模式下各個顏色的對應色值。當然這里的夜間模式說的是真·夜間，而不是微博那種直接加一個黑色透明度蒙層的偽·夜間。
額外提一句，重要內容和正文內容要保證文本的可識別度，WCAG指南中指出，文本和背景色的對比度需要達到3：1。大家可以通過
https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色。我這里的品牌色和強調色對比度為3：1和6.3：1，而輔助顏色（比如標簽）的對比度則在2-3之間。
3 字體
字體規范最需要注意的是提取出各個場景下需要用的字體和字號。
需要注意的是，要標注上應用場景方便其他人理解。不然其他成員也并不知道到底什么時候應用一級標題、什么時候用二級標題。
4 圖標
通常來說圖標分為兩種，功能性圖標和展示性圖標。
功能性圖標是為了引導用戶理解和操作，需要表現和簡介，方便用戶識別其含義。功能性圖標常規狀態下為無彩色。
展示性圖標通常為頁面入口，會有更多形狀、顏色、質感的表達，吸引用戶的注意力和點擊欲望，強調差異性，比如各種品類區的圖標、徽章、等級圖標等等。
圖標規范通常來說會先定一些基礎尺寸，梳理好各個頁面的圖標尺寸，進行整合，最后確定好幾個基礎尺寸，比如我這里的基礎尺寸是4個。功能層級一致的圖標尺寸要一致。
為了保證不同形狀的圖標在視覺上保持大小一致，會制作一個圖標的基礎制作說明。制作說明里會統一圖標的圓角、描邊的粗細；如果是涉及到展示性圖標的話，還會有圖標的視角選擇、配色的選擇、以及如何表現質感等等等等
5 默認圖
電商APP的話有大量的產品圖片，所以我們也把默認的占位圖樣式進行了統一。因為我們這里樣式都是一致的，所以采用了統一的規范，如果有多種默認樣式，或者有其他類型的占位圖，需要分別進行說明。
頁面組件通常包括導航欄、工具欄、彈框、列表、卡片、空狀態等等，按照原子設計理念來說，還可以把組件拆分為原子、分子等更小的基礎設計組件，比如角標、標簽、按鈕、圖像、優惠券、選擇器、進度指示器等等
頁面組件除了梳理出規范之外，通常會整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導入為Libraries直接調用。當然，也可以直接在KIT上備注出規范和注意事項，具體輸出什么格式這個看團隊的需求即可。
因為組件部分是一個比較龐大的內容，需要根據具體產品
1按鈕
按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優先級，屬于強引導型按鈕。
按鈕通常會有三種狀態，常規狀態、點擊狀態和不可用狀態。因此在規范中需要標明按鈕在這三種狀態下的樣式，比如顏色、投影、圓角、文字大小等等
除此以外，也可能會有加載狀態，也就是在點擊按鈕后，如果有1S以上的數據延遲，通常會考慮觸發按鈕的加載狀態。加載狀態的按鈕樣式為按鈕上顯示進度指示器。
2 導航
對現有頁面的導航進行收攏和分類，比如我這里分類為常規標題樣式、標簽樣式、搜索框樣式、無標題樣式、字母導航……
標題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點擊區域，我這里icon的尺寸設置為24pt，但是熱區是44pt，所以要注意間距的設置，熱區不能重疊。
3 標簽
標簽通常有多個使用場景，我們可以對標簽進行分組，比如運營類標簽、內容屬性標簽、篩選標簽等等
然后對每類的標簽統一樣式、文字內邊距以及說明適用場景。
4 彈窗
彈窗是為了提示和通知用戶而位于頁面內容之上的一種控件。它是引導用戶專注于某一項任務，用戶可以通過操作來關閉彈框。彈框包含模態（對話框、操作菜單）和非模態（toast、 snake bar等）兩種形式。
模態彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內的文字說明和按鈕。
我這里拿一個對話框的規范進行舉例，這是一個無ICON的雙按鈕對話框，因此在這里我們需要說明標題、正文文本、按鈕以及背景遮罩的信息，還有字號、行距、文字極限值、文字色、按鈕的狀態等等……
除此之外，組件類的規范可以配上常用案例、don’t&do，會更方便團隊人員理解，防止錯誤狀況。
5 列表
列表是由多個等寬的行組成的、按照一定規律排列的連續條目。列表在一些資訊類產品里會有更多的組合形式。我這款產品里用到的列表主要是單行和雙行列表，那么我們就整理出對應的列表類型和需要說明的事項。
寫這篇文的初衷，是因為從去年底我建立公眾號，并且在站酷發表了一些文章，得到了很多人的認可。很多粉絲私信我各種問題，陸續有人問我設計規范怎么做、交互規范什么樣之類的問題。但是公司內部的文件確實沒有辦法公開分享，所以我就想說，那不如專門寫一篇文章詳細教大家制作移動UI設計規范吧。
這篇的基礎部分我做的比較詳細，組件部分寫的有些概括，主要是因為組件部分不是通用的，要根據自己的稿子進行整理和歸納，歸納好之后做好標注和規范說明即可，這部分是一個羅列的內容，所以就不必展開了……
當然還有很多內容沒有展開說，比如在Sketch里把KIT制作成Libraries統一使用，但是我想作為一篇設計規范入門教程目前應該足夠了，更多的內容我在后續開新文去補充吧。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們的文化中會將大師們捧上天，凸顯他們和常人差別最大的那個部分。大師當然是有屬于他們的秘訣的，可是他們的成功同樣植根于他們生而為人的煙火氣。從一個人的視角來解讀大師，在崇敬的同時，我們也應當對自己有信心——他們已經替我們走出了一條，可供參考的道路。創造力是我們每個人與生俱來的，我們天生就是創造者。人人都可以創造，而且大多數人都以不同方式進行著創造。毫無疑問，創造新事物時，我們是最快樂的。
不幸的是，許多人會找借口不去創造，比如：「我沒有足夠的創造力或天賦?！惯@是不對的。在重新審視簡·奧斯?。↗ane Austin）、畢加索（Picasso）、愛迪生（Edison）、蒂凡尼（Tiffany）和丘吉爾（Churchill）等著名人物的經歷之后，我意識到，創造力和我們常說的天賦，只是勇氣和不懈努力的副產物。
每個人都是有創造力的。眾生平等，人人皆可創造。個體性和獨立性只是用來發掘和完善內心世界的。因此我們每個人都是有創造力的。
正如我在上文中提到的，勇氣是與創造力和創新直接相關的。對此 Paul Johnson 賦予了最好的定義：
創意往往反映出巨大的勇氣，尤其是當藝術家不向最終的敵人——年齡或衰老，低頭的時候。
我開始探索，我想知道創造力是什么。為什么有些人能夠通過他們的創造改變歷史的進程？是什么引導他們創造？他們的工作背后有什么秘訣嗎？為什么有的人名垂青史而另一些則不然？
最終我發現了一個殘酷的事實——以創造為事業的人每天都在不知不覺中辛苦工作，而且前途未卜。正如約翰遜所寫的，你必須能夠戰勝時間和任何可能出現的身體缺陷。比如貝多芬不得不和他的聽覺缺陷作斗爭；愛迪生失敗了幾千次才發明出最后的燈泡；瓦格納生活貧困，經常向人要錢；艾米麗·狄金森從不顧及公眾的態度，無論是鼓勵或批評，始終獨自一人寫詩。
在我致力于研究不同性格的人的時候，最讓我驚訝的是每個創作者總是在前人的基礎上創作。沒有人憑空創造出好作品，而這打破了我一直以來所持有的刻板印象。
所以讓我們深入研讀一下創造者們的經歷，看看他們是如何工作的，讓他們如此特別的秘密，就在其中。
「如果我沒有足夠的天賦，又有很多競爭對手，那么我將每天創作一幅畫，直到讓世人知道我是活著的最偉大的畫家?！惯@無疑是畢加索踏上成為歷史上最成功的藝術家的道路時，一直秉持的信條之一。
畢加索出生于西班牙的馬拉加，僅有的繪畫啟蒙知識是由他的父親傳授的。至于其他方面，我們可以很容易地說畢加索是自學成才、自我推銷，在他所居住城市的街道上接受教育的。從很小的時候起，他就一直密切關注著市場，因此他總能知道什么才是可以賣出去的。
不同于等待靈感的到來，找尋上帝賦予才華的人們，畢加索每天都在創作。他的工作原則是速度勝于準確和努力。他是我們所知道的最不安分、最具實驗性的創造者之一。他做的每件事都必須盡快完成，不會對作品精雕細琢。
畢加索做過許多工作。除了繪畫，他還做雕塑、面具。無論是在畫布上、紙上，石頭上，陶瓷上還是在金屬上，他都是卓越的藝術大師。對他來說，沒有任何物質障礙。他是一個絕對的實驗主義者，每十年都會改變他的風格，對于顛覆從前的自己從不畏懼。
他還設計過海報、標志、廣告、戲劇服裝和服裝。畢加索離世前留下了超過3萬件作品，這是有來源的（catalogue raisonne – 1932-1978）。畢加索是一個有數量觀念、強烈的職業道德和實驗精神的人。
也許你不會想到這份名單上會出現這位政壇人物，但我這樣做是有充分理由的。他是一位首相，二戰后他在歷史上贏得了一席之地，但他確實值得被列入名單，因為他也是一位畫家和文字大師。
丘吉爾是如何開始寫作的？父親離世后，丘吉爾悲痛萬分。他覺得喪失了自我，也失去了內心的平靜。因此，他決定寫一本完整的傳記獻給他的父親。在那之后，他發現了自己對文字的熱愛和激情。丘吉爾不知道什么是創造力，他只知道「努力工作」這幾個字。
溫斯頓日以繼夜地工作。感謝上帝，他很好，只有在8小時睡眠不足的情況下才會感到疲倦?！鸺獱柕钠拮?Clementine Churchill
很少有人知道丘吉爾一生中寫作超過1000萬字。這其中包括他的演講稿、書籍和文章。這種寫作量比任何作家寫的都多。他從小就有寫下所有他感興趣或參與之事的習慣。
他不僅練就了寫作技能，而且還從中賺錢。每次他去不同的國家，或者參與一場戰爭，他都會寫相關的文章賣給報紙或期刊。他寫了三本關于二戰的書，共有約200萬字，是關于那個時期覆蓋范圍最廣、最有價值的資料之一。
語言是唯一不會消亡的東西?！獪厮诡D·丘吉爾
當他不寫作、不娛樂、不與政治斗爭時，他就畫畫。他發現畫不僅可以作為愛好，而且可以成為面對困境時的避風港。因為畫畫的時候你要保持心無旁騖，這樣便可以放松你的大腦。
他從不逃避艱苦的工作，相反，他竭盡全力地工作：議會、行政、地緣政治、寫作、繪畫、建造田園詩般的房屋和花園。丘吉爾自命不凡，他的創造力流淌在他的血液中。他希望自己所見的一切，都能親自動手實現，這就是他有別于他那個時代的其他人的特質。
在所有創意大師中，克里斯托巴爾·巴倫西亞加是最專注于創造美好事物的創造者。工作滲透了他生活的方方面面，他將自己全部的精力交付于工作。
作為著名品牌巴黎世家的創始人，他是怎么進入時尚圈的？三歲時他參加了一個縫紉班，他對此表現出極大的熱情。在接下來的74年里，他的縫紉技術爐火純青。在他的余生中，他每天都要做一件針線活以保持手的靈活度。他是當時唯一一個在服裝設計上獨當一面的設計師，他做過縫紉、剪裁、選料等一切與制衣相關的工作。他唯一不會做的事就是畫畫，需要助理代為完成。
他的工作量巨大，整日都待在工作室里。以至于人們一度認為「克里斯托巴爾·巴倫西亞加」是一個假名，也許并無其人。幾乎沒有人采訪過他或是見過他，也幾乎沒有他的照片。他從不參加社交活動，除了和一兩個老朋友相聚外，他很少出去吃飯。
這一切都使他得以專注于創作能永遠流傳的作品。他孜孜不倦地工作和創造。這就是為什么現在幾乎沒有設計師能夠創造出像他在上世紀五六十年代那樣的創作作品，這些作品正如同其他人所說的——那都是館藏級的作品。
他工作非常努力。巴黎世家每個系列都有200-250個設計，所有這些都是他自己完成的，因為他幾乎不信任任何助手。他甚至拒絕了年輕有為的紀梵希（Hubert de Givenchy）的幫助。
從他三歲到生命的最后幾天，他每天都努力工作。在上世紀60年代最艱難的時期，他停止了工作，因為心臟病發作，大師最終離世而去。
路易斯·康福特·蒂芙尼癡迷于用玻璃制作窗戶和燈具，并以玻璃進行珠寶創作。他的父親查爾斯·路易斯·蒂凡尼（Charles Lewis Tiffany）生于1812年，1837年在紐約開了一家商店，銷售文具和精美的器皿。他似乎繼承了他父親的品味，把平凡與非凡融合在一起。
蒂芙尼是一位真正的創造者，他勇于嘗試，樂于為自己設定不可能完成的任務。盡管他父親是個商人，他早年還是選擇了學習繪畫。但從本質上講，他也是組織者、領導者和商人，也是一個揮霍無度的人和收藏家。如果要給出一個定義，蒂芙尼是一位創造者和推動者，他的遠見卓識和組織能力使這一切成為了可能。
在二十世紀初，他雇用了100多名玻璃行業的出色工人，鼓勵他們試驗自己的想法，并輔以化學方法，對這些想法進行進一步的研究和推動。
他利用他的珠寶工作室實驗特殊的金屬反應。這些金屬與彩色玻璃結合在一起，形成了「寶石花瓶」。他一直在研究他在旅行或參觀博物館時挑選的古代玻璃碎片。他在尋找可以用于復刻它們的化學方法。
蒂凡尼對探索發現和實驗有著一種無法言喻的渴望，這讓他能夠創作出如今每件價值超過100萬美元的作品。他經常去不同的國家旅行，研究與玻璃有關的古代文化。他保存了旅途中的許多發現，參觀博物館都會留下詳細的筆記。
重要的一點是，蒂芙尼喜歡與他人合作或從其他風格中獲得靈感，但他從不抄襲。他寫道：
神賜給我們的才干不是要我們模仿別人的才能，而是要我們運用自己的頭腦和想象力。即使是在團隊中工作，藝術家的個人風格也是通向真正美麗的道路。——Charles Lewis Tiffany
他還創造了一種表面粗糙的昂貴玻璃，之后他為其取名「熔巖」?！溉蹘r」的靈感來自他在維蘇威火山附近發現的碎片。他對古代的研究發現，埋在灰燼中的瓷磚（如龐貝古城）經過了2000年的化學變化，產生了光澤。這個變化過程可以在工廠實現。不久，他賣的瓷磚比花瓶還多。
要成為一個創造者，就必須成為一個藝術家？大錯特錯。發明家和商人托馬斯·阿爾瓦·愛迪生背后有1000多項專利。大多數發明家在現代社會發展中發揮了至關重要的作用。他們的靈感來自于解決他人需求的渴望，以及與藝術家合作。
他的靈感來源于給予人們聞所未聞的東西。例如，他發明第一臺錄音機的靈感來自偉大的歌手和樂器演奏家的聲音。他想給他們更好的創作工具。
他在電力方面的貢獻也是如此。他信任與其他創作者和藝術家的合作。他鼓勵蒂芙尼將燃氣燈換成電燈，這樣生意會更好。后來他與蒂芙尼合作，設計了紐約第一家完全使用電燈照明的劇院，幫助許多舞者尋找新的可能性來發展自己的演藝事業。
天才是1%的靈感加上99%的汗水?！獝鄣仙?
他的實驗室看起來更像是畫室，而不是科學家的工作室。有時他沉迷工作就會睡在地板上的衣服里。他的名言「天才是1%的靈感和99%的汗水」詮釋了他的職業道德觀。做一個創造者不是一句空話，而是一種生活方式。
有句話說，只有業余愛好者才需要別人給靈感，專業的創作者靠的是自己日復一日重復工作。我多么不希望這是真的，但別無他法?；蛘呔拖裎业囊粋€朋友說的：「如果你不利用各種信息，你就不可能保持靈感?！顾f的信息是指讀書，看電影，聽音樂，去畫廊，和聰明有趣的人交談，旅行和探索一個新的國家。這可以看作一種「消費」。一旦你「消費」了，你就必須創造并回饋世界。
在閱讀了這些創造者的故事后，我們可以看到所有人都有一個共同點——努力工作。所有的創造者都有一個人生座右銘——不斷創造。其他的部分只是他們的個性。
做一個創造者不是一個頭銜，而是一種生活方式。這不是三天打魚兩天曬網的事，也不僅僅是一個愛好，這是你的生活。當然，他們能夠堅持下去，也因為他們內心對于這件事情足夠熱愛。
我們不需要上帝般的靈感來創造非凡。真正的創造者總是在收集周遭各種各樣的信息，無論是在自然中、在不同的國家、在書籍中、在電影中、在音樂中、在食物中，還是在與藝術家或其他像你這樣的創造者的合作中。
同樣值得注意的是，創作者在創作時通常都是以自我為中心的。他們不允許其他人越俎代庖，因為他們想確保他們的工作朝著自己認同的方向發展。而且，這是因為他們喜歡創造自己的生活，而不是讓別人為他們創造生活。當然，在大多數現代環境中，在工作中以自我為中心是不現實的，也是不的。但每個人都有自己的方式。有些人是推動者，有些人是獨裁者。
PS：當然還有更多偉大的創造者值得我們去寫（無論男女）。這個名單僅代表個人觀點。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等，再設計時需要考慮好其中的關聯性，給出最符合用戶心理預期的過渡方式，從而做出最合適的設計。
頁面跳轉在APP中屬于最常見，也是最基礎的一個交互細節點。
我們常見的跳轉方式：直接跳轉、左右跳轉、上下跳轉、翻轉、聯動；其它酷炫的效果我們看過很多，但是現實中能做到的又有幾個呢？
首先我們看一下，我們的視覺順序「閱讀順序」是：左→右，上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式：左右跳轉，上下跳轉。
最原始、最簡單的跳轉方式，web端常見，在APP中出現較少，標簽切換常見，這個比較簡單，沒什么講的。
常用于快速開發，Android中常用。
實現難度：無；
維護成本：無。
最常見的跳轉方式。（ios原生效果）
實現難度：簡單 ；
維護成本：低；
運用場景：夫級→子級→子子級，依次類推。
常用場景：
這里有個細節要注意，就是我們的返回鍵在左上角，也就養成了用戶一種習慣，左上角的鍵，與點擊之后的效果，往往就應該是頁面從右側退出的樣子，與進入時反向的效果。
這也是為什么大部分APP不會把入口按鈕放在左上角的原因。
那么左上角這個位置，除了給返回鍵當做固有的位置外。還常常用于抽屜式導航，因為抽屜式導航的方向，與返回時的移動方向是一致的。常見抽屜式導航APP如：滴滴打車、摩拜單車等。
相對于左右跳轉，上下跳轉就比較難理解了。
實現難度：簡單 ；
維護成本：低。
這種跳轉方式也很常見，但是大部分人不清楚什么時候用，這里我們簡單分析下。
運用場景：
1. 對當前頁面創建新的條目時；
2. 獨立啟動的一個子內容。（如小程序：微信/支付寶等）
比如我們在微信聊天頁，發起一個聊天的時候：
還有我們新添加群人員時，新建筆記本時，新建地址時等。
我們用微信聊天頁面在舉例：點擊＋號離的內容時：圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現，因為這些創建都是對當前聊天窗口一次性產生內容。（大家可以去感受一下這些細節）
下面我們看下百度的設置>地址管理>添加地址：左右>左右>上下。
實現難度：中等；
維護成本：低；
運用場景：完全切換內容，換到一個全新的內容集合里。
常見的有平安好醫生中間的按鈕，一級大姨媽APP中間的商城。
實現難度：高 ；
維護成本：高；
運用場景：元素之間從上級到下級關聯性強。
如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果，因為一旦頁面結構改變，整個效果基本無法復用。
類似于這種強聯動，我們會在很多概念設計稿中看到，但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。
這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口，另一種是搜索框做入口。
icon做入口：更像是上下級關系，常用左右跳轉來實現。比如：抖音。
搜索框做入口：點擊就給與獲取光標的感知，所已做好做簡單的聯動過渡效果。比如：微信、云音樂。
關于其它方式，基本上只有極個別的APP中可以看到。
其它的方式，要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果，因為元素要浮動，為了更加貼合所以有了收縮的效果。
形式上其實就是上下左右內外?？紤]好之間的關聯性，給出最符合用戶心理預期的過渡方式，就可以幫助我們找到最合適的設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
表單作為平臺與用戶聯系最為緊密的一環，也是影響商業交易成功與否的重要分水嶺。良好的表單設計可以給用戶提供流暢自然的交易體驗，保證用戶購物情緒的正向增長，而混亂無序的表單則引起用戶的負面情緒，影響甚至阻礙用戶交易的完成，降低用戶的品牌好感度和信賴度。
那么在設計過程中，需要怎樣規避風險，提升表單頁面的產品體驗呢？下面我們將結合實際案例，從七個方面介紹表單設計中的常見注意事項。當然，這些規則都是在表單設計中的一般準則，每條準則都有例外。
01 | 單列瀏覽
表單承載的主要功能是向用戶清楚地傳達信息，保持有秩序的單列表單形式更利于用戶瀏覽動線，它能幫助用戶識別并填寫內容，而多列的表單形式則會破壞用戶填寫規律，影響效率。
02 | 豎向排列
在表單中有多個選項以供用戶選擇時，將每個選項以豎向的排列方式位于每個選項下方時，更利于用戶閱讀瀏覽的習慣。
03 | 操作一致
表單填寫過程中我們應當避免在整流程中出現按鈕樣式、顏色的變化。需要用戶確認的操作行為的一致能有效減少用戶在行動時的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗，從而實現最終商業上的交易成就。
04 | 標題不可取代
雖然通過使用占位符代替標題的方式擴充了表單的填寫空間，減少了視覺噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發輸入，占位符消失，用戶可能會陷入這里該填寫什么的迷茫，必須刪除所有輸入內容后才能再次顯示標題，顯然，這是違背人性的。
05 | 輸入域符合預期
輸入域的長度與預期輸入的內容成正比，確保輸入字段長度符合用戶心理預期，并能在表單中能完整呈現。
06 | 不隱藏基礎幫助信息
作為一個購物流程中的信息確認和采集環節，需要用戶對于購買的產品有明確的認知。因此在設計過程中對于用戶填寫表單有基礎幫助的信息應該做強調或顯示設計，避免出現因為隱藏幫助信息導致的客戶投訴。
07 | 減少二次確認
基于OTA行業特性，出行表單業務對標電商購買表單業務需要填寫的信息更為冗長，層級更為復雜，為了減少用戶填寫過程中的心理負擔，降低填寫難度，我們需要對不必要的信息進行刪減或合并，為用戶信息輸入提供便利。
以注冊環節為例，在Web設計時往往會有二次確認密碼的環節，但在移動端這樣的操作會增加用戶填寫的負擔，因此大部分移動端界面上我們不建議對用戶的密碼信息進行二次確認，轉而通過使用明文顯示或者優化密碼消失交互的方法來改善這一環節的體驗。
08 | *號的使用
沿用通用符號習慣，在表單設計中若是對業務必填的信息，我們往往采用 * 號的形式來幫助用戶區分信息優先級。但當表單中必填信息多于非必填信息時，大量 * 號的應用反而會給用戶認知增加負擔，使得無法快速識別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設計中，當必填項多于非必填項時，隱藏 * 號標記，轉而通過暗提示標記非必填項的形式來幫助用戶識別。
09 | 暗提示的應用
暗提示作為輔助用戶填寫表單的主要方式，在設計上，需要盡可能地減少視覺噪音，確保文案言簡意賅，表現形式不干擾用戶。因此，對比度過深或過淺，色彩過于突出的都不適合用于暗提示的視覺表現。
在交互上，暗提示也并不是一直存在的。當光標觸發表單項時，暗提示保持顯示，指導用戶輸入。而當用戶輸入字段后，暗提示內容隱藏，讓用戶專注于已填內容。
10 | 設置默認選項
在復雜表單中，對于如證件類型、手機區號、國籍等較為通用的選項，為用戶提供默認選擇的交互可以有效簡化操作步驟，減輕用戶填寫表單的負擔，更快地幫助用戶完成表單內容的填寫。
11 | 替代輸入
對于表單填寫過程中可以固化選擇的信息，應讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。
如：出游人信息采集時，提供添加常用出游人選項可以幫助減少重復填寫的負擔；證件類型采集時提供證件類型選項可以減少用戶困惑，在已有的選項中快速選擇；郵箱采集時自動聯想顯示Email網址可以輔助用戶規范文本格式，快速完成表單填寫。
12 | 鍵盤匹配
根據表單填寫類型的不同，自動匹配鍵盤類型。如“中文輸入”呼出中文鍵盤，“姓名（英文）”輸入呼出鎖定大寫的英文鍵盤，“手機號碼”輸入呼出數字鍵盤……免去用戶切換鍵盤操作的步驟。
同時根據填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助用戶實現換行/完成的操作，省去用戶收起點開鍵盤的重復動作和表單上下填寫項的切換，讓填寫表單的過程更為順暢，用戶思考不被打斷。
13 | 按鈕層級
在用戶面對多個按鈕的場景選擇時，我們應當幫助用戶預先區分出主要行動和次要行動，通過視覺語言強調主要按鈕，弱化次要按鈕，引導用戶進行選擇。
14 | 二次確認
因移動端特性，用戶在填寫場景較為不穩定如吃飯途中、行駛途中等，當用戶花費精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場景，需要在此時進行二次操作確認，確認用戶操作意圖。當然，如果用戶沒有對表單進行任何編輯，這樣的退出操作是不需要二次確認的。
15 | 多行文本
在復雜表單中，面對填寫內容過長的同類表單，用戶會在預覽時產生輸入壓力。運用字號、顏色、間距等視覺手段將相似層級的信息進行邏輯分組，幫助用戶更好地區分多行文本的信息層級，便于輸入。
16 | 號碼組合規律
對于一些常用的號碼字段，可以采用線下通用的數字組合規律幫助用戶閱讀和記憶，如電話號碼的組合規律為 3 4 4 ，銀行卡號的組合規律為 4 4 4 4 3。空格在數字呈現處的應用雖然細微，但是在長數字的閱讀場景中仍能給用戶帶來識別便利。
17 | 選項露出
在網頁端表單設計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中，觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時，當選項少于8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。
18 | 減少頁面跳轉
在表單填寫中我們期望用戶保持專注，盡量避免產生引導用戶離開當前頁面的填寫交互，這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。
19 | 關聯標記
當用戶提交表單信息后，如已填寫的內容有偏差，需要明確的標記有問題的數據及錯誤原因，幫助用戶找到問題并解決問題。杜絕報錯信息描述模糊，信息不關聯的報錯信息引發用戶困惑。
20 | 實時校驗
在某些業務場景中，為了幫助用戶在提交信息前校正他所填寫的內容，避免大面積報錯場景的出現。我們可以使用實時校驗的方法，在用戶輸入完成后進行判斷及結果反饋，如登陸注冊流程的驗證碼校驗就可以運用實時校驗的報錯方式。
當然需要注意的是，運用實時校驗的表單需在用戶明確離開此項輸入狀態時再進行結果反饋，而非在填寫過程中進行實時校驗，避免出現填寫時持續報錯的情況。
21 | 密碼保護
在輸入密碼的表單中，部分平臺會在密碼輸入時顯示暗文字段以此保護用戶隱私，而鑒于前述第七條準則，移動端的密碼已簡化至只輸入一次，暗文的顯示會讓用戶無法確認所輸密碼信息。因此在需要隱私保護的場景下，我們需要完善密碼交互的呈現形式，當輸入時，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入后再變成暗文，這樣的交互改善可以確保用戶在輸入中明確內容，也滿足了其隱私需求。
22 | 提交反饋
在用戶完成整個任務環節時，提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強烈的情感反饋。所以在設計時，我們需要提供正向的激勵夸贊用戶表單填寫成功，在表單沒有完成時鼓勵用戶修改內容，重新提交，不可以負面情緒責怪用戶。
今年上半年，本著提升途牛產品調性，為內容傳達提效的初衷，由途牛UED組織并發起了一次針對現有關鍵頁面升級的項目，在架構升級全量推進初期，我們優先選取了酒店表單業務作為此次設計重構的首選試驗點。
表單作為一個偏理性的產品，直接影響著用戶決策到產品轉化的數據，在此環節，更需要降低用戶成本，維持產品決策熱情以實現商業價值上的成功。在酒店表單業務改版過程中，除了應用上述七方面的設計準則幫助提升用戶體驗，我們也結合了酒店現有問題和產品特性進行了更為精細化的設計重構。
整合信息框架
—
體制讓步
對用戶來說，途牛是一個整體的產品，所有表單的基礎體驗應該是一致的。以往，基于企業平臺的發展，酒店細分的國內酒店和國際酒店兩個業務相對獨立，雖然同樣隸屬于下單環節，但是業務迭代進程及側重方向的不同導致表單前臺呈現差異較大。
借助途牛整體關鍵頁面升級的項目，在此次酒店業務重構初期，協同兩個業務的產品、設計、研發我們共同整合資源，解決歷史遺留體驗問題，為國內、國際酒店表單業務進行整體體驗的統一和提升助力。另一方面，UED也通過酒店業務的試點思路，將基礎表單框架進行模塊細分，逐步影響并推廣至全站表單業務升級。
框架構建
回顧現有酒店表單業務的問題，主要體現在內容層級模糊，類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項，只是基于業務類型進行了單模塊的設計，而對于用戶來說，差異化的表單項樣式無形中增加了填寫時信息獲取的成本。
基于人體本身的生理構造，我們在獲取文本信息時，并不會逐字閱讀，往往采用“掃視”的方式識別段落輪廓從而獲取信息，規律性的排列方式也會幫助持續這種“掃視”的節奏，提升信息轉化效率。
因此在設計上我們遵循相似信息一致性的原則，簡化重復冗余的視覺噪音，將每個單元表單項模型遵循“上類型+下內容”的形式幫助用戶快速對所需填寫的表單類型建立心理預期。在大量相同的填寫區域，統一左側內容標題對齊方式，并通過字色、字重等形式確保未觸發時內容標題為主，暗提示為輔，填寫后填寫內容為主，內容標題為輔的視覺表達，從而在表單的不同階段仍舊保證了用戶對于主次信息的識別體驗。
品牌信息傳達
為了減弱表單填寫頁冰冷感，在框架信息整合的基礎上，我們此次改版也將品牌解構，用色彩的形式融入表單頁面設計，將品牌功能化，輔助產品以深化品牌用戶心中形成立體感知。
當然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控件、操作、提示這四個方面展開，在不影響表單主要信息呈現的基礎上，遵循適度、適量兩個原則。
內容層級排序
—
用戶吸引
回顧整個購買流程，填寫訂單業務承擔著維系用戶在產品詳情所產生的內容吸引到內容轉化的責任，而如何在枯燥的酒店表單中維穩甚至加固用戶的內容吸引？為此，我們參照了《Actionable Gamification》關于人性八大核心驅動力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們。
結合對用戶使用場景的需求分析，我們將信息在用戶心中的關注度進行了重新排序，首屏弱化了用戶已經在詳情頁明確的酒店名稱，轉而對用戶需在此環節明確的房型、入住時間、離店時間等內容進行了強化和整合，明確產品歸屬。同時為了加固用戶的內容吸引，我們前置了酒店“超值價”、“可免費取消”等信息來解除用戶對于產品價格和沉沒成本的疑慮，從而正向地激勵用戶完成后續的表單填寫。
細分模塊
除了對首屏信息的排序重置外，對于需要用戶填寫的每個單元模塊我們也做出了一些調整。
如取消險模塊，此前為避免客訴，將所有需要用戶確認和查看的信息都進行了高亮提示和行動引導。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時想要詳細了解的，過多的信息干擾反而影響了有用信息識別，也降低了用戶填寫表單的效率。因此新版表單重構時我們將協議信息整合至末尾統一確認，同時對文字、icon進行視覺減負，統一弱化輔助信息呈現，轉而強調用戶需要確認的取消險金額和投保人模塊。
從上圖國際酒店改版前后的方案進行對比可見，每個細分模塊都有著或多或少細節的調整，當然還有沒有展現的輔助信息交互浮層框架的統一。這些信息呈現的形態與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡、幫助用戶、信息分組、減少跳轉、及時反饋”這七大原則，每一個細節都可以展開來細細剖析，這里就不多加贅述了。
結語
—
蚍蜉亦可撼樹，在產品升級的過程中，用戶體驗的提升往往需要依靠像表單這樣一個個微小的業務作為突破點，從而裂變反哺至全局。此次酒店表單重構項目從產品角度來看，功能上并沒有改變，而通過代入用戶場景，用戶感知，用戶行為習慣等方面進行細節的體驗升級。后續我們還將進行更加深入地探索與迭代，將體驗升級持續擴散至其他業務，為每一位途牛用戶帶來更便捷、更自然的出行體驗。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
交互設計中的“所見即所得”原則
“所見即所得”原則我記得在之前的文章中就提到過，但是沒有詳細說明。最近在體驗一些產品時，發現很多交互設計上的坑都可以歸納到“所見非所得”上。
所見非所得
我們可以首先來看一下“所見非所得”的案例：上周寄件去北京，在填寫收件人信息時候，發現了一個“智能填寫”的功能很有意思。所謂“智能填寫”就是OCR識別技術，系統可以識別圖片上的地址。例如，你的收件人地址正好是身份證上的住址，那么你就可以上傳身份證照片，系統直接識別照片上的地址而不需要手動去輸入。
用戶具體的操作流程是：
1 拍攝/上傳照片；
點擊“上傳圖片”按鈕，用戶可以選擇拍攝或者上傳相冊里的照片，框選合適的識別區域；
2 系統識別并展示結果；
系統會自動識別圖片中的地址信息，并且在輸入框中展示，如果有識別錯誤的地方，用戶可以手動編輯修改；
3 用戶確認；
用戶對地址信息確認無誤了，點擊“智能填寫”按鈕，輸入框里的地址信息會自動回填到地址欄；
了解了大致流程，我們來看一下兩款競品。產品A和B都提供了“智能填寫”的功能，但是在交互設計上存在差異。產品A，當用戶上傳完圖片才會出現“智能填寫”按鈕；產品B是全程展示“智能填寫”按鈕的。我個人更加偏愛產品A的處理模式，因為當用戶都沒有上傳圖片時，給用戶展示“智能填寫”按鈕是沒有任何意義的，這里的“智能填寫”雖然可見但是不可得，用戶也不能點擊。當然有人會說，雖然不可點擊，但是展示了也沒什么問題吧？當然有問題，它會給用戶帶來兩個痛點：
1） 增加了用戶的學習成本；
對于新用戶來說，產品A肯定更加容易上手。因為新用戶一進入這個頁面，只能看到上傳圖片的按鈕，用戶明白了我首先要上傳圖片。產品B是直接一股腦的把所有選項展示出來，用戶不知道這些選項之間的聯系和操作順序。
2） 阻斷正常操作流程；
給用戶展示了他們本不應該看到的元素，可能會阻斷正常的操作流程。用戶如果還沒上傳圖片，就點擊“智能填寫”按鈕會直接報錯，“所傳參數不能為空”，用戶哪里看懂這是什么意思。
之前在火車站取票，前面排隊的大嬸跟我說她的票取不了。我湊過去一看，發現她沒有關閉購買保險的彈框。因為這個彈框沒有蓋住底部“確認打印”按鈕，用戶誤以為還是可以點擊的，導致無法正常完成取票流程。
了解到這些痛點，那么如何才能在交互設計上實現“所見即所得”原則呢？我總結了兩個方法：限制和就近。
限制原則
了解限制原則，我們需要回答兩個問題：
1）為什么要限制？
因為多才要限制，多會帶來哪些壞處？內容多，用戶處理不過來；選項多，用戶挑花了眼；時間多，優惠券沒有有限期限制用戶懶得用。
2）限制什么？
限制用戶與界面交互的觸點。還是以智能填寫為例，當前界面有三個觸點：上傳圖片按鈕、輸入框、智能填寫按鈕。這三個觸點分別對應著步驟一、步驟二和步驟三。如果我們在步驟一的階段給用戶提供了步驟三的觸點，保不齊會有用戶嘗試去交互，這樣的無效操作會觸發報錯場景。所以當用戶處于一個線性的操作流程中，根據用戶所處的階段，分析用戶可能進行交互操作，提供交互觸點，保證用戶看到的觸點都是可交互的。
罔顧用戶的操作階段，一股腦的把所有觸點都提供給用戶。設計師倒是很省心，但是用戶卻會很糟心，他們需要花時間去判斷和分析每一個觸點的作用以及它們之間可能存在的聯系。這個工作應該由我們代勞，我們來分析用戶處于不同階段所需要的功能觸點。
舉個知乎的例子，知乎有一個“向知友提問”的功能。但是這個按鈕只會在用戶滑動搜索結果頁3屏后才會出現，因為滑動了3屏，我們可以猜測用戶對當前的搜索結果不滿意，引導用戶去提問。
當然限制原則不僅僅是限制交互觸點，還可以應用到產品邏輯中，幫助用戶解決很多問題。我曾經遇到過一個場景，公司上線了一款優惠券，用戶點擊“立即領取”按鈕即可領取。但是有些用戶會被風控判定為了風險等級過高，導致領取失敗。對于這個報錯文案，我們改了好幾版，但是每次都會收到用戶的投訴。我們無法直接告訴用戶，你是因為風險等級過高導致無法領取，因為用戶風險等級過高是因為開通了某項業務。當時開通的時候，我們并未告知開通后會被判定為高風險用戶。所以為了不必要的麻煩，最好的辦法就是進行判斷前置，如果判斷用戶為高風險用戶那么就直接不展示該優惠券。
就近原則
從上面的闡述中，我們可以發現“所見即所得”原則最根本的目的是為了節省用戶的操作時間，提升產品易用性。廣義的操作時間還應該包括了用戶對于反饋的感知時間，因為只有充分理解系統反饋的信息才能進行進一步的操作。如何幫助用戶快速的消化反饋的信息呢？因為反饋是系統對于用戶操作的回應，那么我們可以讓操作和反饋盡量的貼近一點，這就是就近原則。就近原則可以分為兩類：位置就近和形式就近。
1） 位置就近
所見即所得，這里的“所見”即代表著用戶的視線，而用戶的視線總是停留在上一個交互觸點附近。
例如，還是寄件的場景，要填寫發件人信息，我懶得重新填寫一遍地址，正好看到輸入框右邊有一個附近地址的功能。我點了一下，沒有反應，又點了幾下才發現底部出現了一個“附近地址”的列表。這里的交互觸點是“附近地址”的文字鏈接，我的視線也是停留在附近，沒有注意到下拉列表已經出現在底部。操作和反饋完全不在同一視覺區域。
2）形式就近
形式就近，這里的形式特指反饋形式。目前最通用的反饋方式是彈框，彈框的弊端也就恰恰在于它的“通用”上。所有類型的反饋都可以用彈框來承載，用戶無法立刻感知到彈框所傳遞內容是什么。既然反饋是系統對于用戶操作的回應，而用戶操作又是一個個交互觸點所觸發的。如果我們可以通過改變觸點自身形態的變化來完成信息的傳遞，用戶感知起來會更加容易。
舉個例子，用戶在輸入登錄密碼的時候，其觸點是輸入框。當用戶密碼輸入錯誤的時候，我們可以通過抖動輸入框的方式告知用戶輸入錯誤，這里抖動是現實生活中“搖頭”的映射，我們都知道搖頭代表著否定的意思，用戶不用看到彈框上的“密碼錯誤”幾個字也能明白密碼輸錯了。
總結
以上就是我對交互設計中“所見即所得”原則的總結和分析，如果你有不同的意見和看法，歡迎留言或者加群討論
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
