以下討論的是和用戶體驗 交互 相關的分享幾個非常好的用戶體驗交互設計案例教程文章，內容是本站精心挑選整理的教程，希望對廣大的網友給到幫助,下面是詳細內容：
在開始分享案例前，我想先來談談好的UX設計是什么？
Usability易用性：產品設計符合符合用戶的習慣與需求，用最少的努力發揮最大的能量。
Beautiful美觀：產品功能達到目的后，視覺上有好的比例、構圖、重要信息放在適當的位置，都能讓用戶體驗更好
Pleasurable愉悅：讓用戶體驗提升到另一個層次，加上一些小心思，不論是文案、插圖、細微動畫，讓用戶驚喜、感到開心。
好的用戶體驗金字塔Good User Experience Design
在這里，稍微提一下產品開發流程，一個好的用戶體驗設計，不只是用戶研究和設計，到執行層面，產品經理必須了解、定義問題、引導團隊到正確的方向，設計師與工程團隊緊密合作，才能將呈現用戶完整的體驗。
記住，設計師跟工程師是好朋友，要手牽手才能優質的產品。
另外，也盡量不要有”一次到位”的想法，許多好的設計是經過不斷迭代更新、學習用戶行為的。盡管做了用戶研究，但到產品真正推出市場時，常常會有意想不到的回饋、狀態，必須去做相對應的調整。
產品開發流程Product Development Process
在設計時，我們常常一開始都以最完美的情境下進行設計(Happy Path)，忽略了不同用戶情境，造成用戶的困惑或挫折感，與開發部門來回的溝通成本。因此，在開始著手設計時，若能考慮不同情境，更能全面地確保用戶體驗的一致性。
因此這篇的文章，要向大家介紹七個基本的使用狀態：
1.注冊Sign up
2.引導Onboarding
3.空白Empty State
4.創建Creation Flow
5.載入Loading
6.成功/確認/分享Success / Confirmation / Share
7.錯誤Error
除了常見、花最多時間設計的“創建”，別忘了還有用戶一開始登入時的空白狀態、載入及正、反回饋。
七大基本用戶情境Seven Basic User Scenarios
＊分享的案例符合：
1.已上線的產品：上市的產品，并非Dribble, Behance上的概念設計
2.個人使用過的產品：本人有實際操作過，并非廣告或是設計案例
3.焦點在個別/獨立功能：這次著重于單獨的階段，并非整體產品
4. UX不只是美觀，還有流程和技術：千萬不要覺得界面好看就好，還有其中細微的流程，和背后的技術。設計師跟工程師是好朋友，缺一不可
5.主觀意見：我認為好的UX，并不代表你也喜歡。就像我喜歡臭豆腐，但不是每個人都愛。
產品：Zeplin
不論任何產品，注冊幾乎是必備流程。在個人注冊過這么多產品后，Zeplin算是數一數二流暢又讓人愉悅的。
仔細觀察簡單的注冊畫面，它包含：
-即時反饋：不論是成功或是輸入錯誤，Zeplin利用顏色及圖示告知用戶目前的狀態
-鼓勵語氣：當輸入完畢時，「不錯喲Looks good！」、「贊！」，右方的確認信息十分正面，肯定用戶的輸入動作，讓用戶感覺良好。
-提供有用的信息：當在輸入電子郵件、名稱及密碼時，同時提供用戶相關信息
Zeplin注冊畫面十分流暢及令人愉悅
大家對Boarding Pass登機證、Boarding Time登機時間這兩個名詞應該不陌生，On board在英文一般指的是搭乘交通工具，如船或是火車；或者第一天上班，老外會跟你說”Welcome on board”來歡迎新進員工。在產品設計中，On board是指用戶首次”登入”產品。
當用戶第一次見到你的產品時，說明內部功能及導覽，讓用戶了解內部的功能及目的十分重要。想像第一次去餐廳、圖書館、甚至是認識新朋友，如何讓自我介紹有趣又易懂，是維系用戶關系的關鍵時刻。
產品：Dropbox
相信大家在下載新的App，第一次打開總是有很多美麗的插畫，或是動畫等，但我個人總是習慣順手一滑，整個完全忽略產品介紹，連看都不看。
Dropbox的onboarding用戶引導流程真的做得很好。第一次登入后，馬上出現可愛的插畫親切地歡迎用戶的到來。再來，利用放大鏡的焦點，將用戶的目光聚集在關鍵功能，并用大幅的畫面下欄說明檔案存取及共用文件，讓人不忽略也難，十分簡潔、易懂、美麗的設計。
Dropbox的用戶引導流程，親切又易懂
除了使用放大鏡的方法一個一個步驟指示功能，同時可以參考：
-Craft：步驟+截圖+視窗+簡短文字說明
-Instagram Stories：簡潔圖示+文字
-iOS Siri：舉例說明產品目的
其他Onboarding設計(Craft, Instagram Stories, and iOS Siri)
在2015 Andrew Chen搜集125 million的手機數據，研究指出在用戶下載App的前三天，每日活躍用戶(DAUs, Daily Active Users)會據減77%；在90天內，只會剩下5%的每日活躍用戶。
「在下載過后的三至七天，用戶會嘗試大量的app，去決定那些app是不必要的。對于“像樣” (decent)的apps，大部分的用戶會持續使用一個禮拜后，仍繼續保留。成功的關鍵在剛開始的三至七天，就讓用戶迷上(hooked)你的產品。」
— Ankit Jain , Founding Partner at Gradient Ventures
因此，若能在用戶剛開始接觸你的產品，善用空白狀態立即表現出產品價值，能夠觸發用戶的使用動機。
一般而言，空白狀態的情形主要有三種：
-1-首次登入：尚未有任何信息、行為
-2-清空/刪除/完成工作：刪除郵件、檔案等，或是完成待辦事項
-3-沒有任何搜尋、配對結果
一個好的空白狀態設計包含：
-1-具有教具性：教導用戶如何使用產品(What, Where, and When)
-2-讓用戶愉悅：也許教導用戶太過嚴肅，可以試著用可愛、幽默、有趣的口吻、視覺提升用戶的興趣
-3-誘導行動：說明產品功能后，最后仍須讓用戶與你的產品互動，不論是上傳、瀏覽、創建檔案，記得加上一個有意義的CTA進行動作
Asana & IconJar 善用空白狀態，說明產品功能并誘導用戶行為
在Asana的例子中(圖左)，利用大型圖示、漸層色彩吸引用戶目光，并說明產品的價值(團隊有效溝通)。IconJar一目了然的CTA，用戶了解下一個動作是什么，具有促發行動性，也是挺好的案例。
創建流程是產品價值的核心，用戶如何運用你的產品達到目的，一般而言是投入最多時間、繁復的項目，一個產品內大多有數個創建/新增流程。如： Instagram和Facebook po文的過程、Amazon線上購物、Venmo匯款轉帳、Airbnb訂房等功能。
至于如何設計開發一個清晰無負擔的創建流程？必須透過了解問題、用戶研究、原型設計、搜集回饋數據，才能驗證一個好的設計，在此文我們不多加說明。不過，可以提到一個交互設計領域基本、不成文的原則—
三點擊原則Three Click Rule
如果用戶在三次點擊之后，仍無法找到有用訊息和完成產品功能，用戶就會離開你的產品。
用戶是沒有耐心的，假如他們沒辦法在有限時間內與你的產品有共鳴，不論是達到他的目的、或是提升興趣，用戶會受挫，而離開頁面。
也許你會問，如果功能很復雜，也要步驟也要減少到三次點擊嗎？其實未必，Joshua Porter , Director of UX at Hubspot的研究指出，用戶在三次點擊后，如果找不到該功能，還是會繼續點擊，甚至多達25次。重點不在于減少越多越好，而是讓每次點擊都是有意義，提供導覽列、將訊息有效的組合在一起、建立清晰的資訊架構，讓用戶可以有效率的完成目的。
產品：Invision
在Invision的新增項目流程中，運用飽和度濃厚的粉紅色作為CTA，并放置在頁面上端引人注目，當用戶按下新增后，有簡單的兩個步驟：選擇類型及裝置，Invision利用簡單的插畫，讓創建流程更有溫度，同時預防錯誤。
Invision Project Creation Flow利用插畫跟三點擊原則，增添新增項目流程的趣味
2005年，Jakob Nielsen提出的十項用戶體驗設計優化原則，其中之一即是系統狀態呈現/顯示(Visibility of system status)。
舉例來說，假如今天要去排永康街的鼎泰豐小籠包，店員會跟你說，你是“第幾號”、”前面有多少人”、”大概要等多久”，至少讓你有排隊的心理準備，或者利用叫號機提醒客戶。在產品設計時，也是相同的道理，目的是為了減少不確定性和降低用戶的感知時間。
為了減少用戶的焦慮，產品應提供回饋，讓用戶了解即將會發生的情形、預期多久會發生。
一個好的進度顯示，通常會告知用戶：
-現在狀態：正在載入畫面、資料、數據等
-未來狀態：即將呈現的結果
最常見的手法包含：
-進度條：告知目前狀態，到下一個狀態前大概要多久
-載入動畫：一個簡單沒有負擔的動畫，可以轉移用戶的注意力，不覺得等待時間有這么長
產品：Slack
不但告知狀態、轉移注意力，同時為了不要讓畫面過于空白，加上了內容占位符，讓轉換畫面/狀態的過程十分流暢。
當然，最重要的還是頁面載入的速度，用戶是非常沒有耐心的。
Slack & Gmail Loading 載入動畫減少用戶的焦慮
“反饋”是指依據用戶的行為，給予有效資訊，讓用戶了解目前狀態，作為判斷下一步的根據。
不論是正面，或是負面的回饋都是有效的，在產品設計中則是執行功能的成功與否。當用戶完成一項任務后，給予適當的正面回應，可以提升用戶的成就感、讓用戶感到安心&開心。
產品：Shazam
Shazam是搜尋音樂的app，可以”聆聽”、辨認音樂、獲取歌詞。當完成時，綠色的大頁面占據整個畫面，告訴用戶搜尋成功，并提供Spoitfy的短捷鍵，讓用戶可以直接加入音樂清單。
最讓我驚艷的是，我通常很懶得開不同的app，會直接截圖存到相簿，或分享。Shazam了解用戶行為，在截圖后，上方的視窗顯示”Tap to share”，真的是非常貼心的設計😍?👍??
Shaz貼心貼心的分享流程ɼ
<其>其他我滿喜歡的成功狀態°ºMailchimp , Meet和pºOverfl。w¡
Mailchi：p£經典經典案例，當用戶成功發送一組郵件后，吉祥物大猩猩會跟你擊掌，或是規劃郵件發送日期£¡Rock o”訊”訊息也讓人會心ÒÐ
Meet：p£美國流行的地方性社交網站，讓來自各地的人找到志同道合的朋友。當完成注冊活動時，成功視窗雖然看似平凡，但其中的視覺層級設計得相當好：打勾→分享→活動概要→加入日歷，畫面清晰¼Ò
Overfl：w£用戶流程展示工具，當注冊完畢后，除了正面的積極的訊息、社交分享捷徑，有趣的是利用½勵因Ó因導誘導用戶分享產品，在新產品推出時，是很棒的用戶體Ñ¡
Mailchimp , Meetup , Overfl的確的確認畫面有清楚的視覺層級和令人愉悅的設計ÔË
<相>相信大家都有過，手機卡頓、屏幕凍結、上傳失敗等負面的經驗，還記得當下多么挫敗、生氣、不解嗎？用戶可能因此離開你的產品、流失客群。為了確保用戶停留，我們可以重新思考錯誤消息設¼¡
<錯>錯誤消息常常被忽略，但確保正面的用戶經驗是非常重要µ¡
<一>一個好的錯誤訊息包º£
<以>以下的例子，都有清楚地說明原因及下一步指示，甚至利用可愛的插畫，平復用戶不開心的狀Ì¡
Headspace, Muzli, Sla的錯/
關于分享幾個非常好的用戶體驗交互設計案例的內容寫到這里就結束啦，您可以收藏本頁網址http://www.49028c.com/web/a/2018092398576.shtml方便下次再訪問哦。
新聞熱點
疑難解答
