用戶體驗設(shè)計流程

由于系統(tǒng)軟件糟糕的UI設(shè)計（菜單排布問題）所導致的誤操作，美國居民受到導彈襲擊的驚嚇

· 美國Forester的一項研究發(fā)現(xiàn)，針對UX投入的每1美元，能夠帶來2~100美元的收益。

· Amazon把按鈕文字從“注冊（register）”改成“繼續(xù)（continue）”之后，銷售增長了3億元。

· McAfee重新設(shè)計UI之后，客服電話減少了90%?！?Airbnb的Mike Gebbia認為，公司從接近失敗到獲得100億美元市值，最大因素要歸功于UX

UX究竟在設(shè)計些什么 

廣義的用戶體驗設(shè)計，是包含了內(nèi)容功能設(shè)計，信息架構(gòu)設(shè)計，用戶界面設(shè)計，交互設(shè)計，視覺設(shè)計，語言設(shè)計，動效設(shè)計，音效設(shè)計，在一定程度上涵蓋了產(chǎn)品物理外觀設(shè)計（工業(yè)設(shè)計），平面/包裝設(shè)計，空間設(shè)計，服務(wù)流程設(shè)計等。它意味著一個高度交叉綜合的領(lǐng)域，涉及到人與產(chǎn)品系統(tǒng)或服務(wù)發(fā)生關(guān)系并產(chǎn)生體驗的所有觸點。一般或狹義的UX Design，則主要作為與UI Design區(qū)分，多用于互聯(lián)網(wǎng)軟件（或消費電子等）行業(yè)基于屏幕的設(shè)計，包含信息框架設(shè)計，用戶交互設(shè)計，可用性研究等。這里的UI Design偏重于視覺上的設(shè)計。而在現(xiàn)實中我們也經(jīng)常把UX等同于“交互”。

用戶體驗設(shè)計的核心和本質(zhì)，就是研究目標用戶在特定場景下的思維方式和行為模式，通過設(shè)計提供產(chǎn)品或服務(wù)的完整流程，去影響用戶的主觀體驗?？梢娪脩粞芯吭谡麄€UX流程當中的重要性。而認知心理學（Cognitive Psychology）則是用戶體驗設(shè)計的理論基礎(chǔ)和科學依據(jù)。它是一門研究認知及行為背后之心智處理（包括思維、 決定、推理和一些動機和情感的程度）的心理科學。這門科學包括了廣泛的研究領(lǐng)域，旨在研究記憶、注意、感知、知識表征、推理、創(chuàng)造力，及問題解決的運作。相關(guān)的還有人體工學（Ergonomics）與人因工程學（Human Factors Engineering），是研究人和機器、環(huán)境的相互作用及其合理結(jié)合，使設(shè)計的機器和環(huán)境系統(tǒng)適合人的生理及心理等特點，達到提高效率、安全、健康和舒適目的的一門科學?？捎眯裕║sability）的概念最早出現(xiàn)于1979年，遠比唐·諾曼在1993年提出的“用戶體驗”概念要早?？捎眯缘腎SO定義是“用戶在特定環(huán)境下完成指定目標的效果、效率和滿意度”(ISO 9241-11)，而用戶體驗指“用戶與產(chǎn)品、服務(wù)、設(shè)備或環(huán)境交互時各方面的體驗和感受”?？捎眯缘姆懂牨扔脩趔w驗窄，它聚焦于任務(wù)完成。而用戶體驗是外觀呈現(xiàn)、功能組合、系統(tǒng)性能和交互行為等因素的綜合結(jié)果。

上圖將用戶體驗細分為工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌體驗(Brand Experience)，最內(nèi)部的圓代表最基礎(chǔ)的用戶體驗。

用戶體驗 / 產(chǎn)品設(shè)計的流程與方法

以用戶為中心的設(shè)計（User-Centered Design，簡稱UCD）概括了用戶體驗設(shè)計的典型流程和方法學。以用戶為中心的設(shè)計思想非常簡單：在設(shè)計開發(fā)產(chǎn)品的每一個步驟中，都要把用戶列入考慮范圍。從前期的用戶研究需求挖掘，到后期的用戶測試設(shè)計驗證，都要圍繞目標用戶群來進行。

在UCD設(shè)計流程的每個階段，都有多種不同的方法來幫助我們達到目的。

用研分析：

· 單獨訪談（Individual Interviews）：一對一的用戶討論，讓你了解某個用戶是如何工作，使你知道用戶的感受，想要什么和他的經(jīng)歷。

