2015-11-19 用心設計
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源：莫貝網
如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里
1.啟動頁加載
產品的第一印象很重要，如果用戶剛開始打開一張“空白頁面”，用戶還未與產品交互之前，就已經留下一個差印象，就像談對象，你給對方的第一印象就是 邋遢，后面盡管每天都打啫喱，對方也會覺得這是幾星期沒洗頭的節奏。因此啟動頁的出現就是為了給她（用戶）營造一個好的第一印象，其次產品啟動需要一個過 程，而“啟動頁加載”可以實現這一過程的一個過渡，在給予用戶一個響應的同時預加載部分首頁內容，使得用戶不至于看到空白的頁面，體驗上更趨流暢。
1.1 保持過渡的流暢性：一致性與內容感
通過啟動頁的吸引，將用戶帶入產品的品牌與情感的世界。基于IOS平臺應用的啟動特質（放大），Twitter的啟動頁與Icon采用了一致的 元素與構圖（信鴿為物，湖藍背景為底），確保Icon至啟動頁的平滑過渡、加深了用戶對Twitter的品牌印象，同時呈現“信鴿翱翔藍天”的意向使得產 品的固有等待（產品啟動需要一個過程）不易為用戶所察覺(啟動頁呈現的意向還沒遐想完，產品已經順利過渡到首頁了)。接著“信鴿”以同樣的效果完成主頁內 容的過渡。
這里我們再舉一反例：WPS的啟動頁大面積留白使其在過渡過程中由于缺乏內容感使得產品的固有等待很易呈現顯性狀態，造成體驗上的卡頓，試想你在看電影，看一分鐘加載30秒，你還有心思再看下去？
1.2 除了流暢我們還能做點什么
前面提到的“一致性”和“內容感”只保證了中間鏈的流暢，要完成Icon至首頁的流暢體驗，還需充分利用啟動頁為首頁加載贏得的時間，圖中美團在應用啟動過程中預加載首頁的一些重要框架，從而為首頁加載減負。
2.下一頁還是當前頁加載
用戶進入首頁，正式邁出體驗的第一步，接下來迎接的就是基于用戶目標的界面間跳轉。完成界面的跳轉，會有各種加載策略，但無論形式如何，我們都可以將其歸為兩大類：“下一頁加載”、“當前頁加載”。
2.1 “下一頁加載”滿足了用戶提前窺視的需求
我們把頁面看成“點”，頁面流是連接這些點的“線”，我們以“用戶想買一條牛仔褲”這一場景作為案例做了簡單的眼動研究，從應用啟動到商品瀏覽再到 商品確定最后進入下單頁，用戶所呈現的瞳孔梯次增大，即E>D>C>B>A，為了解釋這一現象，通過與被試交流，我們發現相比于 各種瀏覽，用戶更期待看到他們想看到的東西。因此此時的”下一頁加載“正好，滿足了用戶提前窺視的需求。
2.2 Wait！I Need Think Think
我們以同樣的方式又對“使用支付寶對手機充 值”這一場景做了研究，從開始支付到二次確認支付，用戶所呈現的瞳孔都比較大，即A與B近似相等，通過訪談，我們發現與“遞增體驗流”不同的是，當用戶遇 到判斷邏輯的界面時，用戶并非急于想看下一頁面到底包含怎樣的內容，而是非0即1的驗證心態，即我的操作效成功了嗎？因此在判斷邏輯界面中，用戶的內容窺 視需求并不強，當然也沒什么內容，要么僅是一個小小的Toast，再大一點就是一個簡單的信息反饋界面（意味著“下一頁加載”在這里就是個雞肋），用戶反 而對非0即1的驗證需求較為強烈，其中還伴隨著等待結果過程中的緊張感、激動感，因此界面通過當前頁加載表明系統正在努力地處理用戶交代的指令迎合了用戶 的緊張感、激動感，直到結果顯現——“處理成功”，完成了非0即1驗證的滿足感。
3.我（設計師）比你（用戶）更了解你
在看視頻過程中我們經常遇到這樣一種情景，“網速較慢，建議切換至流暢模式”。作為用戶，我們總希望享受的是最好的，視頻恨不得720P（PS：可 能自己電腦顯卡就只有那么點），此時網速可能也只有幾十KB，但是Whatever，我就是要用最好的，然最后的結果是不能用，所以我們的用戶其實并不了 解自己。
我們已經習慣了4G下的移動端體驗，有一天我們身處外地，想在附近找一家好吃的餐廳，但是手機切換到了E，我相信無論是4G還是E，用戶的期望未曾 改變——“bia 一下，附近所有好吃的餐廳全都滾粗來！”但是現實是，E狀態下要想像實現4G狀態下的“bia一下”要耗費大把的等待時長，然最后的無盡的等待換來的還是 空白。所以我們要跳出用戶的視角，依據當下場景給出最合理的加載策略，從4G到E，為了避免用戶過長的等待，我們可以采用分布加載策略，如圖中“E狀態” 先加載占用網絡資源少的內容，例如框架、文字、默認圖案，再通過手動觸發，加載占用網絡資源多的內容，這樣可以讓用戶更快速地看到界面框架內容。雖然體驗 上較4G模式會大打折扣，但我們至少維系了E狀態下的可用性。
4.看不到的情懷
有情懷產品的爆點往往介于顯性與隱形之間，平凡外表背后往往給人帶來驚喜和感動！手機休眠鍵由Iphone5s的左側布局到Iphone6的右側布局就是為了方便用戶的單手操作。 真正的情懷級產品，就是你第一眼看到它時，也許不會立刻發現有什么與眾不同，但當你開始使用它時，才會慢慢感受到它對用戶的體貼細膩之處。
4.1 導航欄加載帶來的驚喜
通過加載策略將產品塑造成為一個可以與用戶交流的人，這個人聰明伶俐，而非反應遲鈍，勞心勞力說了一堆，結果對方沒有一點反應，此時你的心情也好不 到哪里去。將導航欄標題臨時變為加載信息，在用戶與產品互動過程中提供實時反饋，此時的產品不再是一堆冷冰冰的界面，而是一位善于溝通的人，這個人聰明機 靈，想用戶之所想，急用戶之所急，和他互動過的用戶都會產生良好的體驗。
4.2 等待也是如此有趣
界面的每一個加載都會涉及到等待，有時受到網絡的限制，可能需要等待更久，但是用戶等不起，普通用戶能夠忍受的最長的加載頁面時間一般為8秒，如果 加載時間超過8秒，除非用戶必須在這個頁面獲得一些信息，一般用戶會關閉頁面或轉到其他頁面。面對著千篇一律直接采用系統提供的旋轉式loading，等 待會顯得更加焦躁。網絡狀態等外部環境我們無法保證，但是作為設計師我們可以通過自己的專業將“情感化”融入加載設計中，改變那些用戶習以為常的loading式樣，讓用戶在等待的等待過程中感受到樂趣，同時還能強化產品的品牌印象。
5. 寫在最后
加載無處不在，它貫穿用戶的行為路徑，所以對于加載策略的思量是設計師尤其要關注的，不同的場景會需要不同的加載策略，我們所要做的就是抓取用戶當下的場景，給出最合理的加載策略，保持用戶感受的連續性，讓加載變得更有價值，讓枯燥的等待變得更加有趣！