<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 用經典的設計原則,深度解析閑魚的用戶體驗設計

          2025-6-13    濤濤 設計管理與成長

          今天我們主要從用戶體驗的部分原則來看閑魚,主要以產品視覺設計四大原則、交互設計十大可用性原則、情感化設計來看閑魚
           
          今天我們主要從用戶體驗的部分原則來看閑魚,主要以產品視覺設計四大原則、交互設計十大可用性原則、情感化設計來看閑魚
          其實主要是因為用戶體驗分為這個幾個方面:

          1、 視覺的感官體驗,給用戶帶來的是視覺表現層的體驗,所以我們把產品視覺設計四大原則來對照用戶的感官體驗。

          2、 交互的用戶體驗,也就是產品設計中給用戶使用過程產生交互互動,比如點擊效果、輸入、彈出、切換等等。所以我們用交互設計尼爾森十大可用性原則來對照交互的用戶體驗。

          3、 情感用戶體驗,這是由外而內的心理作用,給用戶帶來心理認同,增加滿足和愉悅感。所以我們用情感化設計原則來對照我們的情感用戶體驗。


          產品視覺設計四大原則

          在產品視覺的設計中我們可以用四大原則來滿足用戶感官體驗的優化,主要是

          一.對齊、 二.重復、 三.親密、 四.對比、

          image.png

          一.對齊

          頁面信息對齊,左對齊、右對齊、居中對齊,保持頁面視覺統一
          移動端的閱讀習慣是從左往右的,因此我們也是遵循向左對齊,或者尾部信息向右對齊。居中對齊在整體信息排列中較少使用,除非是比較正規、傳統的產品設計使用居中對齊的大關系。而在小細節的對齊中居中對齊應對logo/頭像等也有使用。從開發的成本上,對齊的設計也是方便了他們的開發。        
                 
                 
                  舉例子

          閑魚消息頁面頂部功能區域采用居中對齊方式,比較正式一些,突出顯示引導用戶點擊;個人頭像和消息左對齊顯示,發布圖片右對齊顯示。        
          閑魚我的頁面,功能圖標和信息左對齊顯示,消息和進入按鈕右對齊顯示;贊賞、關注、粉絲居中顯示。        
          重點突出的信息,居中顯示,引導用戶瀏覽路徑。常規列表左對齊、右對齊顯示,滿足用戶瀏覽習慣,提升用戶體驗。
           

          image.png

          二.重復

           

          重復比較簡單的理解為一致性,顏色、形狀、材質、空間關系、線寬、材質、空間等等。我們常說視覺規范的一致性就是這樣,保持這些單元的統一,貫穿始終這樣我們的頁面排版才會整體、產品設計才會整體。        
                 
                  舉例子

          閑魚消息頁面,頭部功能區域圓形圖標重復,字體重復。消息列表頭像、名稱、消息、圖片重復,保持一致性,和統一。        
          首頁部分功能區域圖標重復、風格重復一致。活動區域標題和圖片保持重復性原則。在類別篩選部分,每個類別瀑布流展現,宮格重復,保證頁面篩選一致性。  

          image.png

          三.親密

          如果多個項相互之間存在很近的親密性,它們就會成為一個視覺整體。因此我們在設計時候往往需要將信息整合把有親密組織關系的內容整合一起。減少了混亂不堪的信息內容排列,整合框架,這也是方便用戶瀏覽,滿足了易讀性、易用性。個人觀點(在產品設計中親密度的把控,要多學理論、然后理論實踐結合,多多體證,才能更好的滿足用戶體驗)

          舉例子

          閑魚首頁分為4大部分,功能區域、活動區域、閑置區域、分類區域,每個區域相互親密,形成一個整體,通過間距分割,滿足用戶的易讀性,降低學習記憶負擔。
          消息頁面就更明顯了,主要分為功能操作區域和消息列表區域,每個區域相互親密通過間隔和表現形式區分。(這類需求就沒有基本需求那樣必備,是產品中期望需求體驗越多越好,用戶越滿意,反之用戶滿意度也會下降)。

          image.png

          四.對比

           

          對比的通俗來說就是要有對比性、不同點,就是要避免頁面上的元素太過相似,這樣那既要避免了同質化也強調了差異化的節奏感,突出重點信息傳遞。當然這個度需要我們在日常工作中多多積累。比較常見的對比有方向對比、信息對比、顏色對比、對稱對比、比例對比等等。

          舉例子

          閑魚聊天頁面,雙方消息顏色對比,色彩的對比更加強的雙方聊天的視覺效果,對比也是比較明顯。
          閑魚的兌換詳情頁面,文字和信息的對比,突出展示內容信息,讓用戶一目了然區分內容和圖片,多重信息對比,也增加了信息獲取的質量,提升用戶體驗。

          image.png

          交互設計十大可用性原則

           

          尼爾森(Jakob Nielsen)是一位人機交互學博士,于1995年1月1日發表了「十大可用性原則」。尼爾森的十大可用性原則是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產品設計與用戶體驗設計的重要參考標準,值得深入研究與運用。
          百度百科

           

          這是一套實用性的原則,無論是產品開發還是落地,都能夠很好的幫助我們提升用戶體驗和設計質量。以人為本,以用戶為中心,讓我們設計師能夠很好的明確設計方向和用戶需求的科學方法論。

           

           

           

           

           

          一、狀態可見性原則
           

           

          解讀狀態可見原則,我們將會從實際的案例中挑選,結合原則進行說明,方便大家更好的理解和把控狀態可見性原則。        
           
           
          1.讓用戶知道系統在做什么
           
          就是在產品設計過程中,像用戶展示系統進行的操作狀態。
                   

          舉個例子

          比如當頁面刷新過程中,告知用戶加載進度。當系統進行判斷操作過程中告知用戶當前操作狀態。當用戶清除緩存時告知用戶產品怎么清除緩存。等等        
                 

          image.png

          2.讓用戶知道自己處于系統的什么位置

          其實就是我是在哪里呀,我要去哪呀,從哪去呀,讓用戶一目了然,不用太多學習成本。這是在頁面元素中的核心,一旦用戶不知道自己處于系統什么位置,就會容易操作失誤或者放棄產品。失去了設計為用戶服務的本質。
           
          舉個例子
          在閑魚頁面我們系統的標題欄、TAB欄的提示貫穿整體,用戶知道我們所處的什么頁面。比如認證提示,每一步告知用戶進行到哪里了。

          image.png

          3.讓用戶知道系統做了什么

           

          讓用戶知道產品做了什么,明確了知道下一步如何操作。

          舉個例子

           

           

          在閑魚登錄時當你輸入密碼錯誤等,系統提示密碼輸入錯誤,可以重新輸入。
          當你退出登錄,系統提示保存了當前數據,下次可繼續登錄。
          當你清除緩存時,產品展示已清除置灰,數量變化等。
           

          image.png

          4.讓用戶知道自己在做什么

           

          當用戶進行操作時,產品及時反饋,用戶做了什么。

           

          舉個例子

           

          在閑魚中最簡單的例子就是當我們聊天時候,我們輸入信息發送,顯示在我們跟對方的聊天頁面中。

          image.png


          5.新手提示

          作為我們的新用戶是承載整個產品流量的口子,新手的提示關系著我們運營中的留存,這個方面做好,也是對運營業務鏈路有著很大的幫助。

           

          舉個例子

          在新手提示中,有一個設計要點就是可以采用趣味性設計,更好的與用戶情感交流。

          image.png

          二、環境貼切原則
           

           

          簡單的理解就是產品設計要跟現實相互結合,產品設計要符合用戶認知,不能做個我認為用戶是這樣理解的產品哈哈哈。


          1.圖片、圖標與現實相互結合

          符合用戶對描述圖標功能的認證

           

           

          舉個例子


          在閑魚首頁功能頁面,二手手機圖標采用現實生活手機作為造型,游戲交易采用游戲手柄作為造型,二手圖書采用圖書翻頁形式作為造型,珠寶文玩采用珠寶玉器作為造型,符合用戶在現實生活中熟悉的東西,滿足認知,有良好體驗。

          image.png

          2.文字表達滿足用戶認知

           

          符合用戶自己現實生活的認證場景

           

          舉個例子


          在魚塘頁面,文藝書畫、樂器等興趣魚塘,我們叫品質文青聚集地,文藝青年在當下比較火的網絡名詞,喜歡文化藝術的青年哈哈。符合用戶年齡人群的環境認知。

          image.png

          三、撤銷重做原則
           

           

          這個比較好理解就是產品設計滿足撤銷重做原則,防止用戶出現后悔操作或者誤操作等等,滿足用戶體驗逆向操作


          1.撤銷

          瀏覽操作可以撤銷到前一步

           

           

           

          舉個例子


          閑魚頁面常見的返回操作就是撤銷的一個例子

          image.png

          2.重做

          就是用戶撤銷上一步,又反悔了要到之前哪一步;或者用戶操作完成發布又反悔了重新發布,滿足用戶充足的反悔余地,給予用戶對產品的信心和控制感。

           

           

          舉個例子


          閑魚發布閑置后后悔了要重新發布,可以在管理頁面進行編輯或者刪除重發操作。

          image.png


          四、一致性原則
           

           

          一致性原則主要包含顏色、字體、圖標、圖片、功能、提示等等全局的一致性,給用戶帶來全局一致的舒適體驗。由于一致性包含內容較多,所以下面就舉幾個主要例子來進行說明一致性原則。

           

           

           

          1.顏色一致性

          顏色一致性是全局操作的重要一點,也是符合品牌基因貫通產品的重要體現。

           

          舉個例子


          顏色一致性在我的頁面和首頁頭部有了明顯體現

          image.png

          2.提示一致性

          提示一致性只要是提示操作一致性,包含設計的圓角、字體層級、顏色等融合一起的一致性。


           

          舉個例子


          這次例子是不一致性的例子,取消保存、刪除、退出等操作一個彈窗一個設計樣式,不符合基本的提示一致性設計。當然這也是我們設計師在自己產品體驗設計中需要改進優化的地方。

          image.png

          五、防錯原則
           

           

          簡單意思防止用戶出錯,在用戶錯誤操作或者可能因為誤操作引起不必要的操作損失時,給以用戶提示,防止用戶出錯。這里主要舉兩個比較常見類型的例子,幫助設計師理解放錯原則。

           


          1.退出操作提示

          退出登錄退出保存時提示操作,防止用戶丟失數據出錯


           

          舉個例子
          在退出登錄提示是否要注銷登錄,把確認層級加大,放在右邊,清晰提示用戶,防止用戶出錯

           

          image.png


          2.登錄操作
          登錄操作時,滿足登錄操作條件后才會顯示按鈕高亮,其他情況下置灰操作,防止用戶錯誤點擊。


           

          舉個例子
          閑魚登錄操作輸入驗證碼后,按鈕高亮可以進行登錄(登錄操作不能截圖,大家可以自己下載閑魚去體驗一下哈哈)

           

           

          六、減少記憶負擔
           

          系統主動識別,減少用戶記憶負擔,常見有掃碼識別、語音識別、

          指紋識別、掃臉識別等等系統操作。

          舉個例子


          閑魚掃碼識別用戶,識別條形碼商品等等

          image.png

          七、靈活高效原則
           

           

          簡單理解就是靈活高效設計,滿足大多數用戶操作需求,操作高效便捷。因為不同產品類型不同,這里舉幾個常見類型說明,如自動回復,表情包預覽、常用表情包 等。

           

           

           

          1.自動回復

           

          比較典型的靈活高效設置,用戶不在線直接自動回復,選擇不同回復語


           

          舉個例子

           

          閑魚我的頁面設置自動回復,靈活高效

           

          image.png


          2.表情包預覽

           

          聊天時選擇自己的表情包,預覽,選擇適合自己的表情發送


           

          舉個例子

           

          聊天頁面表情包預覽,可愛的閑魚表情切換,滿足用戶操作需求

          image.png

          八、易掃原則
           

           

          簡單理解就是用戶掃描產品信息時,能夠容易獲取信息。因此需要突出層級強化主要部分。
          舉個例子

           

          閑魚的我的頁面,每個區塊進行功能區分,分為買、賣、玩、其他4個主要部分。降調層級,同時在區塊內每個功能圖標宮格顯示,也易于用戶查找,滿足了易掃原則,提示了用戶體驗。

           

          image.png

          九、容錯原則
           

           

          簡單理解就是靈活高效設計,滿足大多數用戶操作需求,操作高效便捷。因為不同產品類型不同,這里舉幾個常見類型說明,如自動回復,表情包預覽、常用表情包 等。

           

           

           

          1.反饋幫助


           

          產品出現問題或者用戶出現問題,給予反饋提示或者幫助


           

          舉個例子

           

          網絡無法打開時,提示開小差了,可以刷新一下試試。

          image.png

          2.限制操作

           

           

          防止產品出現一些問題,可以進行提前限制操作來避免。


           

          舉個例子

           

          下載圖片有時候流量太少了,怎么辦,可以通過對圖像下載限制,避免用戶損失

          image.png

          十、人性化幫助
           

           

          簡單理解就是幫助用戶操作,幫助用戶解決問題,給予提示、引導、建議、反饋等。這里主要說明2個主要常見的人性化幫助,信息提示和幫助說明。

           

           

           

          1.信息提示

           

           

          產品新增功能或者復雜功能時,浮窗提示操作


           

          舉個例子

           

          新手撈魚互動,提示點擊引導信息,幫助用戶更好的操作

          image.png

          2.幫助說明

           

          APP常用功能,用戶有疑問或者不懂得操作時,查看幫助說明,也能進行及時反饋。方便用戶更好的使用產品。


           

          舉個例子

           

          閑魚的幫助說明功能更加全面,滿足不用用戶場景的問題需求,也能及時和客戶進行咨詢反饋信息。

          image.png


          本來想從諾曼的情感化設計中來闡述,但是仔細考慮它分為本能、行為、反思層,在用戶體驗的設計中比較概括和全面,在我們初中級產品設計中不適合具體應用。Aarron Walter(瓦爾特)在為情感而設計中將情感化設計要素具體化,給用戶帶來愉悅感可以從可控感、參與感、情感共鳴、信任、從眾心理來進行把控,方便我們設計師在用戶體驗情感化設計中具體的應用實踐更好的服務于用戶。

          情感用戶體驗
          ,這是由外而內的心理作用,給用戶帶來心理認同,增加滿足和愉悅感。所以我們用情感化設計原則來對照我們的情感用戶體驗。

           

           
           

          情感化設計原則

           

           

          產品設計中把控情感化設計,給用戶帶來愉悅感:可控感、參與感、情感共鳴、信任感、從眾心理。

           

           

          1.可控感

          用戶使用產品過程中操作可控。可控感其實比較好理解的是盡量不脫離用戶控制,讓用戶可把控自己的產品。當產品不可控時,比如操作提示不可控、信息瀏覽不可控、操作權限不可控、頁面條狀不可控等等,用戶就會恐慌、焦慮,不會選擇繼續使用這個產品。

           

          舉個例子

          閑魚用戶登錄之后需要獲取權限,告知用戶選擇是否授權于產品這些權限,讓用戶操作可控。

           

           

          image.png

          2.參與感

           

          提示參與感設計能更好的提升用戶體驗和用戶留存等,設計參與感的引導路徑或者獨特體驗,滿足用戶愉悅度,讓用戶沉浸其中。

           

          舉個例子

           

          個性化設計,為用戶提供獨一無二的個性化設計,帶來個性化服務,滿足用戶對閑置產品的需求,也同時滿足用戶發布閑置同類商品可參考的需求。當用戶想購買閑置植物盆栽比較多時,首頁就會出現推薦的盆栽商品。      

          image.png

          目標引導設計,劃定規則和目標路徑,引導用戶參與其中,在簽到活動頁面一個小路徑,用戶點擊撈魚,撈上來之后,就可以兌換閑魚幣了,讓用戶趣味游戲同時獲得閑魚幣,提升參與感,增強了用戶體驗。

          image.png

          3.情感共鳴


          產品體驗過程中的情感共鳴,是用戶和產品之前的互動聯系,當用戶被產品有意思的點打動時候,產生情感互動。
           
          舉個例子
           
          當頁面趣味加載,顯示可愛表情時候,用戶被打動,不感覺加載時間過長,提升用戶體驗。

          image.png



          當頁面缺失時,畫面出現可愛的卡通缺失頁,產生情感共鳴,同時減少了用戶的認知負擔,讓用戶知道了所處位置和過程。
           
           
           

          4.信任感

          信任感對于用戶而言,值得信賴產品,并加以使用。信任感在用戶體驗中占據重要地位,也是對于用戶使用產品前期的重要保障,當用戶對產品產生信任,就會放心使用產品。當產品出現信任危機,用戶就會放棄使用產品。如何提高產品的信任感那,我們可以從產品專業度、品牌備書、滿足用戶需求、減輕用戶使用負擔等等方面來進行提升產品的信任感。

           
          舉個例子
           
          閑魚的啟動頁面是用戶進入產品的第一環節,所以增加阿里的品牌背書,提升用戶信任感。
          我的頁面有安全中心,可以購買欺詐保障,了解安全知識和安全操作,減輕用戶交流,提升信任感。

          image.png

          5.從眾心理

           

          從眾心理是大多數人都存在的心理,個人受到多數人群影響,表現出符合公眾輿論或者多數人的行為方式。是一種非理性的行為方式,通俗來講叫“隨大流”。


          舉個例子
           

           

          閑魚首頁,什么值得買模塊,提示510人求購,告知用戶大家都在買,你在等什么。

          image.png


          結尾

           

           

          希望能幫助大家在設計自家產品時候,運用這些法則原理去進行設計思考,希望能給你帶來一定的幫助,謝謝。
          作者:阿韓設計
          鏈接:https://www.zcool.com.cn/article/ZMTIwMTIwOA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           
           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://m.sdgs6788.com

          存檔

          麻豆av久久av盛宴av| 久久国产精品-国产精品| 久久精品视屏| 久久无码专区国产精品发布| 思思久久精品在热线热| 久久99精品国产麻豆| 国产精品热久久毛片| 中文精品久久久久人妻不卡| 情人伊人久久综合亚洲| 亚洲国产婷婷香蕉久久久久久| 亚洲综合伊人久久综合| 久久中文娱乐网| 99久久精品免费看国产一区二区三区 | 国产精品久久久久久久久久影院 | 999久久久无码国产精品| 国产午夜福利精品久久| 99精品国产99久久久久久97| 久久精品99无色码中文字幕| 亚洲精品乱码久久久久久中文字幕| 久久综合九色综合久99| 久久久老熟女一区二区三区| 无码人妻少妇久久中文字幕| 99久久婷婷国产综合精品草原| 一本色道久久88精品综合| 欧美精品丝袜久久久中文字幕| 久久亚洲国产精品一区二区| 久久久亚洲欧洲日产国码二区| 久久亚洲日韩看片无码| 热久久国产欧美一区二区精品| 99久久精品费精品国产一区二区 | 久久99中文字幕久久| 久久综合九色综合网站| 亚洲AV无一区二区三区久久| 2020国产成人久久精品| 日本五月天婷久久网站| 久久婷婷色香五月综合激情| 午夜福利91久久福利| 久久久久亚洲AV无码观看| 久久无码国产专区精品| 久久久噜噜噜久久熟女AA片 | 亚洲av日韩精品久久久久久a|