· 焦點小組（Focus Groups）：組織一組的用戶進行討論，讓你更了解用戶的理解、想法、態(tài)度和想要什么。

· 關(guān)鍵利益人訪談（Stakeholders Interview）

· 情境訪談（Contextual Inquiry or Field Study）：走進用戶的現(xiàn)實環(huán)境，讓你了解你的用戶的工作方式，生活環(huán)境等等情況。

· 日記研究（Diary Study）：日記研究可以讓用戶記錄自己的進程，研究者以非打擾的視角探查用戶的體驗。

· 問卷調(diào)研（Questionnaire Study）：利用網(wǎng)上或紙張的問題list對用戶進行發(fā)放填寫，從而收集用戶對產(chǎn)品的需求建議。

· 任務(wù)分析（Task Analysis）：通過任務(wù)分析了解用戶使用產(chǎn)品時的目標和操作方式，習慣（GOMS模型）。

· 用例分析（Use Case Analysis）

· 卡片分類（Card Sorting）、樹形圖測試（Tree Testing）：觀察用戶是如何理解內(nèi)容和組織信息，用來幫助你的產(chǎn)品更合理地組織信息。· 競品分析（Competitive Analysis）、標桿分析法（Benchmarking）· 桌面研究（Desktop Research）、市場研究（Market Research）· 用戶角色模型（Personas）：構(gòu)建一個虛構(gòu)的人來代表特定目標用戶群組，設(shè)計團隊圍繞這個虛擬人物設(shè)計開發(fā)產(chǎn)品。

· 用戶體驗旅程圖（User/Customer Journey Mapping or Experience Mapping）：從用戶角度出發(fā)，以敘述故事的方式描述用戶使用產(chǎn)品或接受服務(wù)的體驗情況，以可視化圖形的方式展示，從中發(fā)現(xiàn)用戶在整個使用過程中的痛點和滿意點，最后提煉出產(chǎn)品或服務(wù)中的優(yōu)化點、設(shè)計的機會點。

· 態(tài)度研究（Attitudinal Research）和行為研究（Behavioural Research）

· 定性研究（Qualitative Research）和定量研究（Quantitative Research）

設(shè)計階段：

· 腦力風暴（Brainstorming Ideation）

· 概念草圖（Concept Sketching）

· 思維導圖（Mind Mapping）· 交互流程（User Interaction Flow）

· 信息架構(gòu)（Information Architecture）：對功能內(nèi)容進行高度概括的統(tǒng)籌規(guī)劃、設(shè)計安排。

· 情景與故事版設(shè)計（Scenario & Storyboard Design）：情景是指特定用戶如何使用產(chǎn)品完成特定目標的簡短故事。故事板是連續(xù)的一系列草圖，用視覺的方式表現(xiàn)用戶如何使用產(chǎn)品，形式上類似漫畫分鏡。

· 線框圖（Wireframing）

· 低保真原型與高保真原型（Lo-fi & Hi-fi Prototyping）

· 紙質(zhì)原型（Paper Prototype）

· 視頻原型（Video Prototype）：通過視頻來演示用戶如何與產(chǎn)品系統(tǒng)進行交互。

· 綠野仙蹤原型（Wizard of oz Prototype）：使用角色扮演來模擬用戶如何與產(chǎn)品系統(tǒng)進行交互。

· 可交互原型（Interactive Prototype）

· 視覺設(shè)計（Visual Design）

· 設(shè)計模式（Design Patterns）、設(shè)計語言（Design Language）、設(shè)計規(guī)范（Design Guidelines）與設(shè)計體系（Design System）

· 標注文檔（Design Spec）

· 動效設(shè)計（Animation Design）

· 參與式設(shè)計（Participatory Design）：將終端使用者或利益相關(guān)者帶入設(shè)計流程中。

· 共情/移情/同理心設(shè)計（Empathic Design）：將設(shè)計師帶入使用者情境中進行觀察設(shè)計。

· 平行設(shè)計（Parallel Design）：對同一個產(chǎn)品進行分開的設(shè)計，從而比較選擇一個最佳方案。

評估驗證：

· 啟發(fā)式評估（Heuristic Evaluation）：由一組行內(nèi)專家依據(jù)尼爾森十大原則對產(chǎn)品進行可用性檢查。

· 專家評審（Expert Inspection）

· 可用性測試（Usability Testing）：邀請用戶來試用你的產(chǎn)品，有任務(wù)性的完成測試，從而達到評估的目的。分為Moderated和Unmoderated，In-person或Remote。

· 組內(nèi)測試（Within-Subject Testing）與組間測試（Between-Subject Testing）

