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