ui設計怎麼做（ui設計注意事項）
手機在我們的日常生活中已經是不可或缺的，每天你都耗費了很多時間在上面，那這些時間你玩手機有啥收穫呢？應該沒有多少人會在意這個話題，但是作為 UI 設計師來說，也許玩手機還有另一個用途。同樣都是運用著各種應用軟體，你有沒有多留意一點這個互動或者設計解決方案是否合理，遇到優秀的設計有沒有記錄的習慣，也許很多設計師沒有，但是衍果設計的夥伴一直堅持著這樣的習慣。
下面就讓我一起來看看，都記錄了些什麼好的設計細節呢！
1、脫水
友好的註冊流程
小編提示脫水是一個以《三體》為背景文化的內容社羣。註冊流程崛棄了傳統的使用者視角單向選擇，採用實時性和代入感更強的對話方式。整個註冊過程更有溫度，對話的實時反饋也彷彿有一種日常聊天的感覺。當產品能滿足本能和行為層面，反思層會很大程度的加強品牌感和使用者記憶。
2、愛奇藝
製造使用者驚喜
國慶假期期間，愛奇藝全屏模式下點選螢幕會有放煙花的小動效出現（男孩帽子上），給使用者製造小驚喜同時提升使用者好感。雖然這樣的小心思並不新鮮，不過就跟男女朋友間相互制造小浪漫一樣能累積彼此好感度，使用者和產品的關係也應如此。
3、快看漫畫
3.1、 提供更豐富的體驗
鹹魚白菜，各有所愛。推薦在各大產品都特別常見，很多推薦都只帶有“檢視更多”或者“換一批”其中一個選項。快看漫畫把兩者都呈現出來，更大程度的滿足不同使用者的不同體驗需求。像我比較懶就喜歡在原地換一換，連跳轉都覺得麻煩~，更適合沒有明確目標的使用者需求；相反有特定尋找需求的使用者則傾向檢視更多，通過滑動更高效尋找資訊。既然一個方法不能滿足所有使用者，就多呈現不同的方法。
3.2、 實時互動 & 反饋
篩選模式有很多，比較傳統的可能點選篩選跳轉到模態彈窗，把需要的選項選擇一遍再點選確定，系統對內容進行篩除呈現結果。不過這樣的流程使用者更像對一個黑箱進行操作，過程中充滿不確定性。反觀下圖展開的各種篩選項，每實際選擇一項，下方內容都會實時做出反饋改變。除了帶來確定性滿足，還能讓使用者提前預知每個互動的結果，不至於一頓操作 結果為空又要返回黑箱排查哪裡除了問題，非常值得學習。
4、自如
融入品牌感
自如維修服務的售後評價，除了將小熊的品牌融入到滿意度評分，還設計了不同滿意度下的表情延展，每個分數都對應不同的表情。賦予了溫度感，表情的資訊傳達也較數字直觀，十分好玩。
5、最右
生活經驗對映
使用者介面設計講求心智模型匹配，一個好的心智模型可以減少使用者的學習和操作成本。最右在評價列表旁邊有排序切換，可以切換最熱（點贊最多）和最新發布的評論。雖然圖示帶有文字解釋，不過圖示自身的顏色使用，通過經驗連結起紅色和熱度的關係，使我們更直觀快速理解資訊。
6、蝸牛讀書
6.1、層級關係
隨著應用越來越強調輕量級，更多的模態和非模態彈窗運用到介面設計上，以減少頁面跳轉帶來的介面層級過深。如果仔細留意，會發現這些看似尋常的設計裡也藏著魔鬼的細節。右邊的非模態彈窗並非直接在原頁面蓋一層半透明蒙版，而是將原來的介面等比縮小了，可以看到四周的黑色邊框。搭配動效服用效果更佳，會更直觀的表達了層級關係，當然不僅蝸牛讀書使用到，可以留意一下身邊的APP體驗一哈噢~
6.2、社交貨幣
貫徹蝸牛讀書的一個重要設定，就是閱讀時長，每天一小時額度，可以通過別人的點贊獲得時長，也能直接付費購買。這裡把普遍的點贊功能和具有實際價值的閱讀時長掛鉤，優點是激勵使用者進行高質量分享獲得更多的點贊，從而轉換成時長；缺點是點贊成本提高導致使用者不會輕易點贊。通過設計控制了點讚的熱度，或許這種追求高質量的資訊曝光更迎合讀書產品的人群青睞吧。時長也可以是一種社交貨幣~
6.3、節省注意力
在產品爭搶著所有人的注意力時，大家越發覺得時間的碎片化和注意力缺失，社會更多的向更加短平快的節奏前進。由此而生的問題是怎麼幫使用者管理注意力，面對追求“效率”“乾貨”的使用者，“只看書”功能個給出了答案。如果讀者不想閱讀完完整的推文內容，或者閱讀希望回頭快速整理出書籍推薦，那隻看書會輕鬆幫使用者節省頻寬，並引導使用者立刻進行閱讀。
6.4、點選區域
一個好看的介面，要想好用，還需要設定合理的點選區域（熱區），才能讓體驗絲滑順暢。如圖是大概測量的熱區，上方綠色部分是往上返回已讀內容，因為新內容位於下方，上方自然表示回顧已讀內容。中間區域喚起右圖的操作和設定，重點是左右紅色區域，用來往下瀏覽新內容。為何要豎向劃分成三個區域呢，很可能是為了保證不同用手習慣的使用者體驗一致性。左右手單手持有手機的使用者，都能輕易的點選紅色和白色區域進行操作（右手點選左邊紅色區域，左手點選右邊），最大程度保證了易操作性。其實除了上下翻頁，還能設定左右翻頁，熱區也隨之改變，有興趣可以體驗一下。
6.5、保護策略
產品使用過程中，難免會出現各種意想不到的情況。閱讀類產品比較常見的就是突然臨時有事忘記操作手機，（一般不會刻意鎖屏再去做別的事情）本來這種情況是不會出現問題的，可到了蝸牛讀書這裡，閱讀時長是稀缺的，為了防止疏忽導致使用者白白浪費閱讀時間，產品不進行操作一段時間，閱讀計時將自動停止。使用者回來看到如此貼心的設定，再配上一段得體的文案，自然對產品好感度 1。其實類似的操作，就跟手機和電腦的息屏一樣，減少了電量的耗費。不過要考慮到這樣的情況，除了經驗的積累，更多的在日常中使用產品才能打磨出周到的使用者體驗。
7、谷歌瀏覽器
場景化思維
瀏覽器可能都很熟悉，不過背後的操作邏輯你是否留意過呢？一個很常見的使用場景就是我們開啟了一堆的網頁，需要連續關閉好幾個。一般來說，每個網頁的標籤頁有最大寬度，如果標籤頁過多，所有標籤會等距離縮短，而當點選標籤右邊關閉該標籤時，只要滑鼠不移動，右邊的標籤會自動左移到滑鼠位置（如1所示）。如此一來就能不移動滑鼠刪除後面所有標籤頁，直到滑鼠移出標籤頁區域，標籤頁才恢復“彈性”改變寬度。只有代入到場景，才能理解並創造出解決使用者問題的設計。
8、掌閱
8.1、生活對映
讓使用者快速學習使用一款產品，最便捷的方式是找到一個他們熟悉的模型代入。像開啟電子書模擬了真實書籍翻頁的動效，除了減低學習成本，還能減少部分使用者對電子書沒有溫度的刻板印象，將體驗自然地與閱讀實體書聯絡起來。
8.2、自定義頻道
自定義頻道很多人都不陌生，不過這裡想分享的是關於拖動這一操作的感想。手機上拖動的操作其實並不常見，所以使用者對拖動的有一定學習成本。這裡解決方式是通過結合點選和拖動兩種互動手勢，可以達到一樣的操作效果。使用者點選上方標籤即可將標籤移動下面表示停止使用，重新點選下方標籤則啟用回到上方。當然也能上下拖動（箭頭所指是正在拖動的狀態）。這裡拖動主要作用並非啟用和停用，而是對品牌進行排序，根據使用者習慣選擇最適合自己的方式展示，將主動權交給使用者。
8.3、使用者認知
向他人闡述一個陌生的實物或者概念，可以用熟悉的實物解釋新事物，從而快速同步大家的認知。比如向沒看過《指環王》的憨憨推薦這部電影，就可以說是國外的《西遊記》。對方即使沒看過，也能迅速知道電影大概故事情節。這裡對比一下網文購買流程中的「選章節」這一功能的UI設計。改版前的自定義章節按鈕與固定集數樣式十分類似，使用者初次使用並不能很好的意識到區別。反觀改版後（右圖），除了在外觀上與固定集數樣式按鈕作出區分，還選用了使用者熟悉的常用電商平臺的數量選擇器，讓選章節這一功能得以快速被識別，符合使用者認知。
9、Photoshop
減少流程
其實除了設計師經常需要在PS，AI，sketch間來回跳轉，使用者有時候使用一個功能也可能需要關聯其他產品。假設預定酒店產品在使用者準備導航去酒店的路線時，不支援跳轉，需要手動開啟地圖軟體重新輸入酒店名那叫一個崩潰。所以現在趨勢都在減少產品或者場景互相跳轉的阻力。在使用PS時來回兩臺電腦傳原始檔已是家常便飯，當檢測到電腦不具有原始檔所含字型時，系統會詢問是否需要立刻下載缺失的字型，極大減少了使用者自行下載的時間。
10、Moo
創新的互動手勢
如果想發掘一些有創意的互動甚至視覺設計，體驗音樂型產品可能是不錯的選擇。MOO音樂播放介面資訊十分簡潔，基本可以分為上下兩塊，上方可以左右滑動切換播放介面和首頁，點選歌詞展開全部歌詞；下方是播放控制區域，可以理解成是一個看似空白的播放器控制元件。在熱區裡（圖中紅色區域）左右滑動即可快進，回放（變成圖1右側樣式），需要播放和暫停則點選整螢幕中空白位置即可，上下滑動切換歌曲。相較於傳統的播放器控制元件，這樣的優勢在於播放、暫停的點選區域從常見的圓形按鈕變為偽全屏，快進、回放也從進度條上的小圓點變成下方一整片區域。使用者從精確的控制手指位置變成只需大概甚至全屏操作，無論從效率提高還是心理壓力減少都是很大的優化。
不過這一定程度影響了產品其他功能的設計，需要根據產品和業務目標使用。
11、嗶哩嗶哩
預判使用者行為
同一個產品或功能，使用者需求很可能會隨著使用場景改變發生改變。在嗶哩嗶哩中，當使用者通過歷史或者其他入口，開啟了一個曾經看過的視訊，系統判斷視訊時間接近尾聲，會預判使用者此時可能希望的動作是二刷視訊，所以提示「返回開頭」功能就變成了理所當然了，免去了使用者拖動進度條的操作。
12、IOS
費茨定律
在我們的日常認知中操作一般成組出現，像你家的洗衣機不會這個角一個按鈕那個角一個按鈕。因為可互動的操作之間距離越遠，使用者完成操作的時間將越長，操作阻力越大。右圖資訊編輯頁面的三個按鈕“已讀”“刪除”“完成”分別設定在介面的三個角落。原因可能是使用者在編輯資訊時往往注意力不集中，操作更加隨意，為了將三者的功能明確區分開，互相撇清關係，才要離遠遠的，同時按鈕之間來回切換注意力也能讓給予使用者思考的時間。使操作遠離目的在於減少誤操作（本來想已讀錯點了刪除），而是否讓不相關的操作遠離，更多取決於使用者使用場景中注意力是否集中。這種情況更多出現在C端，B端產品因為使用者角色比C端更專注，考慮到效率和讓操作者對可進行的全部操作有全域性的認識，B端操作成組出現。
13、菜鳥裹裹
提高產品趣味
菜鳥裹裹寄了一個快遞，付款的時候發現唉，可以猜訂單什麼時候送達耶！按捺不住好奇我一頓操作把那個頁面點沒了，來不及截圖，只能看看猜完的頁面自行腦補了~不過我想說用這種趣味性的設計來增加和使用者的互動，不僅增加了產品記憶，也提高了使用者愉悅度。
另外，突然想到花小豬打車使用者等待時長過長時，會根據等待時長給使用者補償金額，這種操作簡直吊打從設計上減少使用者等待焦慮的方式。所以我想說，當在設計層面無法解決問題的時候，可以試著跳出思維框架，在更大的範圍內尋求答案，當然這需要其他資源的配合咯。
14、Flow
降低學習成本
如何解釋一個抽象的系統，可以通過客觀世界的經驗對映。Flow是一款無限畫布的手繪筆記產品，可以隨時通過觸屏記錄下自己的各種想法。對於任何工具型產品，上手難度一直存在且是個不小的問題。因為使用者往往沒有用過類似的產品，不像電商，社交有一定的使用經驗。那麼怎麼在新使用者失去耐心前教會他們使用呢？這裡通過將功能具象化成日常熟悉的事物，比如換筆頭，就是直觀的把筆頭平移更換，換顏色也會直接作用在筆身上，這讓我們跟客觀世界的使用經驗聯絡起來，幾乎沒有學習成本，而且熟悉的事物減少了使用者焦慮感。只是這種介面開發成本較高，要考慮功能對產品的優先順序。
15、Jour
15.1、增加控制感
控制 控制 控制！在社會普遍焦慮的環境下，使用者的內心需要被很好的照顧，增加使用者的控制感成為了提高體驗的可行之徑。在Jour裡，使用者輸入的身材資訊隨後是允許修改的，可使用者不知情可能會因害怕輸入不準確而因此不輸入，這時提示資訊很好的打消了使用者顧慮。
右圖輸入內容後，會立刻反饋資訊的可行性，從而給使用者確定性的滿足，提高後續輸入的積極性。
15.2、動效加持
說到動效，很多人第一反應是追波 畢漢思 那種炫酷誇張，恨不得讓你看個100遍的展示性Demo。不過個人覺得用在產品上，duck不必，值得追求的動效應該是如絲般融入產品的體驗過程中，不應引起使用者的注意（好的設計一般不會引起使用者注意，因為在他們看來這就是理所當然這樣）。很多簡單的效果，如圖中的點選縮放再回彈表示按壓感，就可以讓互動過程更“真實”絲滑，它們可能不出眾，但是眾多的細節堆砌起來，體驗肯定能加分不少呢。