· 游擊式調(diào)研（Guerrilla Research）：便宜、快速地得到大致的用戶反饋。

· 問卷調(diào)查（Surveys）：利用網(wǎng)上或紙張的問題list對用戶進行發(fā)放填寫，從而收集用戶對產(chǎn)品的反饋意見。

· CSAT（Customer Satisfaction Score）與NPS（Net Promoter Score）

· 眼動追蹤（Eye Tracking）和熱力圖（Heat Map）

· 點擊流分析（Clickstream Analysis）

· 產(chǎn)品漏斗（Product Funnel）和使用情況分析（Usage Analytics）

· 統(tǒng)計學分析（Statistical Analysis）

· A/B測試：在同一時間維度，分別讓相似的目標人群隨機的訪問產(chǎn)品的不同版本，收集各群組的用戶體驗數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，最后分析、評估出最好版本，正式采用。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

游戲角度談體驗設(shè)計

作者：老笨

鏈接：https://www.zhihu.com/question/23131149/answer/2454205665

來源：知乎

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

抽象\具象、理性\感性 的思維能力的自由切換，是用戶體驗設(shè)計師必備的能力。抽象而理性的思維能力，用于扮演“設(shè)計師”的角色，自上而下的看待產(chǎn)品；具象而感性的思維能力，用于扮演“小白用戶”的角色，自下而上的看待產(chǎn)品?！臼裁唇凶陨隙碌目创a(chǎn)品？】----將游戲\產(chǎn)品的目標、規(guī)則、反饋，透過抽象思維將它進行歸納。制作導圖是其中一種很好的方法，透過制作的過程，我們可以對游戲\產(chǎn)品的元信息進行梳理；理解各項功能之間的定位與模塊劃分，有必要的話將它們進行重新組織；用戶與產(chǎn)品之間，用戶與用戶之間，是怎樣進行互動的。將以上幾個環(huán)節(jié)想清楚、弄明白，這些就是作為設(shè)計師角色需要明晰的業(yè)務(wù)框架，它能在漫長的開發(fā)過程、諸多的決策中，指導我們決策，使我們不至走偏。

在接到某游戲項目需求后，對其元信息進行梳理【那什么叫自下而上的看待產(chǎn)品呢？】----本質(zhì)上是將用戶的需求具象化。

聽起來很簡單，實際上卻非常難：什么叫用戶？我們的目標用戶是哪些人？他們具有怎樣的特點？他們所處的環(huán)境、生活習慣、消費能力、設(shè)備特性、網(wǎng)絡(luò)速度等等因素決定了他們偏好的內(nèi)容，甚至是操作習慣。就算借助用研團隊進行用戶調(diào)研，收集回來的大量需求中，怎么判斷哪些是真實需求，怎么判斷真實需求中各項需求的優(yōu)先級。

最多用戶反饋的需求，為什么有可能不是優(yōu)先級最高的需求呢？因為能夠被大量用戶反饋得出的需求，幾乎必然是眾所周知的、普通的、缺乏獨特性的、難以被傳播的需求，這類型需求即使被實現(xiàn)了，大家也只會覺得理所當然，它完全不會提升你游戲\產(chǎn)品的口碑和傳播度。誰會跟朋友說：“來玩xxxx游戲啊，它有好友系統(tǒng)誒~”？誰都不會！對數(shù)據(jù)的分析能力和決策能力，是產(chǎn)品經(jīng)理\游戲策劃\交互設(shè)計師的核心能力之一。

事實上，作為設(shè)計師，我們大部分的設(shè)計由于制作周期的原因，根本不可能每次都先進行調(diào)研再去設(shè)計，那怎么才能讓我們的感受與用戶盡可能一致呢？其實用一句很簡單的話就能概括----不要讓你的用戶思考。講真產(chǎn)品感這種事，多看書固然很有必要，書本能幫助你更系統(tǒng)化的將你的經(jīng)驗體會歸納成結(jié)構(gòu)化的知識，但比這更重要的是，要堅持體驗大量熱門應(yīng)用\游戲，如果你有明確的在研游戲\產(chǎn)品的品類，那就加上大量同類產(chǎn)品的體驗，分析它們在交互設(shè)計上的異同點，為什么要這樣或那樣設(shè)計，分析下他們的產(chǎn)品團隊是基于什么原因做出那樣的選擇。

拿到需求后不要著急設(shè)計，先看看別人都是怎么做的所謂的人性化，其實不過是很淺顯的東西，只要你用心感受生活，就能有所收獲的，比如說：用戶很懶、沖動、貪心、注意力往往不集中、耐心只有幾秒、不想費腦子......

【舉一個很現(xiàn)實的栗子】----很多策劃喜歡把自己設(shè)計的系統(tǒng)構(gòu)架得非常復雜，他們認為樂趣就是依系統(tǒng)給出的信息進行抉擇，通過一次次的抉擇，逐漸找到游戲的規(guī)律，最終贏得比賽。但如果我們采用與策劃相同的思路來進行設(shè)計，那毫無疑問會把認知門檻拔得太高了，策略點是好東西，但你一口氣把它們?nèi)客平o用戶的話，用戶根本學習不過來，關(guān)注不到，況且就算他們發(fā)現(xiàn)了，也未必愿意費腦子去琢磨，更現(xiàn)實環(huán)境中跟我們的游戲\產(chǎn)品一同爭奪用戶注意力的外部因素實在太多了，用戶難免會被打斷，注意力很難做到高度集中，加上耐心的極其缺乏，會使得他們中的絕大部分根本沒法get到策劃的所謂爽點。一個好的交互設(shè)計師，應(yīng)該評估需求，跟策劃充分討論，清楚闡述你所分析出當下設(shè)計的優(yōu)劣點所在，盡可能將產(chǎn)品往簡潔（不等于簡單）的方向進行設(shè)計。

最好的設(shè)計就是讓用戶感覺不到設(shè)計，能夠自然順暢的使用，不存在障礙與困惑的設(shè)計。至于硬核用戶，我們可以采用其它方式來滿足他們，切記老祖宗留下來給我們的真理----曲高和寡！這種分析需求的能力，為用戶體驗服務(wù)的意識，是需要大量訓練才能形成的思維習慣。在面對每個需求的時候，我們都應(yīng)該這樣，自上而下，自下而上，兩方面去思考辯證，找到能夠滿足雙方需求的重合區(qū)間后再進行設(shè)計。

提煉幾個在做交互設(shè)計\體驗設(shè)計時的要點：

【簡練的架構(gòu)】

我們應(yīng)該持續(xù)不斷的追求「盡量」簡練的架構(gòu)，強調(diào)「盡量」的原因是我們應(yīng)該時刻提醒自己，優(yōu)化方案的目的是為了幫助用戶更方便的在游戲中實現(xiàn)他們的需求，而不是為了讓我們陶醉在自己極致簡練的方案中暗爽的。

----切記，記住我們的根本目的是滿足用戶的需求。

【擴展性預留】

與不過分追求簡練的原則一樣，我們在設(shè)計過程中應(yīng)該對擴展性預留有充分的考慮，也應(yīng)該符合實際業(yè)務(wù)的需求（需要與項目組拉齊他們的計劃）。千萬不要為了在設(shè)計上的自我滿足而忽略實現(xiàn)成本和業(yè)務(wù)目標。尤其在項目初期，方案迭代速度很快的情況下，不宜過分地追求架構(gòu)之美，也不應(yīng)該在未曾沉淀的策劃案上作過多的視覺表達方面的設(shè)計----畢竟當設(shè)計師正沉浸于表現(xiàn)細節(jié)的思考中，一而再的被告知方案又改了，是一件非常惱人的事情。

【符合用戶心智】

比起邏輯合理，「用戶易理解」才是我們在設(shè)計的過程中應(yīng)該首要考慮的點。如果一個設(shè)計不符合用戶的認知，不管它有多合乎邏輯、也不管它有多少優(yōu)點，都很可能都是沒有用的。

----一開始用戶很可能就會因為無法理解而流失了，根本體驗不到后面的那些優(yōu)點。

【細節(jié)即是品質(zhì)】

從最近幾年的市場環(huán)境不難發(fā)現(xiàn)，玩家對游戲品質(zhì)的要求越來越高。用戶對手游產(chǎn)品的敏感度是延伸到體驗末梢的，比如對畫面呈現(xiàn)細節(jié)超級敏感，對數(shù)值曲線的設(shè)置超級敏感，對操作反饋的精確度超級敏感，對交互環(huán)節(jié)中的流暢要求超級敏感......很多時候，細節(jié)甚至會被挑剔的意見領(lǐng)袖經(jīng)由多次傳播后放大到令人難以想象的地步。（eg：近期上線的韓國手游《月光雕刻師》，其實本質(zhì)上只是一個掛機泡菜游戲，但在很多細節(jié)上的處理還是做到非常驚人的。）【階段性review】階段性review是至關(guān)重要的工作習慣，無論你所處的項目是否成功。畢竟，失敗的經(jīng)驗也并不是沒有用的，前提是你需要深入地去思考、分析、歸納、找到問題背后的原因，它能幫助我們避免掉一些不該犯的錯誤，從而遠離最壞的結(jié)果。事實上，游戲研發(fā)充滿未知數(shù)，市場變化非?？?，即使是當紅制作人也幾乎沒有人敢說自己的下一款產(chǎn)品依然能成為爆款，成功的經(jīng)驗價值并沒有它看起來那么大，倒是失敗的教訓可以匯總起來成為教科書。

所謂的游戲設(shè)計方法論，無非就是在做兩件事情：1.避免重大失誤；2.找到有可能成功的方向。review的價值在于歸納：做得好的地方，讓它沉淀下來，幫助我們未來走得更穩(wěn)；做得有遺憾的地方，哪些是本可避免的，哪些教訓是值得吸取的？世界是越來越紛雜的，鬧中取靜不容易，越復雜的世界，簡單就越可貴。交互設(shè)計的價值就在這里。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

以下是碳水Sir在App Store發(fā)現(xiàn)的幾款“寶貝”，之所以稱為“寶貝”是因為產(chǎn)品中可學到的東西太多了，每個產(chǎn)品視覺UI以及動效都有其獨特風格（當然網(wǎng)上也有別人總結(jié)過的產(chǎn)品，我這里就不拿出來重復說了）我僅針對未總結(jié)的大廠產(chǎn)品，進行設(shè)計細節(jié)拆解，看看優(yōu)秀的產(chǎn)品設(shè)計到底好在哪里，請君細細品味。

（淘寶 - 屋顏 - 一站式潮流家居平臺）
（字節(jié) - 抖音盒子 - 潮流時尚電商平臺）
（騰訊 - doX多克斯 - 生活碎片視頻社交）
（淘寶 - 吃貨筆記 - 記錄美食好生活）
（得物旗下 - 95分 - 奢潮二手平臺）
（騰訊 - PODO漫畫 - 獨特交互體驗漫畫閱讀平臺）
（荔枝 - 皮玩 - 語音社交平臺）
（陌陌 - 咔咔 - 實拍互動交友平臺）

排名不分先后，從以上幾款產(chǎn)品logo中不難看出，圖形設(shè)計都偏向于具像化，傳遞出正向的情緒，顏色方面使用熒光黃、青綠、漸變粉等凸顯年輕、大膽，富有朝氣。

1.屋顏

第一眼看到這個名就有被驚艷。首先屋顏是屋檐的斜譯，檐變成顏，中華文字博大精深，讀起來也不違和，同時也直觀呈現(xiàn)出產(chǎn)品定位屬性。logo采用字體設(shè)計手法，“屋”字經(jīng)過設(shè)計手法使線條呈現(xiàn)出立體空間感，也間接體現(xiàn)出產(chǎn)品是和房屋軟裝相關(guān)，同時為屋內(nèi)添置“顏色”（軟裝）相關(guān)的產(chǎn)品。一個logo兩層含義，通過字體設(shè)計以及諧音表現(xiàn)，巧妙的融入其中。

·

直觀來看，頁面大量留白，圖片質(zhì)量高級且風格統(tǒng)一，均采用素底作為產(chǎn)品首圖，很好的提升產(chǎn)品整體調(diào)性。
圖形方面均采用直角元素，配圖、banner、按鈕、icon無一例外；細線風格設(shè)計使產(chǎn)品極具品質(zhì)感，有種無印良品的現(xiàn)代極簡主義風潮。也叫MUJI風。
瓷片區(qū)的配圖采用線性+2.5D風格，使畫面富有空間層次，能撐住頁面頭部重要位置，且再次突出產(chǎn)品極簡主義風格。當然還有空狀態(tài)、無網(wǎng)絡(luò)環(huán)境下的配圖等等都很統(tǒng)一。

動效方面最值得關(guān)注的是下拉刷新，使用吊燈作為下拉效果，當向下滑動時電線被拉扯長，但斷不了，給人以安全可靠的產(chǎn)品透傳，也算是通過創(chuàng)意設(shè)計助力產(chǎn)品體驗的手段之一。釋放刷新時，輪播不同的家居icon圖標，再次強化定位產(chǎn)品屬性，且刷新時不至于乏味。
加載狀態(tài)采用+號線條旋轉(zhuǎn)表現(xiàn)，同時在結(jié)尾變成一個方形，這么極簡的設(shè)計之前其他產(chǎn)品從未出現(xiàn)過，同時它也符合屋顏的產(chǎn)品調(diào)性（新家軟裝要做加法，僅個人理解）也算是一個設(shè)計亮點。

最新穎的是產(chǎn)品特有的【3D實景逛店】功能，進一步強化家具與室內(nèi)的強相關(guān)性，為什么這么說，單從買家具上，線上買前只能靠照片來間接聯(lián)想買后填入家中的情況，并不能按照自己習慣多角度查看家具。又或者因為忙，沒時間去線下家具館，或者怕白去一趟，通過【3D實景逛店】快速解決這部分用戶需求。同時，也給線下家具館增加了更多曝光度的可能性。

至此，屋顏的設(shè)計細節(jié)講解就結(jié)束了，希望產(chǎn)品體驗越做越好。

2.抖音盒子

抖音旗下的電商平臺，整體風格清爽直觀，綠色與紫色搭配也是一種時尚風。相比其他電商產(chǎn)品，抖音盒子沒有金剛區(qū)圖標設(shè)計以及營銷類的占位圖，相反金剛區(qū)僅展示奢侈品實物圖，產(chǎn)品圖大小做了統(tǒng)一，視覺呈現(xiàn)很高級，同時下列瀑布流商品中首圖沒有活動促銷等信息干擾，只展示商品圖，突出其時尚潮牌好物的特性，同時也與當前清爽、高級的設(shè)計風格相一致。

幾處設(shè)計細節(jié)值得參考，首先是底部Tab欄點擊動效，承載抖音logo的故障風效果，黑色+紫色故障效果一來告知與抖音具有相關(guān)聯(lián)性，是旗下電商產(chǎn)品；二來黑色Tab圖標能很好的壓住“紫綠主色調(diào)”的跳躍感，不至于太過俏皮脫離電商屬性。
并且圖標的整體性與統(tǒng)一性都做得很好，“小紅點”的設(shè)計采用品牌色“小紫點”呈現(xiàn)（小小的顏色改變），更加強化了產(chǎn)品風格與調(diào)性的統(tǒng)一，（小紅點并不是只能用紅色）這點值得學習。

最后想告訴大家，產(chǎn)品在每個階段設(shè)計形式都會發(fā)生改變，比如1.0.1-1.0.2可能是輕微調(diào)整，1.0.0-2.0.0就是大的視覺升級。可能因為產(chǎn)品發(fā)展或用戶變化，使得產(chǎn)品設(shè)計風格發(fā)生改變， 但要知道每個上線版本一定是當前方案的最優(yōu)解。就如你看到的“抖音盒子”現(xiàn)在是1.9.0版本號，或許在不久的將來就會全新升級。這就不得而知了。

3.doX多克斯

是一款短視頻社交平臺，與其他社交產(chǎn)品不同，doX主打短視頻內(nèi)容社交，用戶通過拍攝上傳有趣的短視頻內(nèi)容，來認識志同道合的朋友。雖然與抖音同為短視頻平臺，但抖音更側(cè)重視頻分發(fā)，而doX側(cè)重于通過視頻與用戶建立聯(lián)系，一個視頻下可以跟拍多條，有點像qq以前的漂流瓶，只是換種呈現(xiàn)方式。這種陌生人視頻交友有一絲“探探”的味道。

設(shè)計上面單看logo以為會沿用手繪線稿類似的風格。整體使用下來，僅在我的頁面頂部背景中用到，其余均采用斷線像素風icon設(shè)計，綠+白的設(shè)計風格，可能也是為了營造出一種陌生人交友的科幻感覺吧。
發(fā)起拍攝頁，背景會有噪點動效，也是營造一種拍攝前無鏡頭的感覺，引導用戶隨手記錄。

最后產(chǎn)品的切入方向很新穎，但是否能在短視頻風口分出一杯羹就不知道了，但目前來說整體設(shè)計風格框架已搭建起來，剩下的就是不斷填補及完善設(shè)計，使其更加統(tǒng)一，希望doX越來越好。

4.吃貨筆記

第一次接觸“吃貨筆記”就被頁面整體設(shè)計風格吸引。粗線圖標+擬物圖標形式空前新潮，給人眼前一亮的感覺。它類似于“大眾點評”，是個寶藏探店美食分享的平臺。通過線上探店選擇報名-自行到店-發(fā)表動態(tài)-上傳票據(jù)-提取飯票，來獲得優(yōu)惠消費的同時提高平臺UGC內(nèi)容的產(chǎn)出。可惜的是目前僅支持【廣州】店鋪（可能是先做小范圍本土化嘗試然后再逐漸擴大地域），外地用戶只能看看界面并不能真實使用，這點很遺憾。
動態(tài)布局也很有創(chuàng)意，第一張大圖，其他小圖呈現(xiàn)，五宮格的樣式使布局統(tǒng)一，且更好突出第一張圖的主視覺層級。

如今本地餐飲服務(wù)平臺已經(jīng)做得很好了，“吃貨筆記”在嘗試從優(yōu)化福利流程、視覺表現(xiàn)、設(shè)計手法等多維度探索新的操作形式，這種身先士卒的精神值得尊敬，單說設(shè)計表現(xiàn)的細致，就以超過了大部分產(chǎn)品。當然，每一款好的產(chǎn)品離不開設(shè)計，更離不開產(chǎn)品功能是否真實滿足用戶需求，讓用戶使用輕松、解決需求后是否帶來爽點。

圖標用色很鮮明，均采用3D質(zhì)感表現(xiàn)形式，能看出設(shè)計上面下了很多功夫。底部Tab欄選中圖標也采用3D質(zhì)感表現(xiàn)，與金剛區(qū)和空狀態(tài)圖標形成呼應(yīng)，增強產(chǎn)品風格記憶點。產(chǎn)品目前的評論和下載量都不像沒推過一樣，可能產(chǎn)品分享度不高導致很多一部分人不知道，所以增加徽章模塊評價打卡獲得獎勵，并以此成就來滿足用戶心里預期，從而增加使用黏性和傳播分享。

最后這款產(chǎn)品設(shè)計表現(xiàn)都特別出眾，通過空狀態(tài)文案等內(nèi)容也能看出產(chǎn)品的個性特征。例如：“蝦米都沒有，快看看其他的”，還有很多小的設(shè)計細節(jié)，這里就不一一說了，大伙兒自行下載體驗一下吧。

5.95分

95分是得物旗下的分離出來的全新App，主打潮流閑置交易平臺，而得物定位是新一代潮流網(wǎng)購電商，兩者還是有所區(qū)別。但從UI設(shè)計角度，還是能看到得物的影子，潮流前線，并且整體風格時尚統(tǒng)一，很多細節(jié)值得在這里展開說說。

整個設(shè)計清爽直觀、沒有多余裝飾元素，這就要求圖標必須做到極致，才能撐住整個頁面。我羅列了一下可能出現(xiàn)的圖標，輕質(zhì)感毛玻璃效果，結(jié)合統(tǒng)一的漸變元素使得每個圖標都精致耐看，值得研究。線性圖標也是一樣，整體配套，這套圖標應(yīng)該下了不少功夫。

在二手平臺存量競爭的時代，能有一款產(chǎn)品嘗試新的設(shè)計風格，并且把近幾年火起來的毛玻璃風格相融合，這種走在設(shè)計前線的作風與95分產(chǎn)品潮流前線的調(diào)性一致，單說設(shè)計嘗試這種做法就已經(jīng)超越了大多數(shù)產(chǎn)品了。

6.PODO漫畫

毫不夸張，這款產(chǎn)品打開了我對交互表現(xiàn)與實現(xiàn)的新認知。我看了一下最早發(fā)布是去年9月27日，到目前為止短短8個月時間，就能讓PODO這款產(chǎn)品的交互設(shè)計做到如此優(yōu)秀，背后依靠騰訊，也有游戲元素的影子，這就不足為奇了。

使用下來基本沒有太多圖標元素，更多是把屏幕空間分給了動漫封面，一行三個動漫排列，背景與主體人物分開，滑動時二者在空間層進行錯位，營造一種錯層的空間感，使原本扁平的圖像瞬間立體了許多很是新奇。

點開動漫詳情，圖文信息依次從上到下展開，引導用戶視覺享受，并且頭圖中的動漫人物也做了動效設(shè)計，全覽下來很是細致。除此之外，還有三個明顯的交互細節(jié)，分別是：設(shè)置頁展開交互、閱讀頁底部導航交互以及目錄頁的交互樣式，都以新的表現(xiàn)形式呈現(xiàn)出來，作為設(shè)計師的我們現(xiàn)在不能再說：“設(shè)計已經(jīng)玩不出新的花樣”這樣的說法了。

太多的交互動效就不一一列舉了，趕緊收入囊中吧！

7.皮玩

通過了解得知“皮玩”是荔枝App旗下控股產(chǎn)品，同樣也在入局陌生人社交領(lǐng)域。但值得注意的是該產(chǎn)品上線1個月，內(nèi)部框架及UI界面已相對完整，卡片、插圖、動效、圖標、以及一些趣味設(shè)計都已上線，應(yīng)該是一個成熟團隊孵化的項目，上線前的測試應(yīng)該沒少下功夫，才能在產(chǎn)品初期做的如此完善。logo采用漸變黃底+吐舌頭表情相結(jié)合，搞怪趣味要用嘴說話這樣的印象。定位：更好玩的語音社交算說得過去 。

初次體驗，第一感受就是采用貼紙風的設(shè)計元素，icon與元素都具有較強的設(shè)計感，飽和度較低的配色加上白色描邊，就如產(chǎn)品說的“玩一下、皮一下”相呼應(yīng)，產(chǎn)品的整體顏色采用漸變黃和漸變綠，配色很大膽，同時體現(xiàn)出該產(chǎn)品用戶所代表的具有興趣多元化、喜歡嘗鮮這樣一個群體。同時產(chǎn)品也是想通過這種設(shè)計吸引用戶使用。

產(chǎn)品中處處都能看到微動效，使靜態(tài)的畫面變得活潑許多，這種做法也是為了給用戶營造一種活躍的氛圍，增加平臺活躍度。

8.咔咔

咔咔是陌陌孵化的一款社交產(chǎn)品，最近發(fā)現(xiàn)一些大廠旗下產(chǎn)品都在獨立運營，目的也是為了和主產(chǎn)品脫離關(guān)系，防止激烈競爭導致產(chǎn)品停止運營。年前很火的“啫喱”想必就是吃虧在這方面?；貧w正題，首頁是以視頻為主圖片為輔的瀑布流形式呈現(xiàn)，停到某一位置則直接循環(huán)播放該視頻，排版方式極具新穎，當體驗下來眼球左右移動總是會打斷我信息的獲取，有點強制引導用戶看大圖視頻內(nèi)容的感受。點開則可以與對方進行互動點贊評論。

看看模塊，采用類似“探探”卡片交互左滑不喜歡右滑喜歡來讓用戶進行操作，但與“探探”不同的是此互動是開放的，用戶選擇滿意的動態(tài)內(nèi)容添加到卡片后，陌生人可看到展示內(nèi)容，并且她被多少人喜歡都會展示出來，相當于是個人名片，有種抖音+探探的味道。并不具有一對一的個人隱私性，這是與探探最直接的區(qū)別。

看看模塊中，“打招呼”是與對方建立私聊的唯一方式，如果該用戶已關(guān)注但未打招呼，把卡片劃走，那再也不能與對方建立私聊，除非對方通過“看看”模塊與你打招呼。這個產(chǎn)品細節(jié)很容易因為用戶不理解或者手滑就無法與上個用戶進行“打招呼”私信，且私信功能僅在觸發(fā)“打招呼”后才能交流，入口少、且不易理解，不知道是產(chǎn)品經(jīng)理的有意為之還是被遺漏掉的地方。

消息頁的添加入口，用折疊手法展示，降低頻繁跳頁的割裂感，同時縮起時也不會占用消息列表。
消息列表是通過“打招呼”保存下的私密消息，聊天形式極具特色，黑色背景加上紅紫漸變列表有種夜店嗨皮的即視感觀，這里就不過多評價，大家領(lǐng)悟吧。

設(shè)計中還值得關(guān)注一點，就是個人主頁中的個性標簽，我羅列出22個，當用戶發(fā)表三個同類動態(tài)即可點亮一個標簽，此標簽也會代替文字描述承載動態(tài)內(nèi)容的作用，用戶選擇已點亮 的icon即展示對應(yīng)標簽內(nèi)容了，相當于動態(tài)中的標簽分類，但前提發(fā)表動態(tài)時選擇對應(yīng)你標簽，不然發(fā)表后的動態(tài)不能二次修改。這種通過標簽點亮的功能也是為了讓用戶UGC內(nèi)容更加多元化，同時也想通過標簽來吸引用戶多多發(fā)動態(tài)的。創(chuàng)意點是好的，但是否能達到好的效果，還是要拭目以待。

相比其他產(chǎn)品，咔咔是我一直關(guān)注的產(chǎn)品，同時也是特別喜歡的產(chǎn)品之一，所以我分享給你們。

9.結(jié)語

設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。
認真記錄產(chǎn)品細節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產(chǎn)品細節(jié)分析結(jié)束，點擊原文鏈接查看更多，我們下期再見！

作者：碳水Sir；公眾號：草蓉三石

作者：碳水sir

鏈接：https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html

來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司