經典的52條產品交互設計原則

来源:https://www.cnblogs.com/88223100/archive/2023/04/23/52-Design-Principles-of-Xiaohongshu.html
-Advertisement-
Play Games

交互設計原則有很多,《小紅書的52條設計原則》可以學習下,非常棒的輸出,值得做產品設計的童鞋學習一下。 ...


交互設計原則有很多,《小紅書的52條設計原則》可以學習下,非常棒的輸出,值得做產品設計的童鞋學習一下。

就是我們常說的 二八法則,表單設計中,可以預設選中一個最常用的選項,提高用戶的填寫效率和用戶體驗。

動圖封面

PS:該法則更適合用於分析競品,可能並不適合規劃

產品的功能增多,可以滿足更多用戶需求,但可用性和操作性會降低,並拿瑞士軍刀距離,功能豐富,但跟單功能工具想比,可用性就差。當無法明確用戶需求時,提供多樣的功能可以提高產品未來的可拓展性,當用戶有明確的需求時,簡潔專一的功能可以提高產品的可用性。

動圖封面

功能豐富多彩的 burbn 是 ins 的前身,精簡後改名 ins,迎來爆炸式增長。

PS:好的產品需要同時兼顧新用戶和資深用戶的需求。

產品價值由其成本與效益兩者決定。只有新功能的效益大於成本時,才應該增設。拿圓瓶子的可樂和方盒子的牛奶舉例,圓瓶子的可樂浪費的空間成本小於飲用體驗好的效益(體驗越好賣得越多),但牛奶的儲存成本大於飲用體驗好的效益,因此製成方盒子節省空間。

動圖封面

用戶價值公式:用戶價值 = (新體驗 – 舊體驗)- 替換成本。更好的用戶體驗(即新體驗 – 舊體驗)是效益,只有當此效益大於用戶的遷移成本時,用戶才有意願使用新產品。

PS:計算成本與效益時要選擇合適的立場,不合適的測量指標會導致計算結果的不准確。

在人們面前出現次數的越多,得到的喜愛程度越高。「單純曝光效果」,即當一個人、事、物不斷出現在自己的眼前,自己就越容易喜歡上這個人、事、物。(比如冰墩墩,在奧運期間瘋狂的曝光,好感度暴增)

動圖封面

橫幅廣告存在盲視效應,這種行為是我們註意力有限的結果。

PS:一開始就讓人感到厭惡的事物,無法產生曝光作用,甚至過多的曝光也會引起厭煩。

產品的形態應該由其功能決定,首先要考慮功能,其次才是裝飾。拿沙利文舉例 ,沙利文認為,裝飾是精神上的奢侈品,而不是必需品,「功能第一,形式第二」

動圖封面

表單的寬度就是一種有效暗示。

在產品設計中,若能實現相同的功能,應選擇最簡單的設計。

「如無必要,勿增實體」

「其他條件相同,使用較少假設的證明更優越」

動圖封面

PS:不是一味地追求極簡,而是在同樣能夠達到預期效果的多種方案中,選擇最簡潔的,即儘量簡化,別太簡化

人的閱讀方式遵循從左到右的眼動規律。左上是第一視覺區,右上是第二視覺區,左下是弱休息區,右下是終端視覺區。

閱讀時,人們的目光會遵循從左上到右下的「閱讀重力」。

動圖封面

PS:目前只在信息均勻分佈的頁面證明有古騰堡圖表的閱讀規律

目標越大且距離越近,便越快到達,並比到達更小的更遠的目標出錯幾率更低。運用此定律可以估算用戶移動點擊目標時所需的時間。

動圖封面

PS:當目標足夠大時,再增加尺寸得到的可用性增益很小。

面臨的選擇越多,所需要的反應時間就越長,在簡單的決策場景中,為減少反應時間,應減少選項數量。

動圖封面

PS:以下兩種情況不適用

1、需要大量閱讀思考的複雜情況,對於熟悉的語言

2、當元素增加時,掃視的反應時間並不會增加

從心理學的角度來看,人類處理信息的能力是有限的。

動圖封面

底部導航中的按鈕儘量保持在 3–5 個,減輕用戶記憶負擔。

動圖封面

銀行卡號碼通常以 4 個數字為一組,金額通常以 3 個數字為一組,這樣能夠減輕用戶理解和記憶的負擔。

又稱「複雜度守恆定律」,工程師應該多花一周來降低應用程式的複雜性,而不是讓數百萬用戶因為複雜性多花一分鐘。

無論在產品開發環節還是在用戶與產品的交互環節,這一固有的複雜度都無法依照我們的意願去除,只能設法調整、平衡。

動圖封面

PS:游戲需要複雜性

我們都希望我們的產品是簡單的。但與此同時,也不想犧牲選擇和其他能力。

響應速度低於 400 毫秒的系統會讓人上癮。

Doherty 認為人們會將工作需要的一系列操作步驟存儲在短時記憶之內,如果系統響應時間太長,就會打斷人們的短時記憶,換句話說,思路都不連貫了。

動圖封面

PS:我們的大腦在 100 毫秒內完成對圖像的註冊。我們的平均反應時間是 250 毫秒

經過深度分析的信息會比簡單理解的信息更容易被記住,如從詞的意思來理解記憶比通過圖片或音韻記得更牢。

動圖封面

重覆練習並不能有效的加強長線記憶,但是對事物的深層分析可以。

如果輸入的是正確信息,就會輸出正確的結果;反之,錯誤的信息輸入會得出錯誤的結果,除非有設計干預。

動圖封面

PS:垃圾進,垃圾出

LATCH五架帽包含五種信息組織方法:

類別(Category)、

時間(Time)按時間順序來組織信息

地點(Location)以地理位置或空間為參照來組織信息

字母表(Alphbetical)指按字母順序來組織信息

連續感(Hierarchy)指按等級或規模組織信息

動圖封面

在用文字表達時,將最重要信息放在首位來闡述的形式,即信息的重要性遞減。

在設計數據圖表時,將總結性的信息作為標題在更前置的位置暴露給用戶,會讓用戶在更短的時間內獲得更重要的信息。

動圖封面

學習第一個任務的規則會幹擾到對第二個任務規則的記憶。隨著學習的數字列表增加,學習過的最後一列數字的準確率在 24 小時後明顯下降。

動圖封面

PS:儘量簡化設計或尊重顏色及標誌的普遍習慣。

通常人在記圖像時會比記純文字更牢,即「一圖勝千言」

動圖封面

PS:實驗結果只適用於人集中精力識別內容的情況

消費者在對待要求自己 DIY 的產品時,會對該產品價值的認知過高。

宜家效應的核心是認知偏差,通過增加消費者的參與感,拉近用戶與產品的距離,產生情感關聯。

動圖封面

人們的決策會被表達方式所影響。同一個問題在邏輯相似的不同說法下,會產生不同的判斷。

在人際溝通中,關鍵不在於說什麼,而是怎麼說。

在大多數情況下,正面敘述的框架(即玻璃杯是半滿,而非半空)有更高的轉化率。

動圖封面

在人的潛意識裡,期望會影響行為及洞察力。此效應又稱皮格馬利翁效應

如果老師對學生的期望加強,學生的表現也會相對加強。

比如keep運動打卡

動圖封面

在生活中,相較於已完成的任務,被中斷或未完成的任務更容易被人記住。

一些訂閱制產品會免費給用戶閱讀一些內容,然後在中途打斷用戶,出現訂閱該產品的入口。

動圖封面

在大部分數字產品中都會運用到的設計,為了提醒用戶並給予用戶緩衝時間,會在關鍵信息提交前,系統自動跳出彈窗給用戶進行二次確認,問其是否繼續執行剛做出的指令。這能有效的避免用戶操作失誤而導致的麻煩。

動圖封面

PS:不能頻繁,不能文案讓人反感

在交互設計中,為了減輕用戶在瀏覽大量信息時的壓力,通過逐步披露信息的方式來改善用戶體驗。

產品設計中,將低頻操作統一收在「更多」的按鈕中,避免一次性給用戶暴露太多信息。

動圖封面

人在看到相同軌跡並以相同速度移動的對象時會將對象視為一個組,這是一種心理現象,屬於格式塔原則之一。

該原則在現今的產品設計中廣泛運用,例如設計師經常會在 Tab 左右切換時,將下方的所有內容按照統一方向進行移動,告知用戶這些內容的同組關係。

動圖封面

人在瀏覽樣式多變的形狀時,大腦會自動將複雜圖形簡化再理解。

鑒於人眼會將元素整合在一個頁面,設計師會將網頁上的圖形和內容排版成能讓人一眼視作整體的形式,從而降低理解的時間成本。

動圖封面

控制裝置與被控制的對象之間需要在佈局上或者運動上存在強的對應關係,從而讓用戶的操作變得更直覺化。

建立良好映射關係有兩種方式:1利用物理環境類比(Physical Analogies):比如空間位置類比。2利用文化標準(Cultural Standards):比如升高表示增加。

動圖封面

PS:在設計中我們應該保持設計的意義與用戶在現實生活中的認知是一致的。

用戶的需求層次分為 5 個等級:功能性、可靠性、實用性、熟練性、創造性。

美國心理學家亞伯拉罕·馬斯洛將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求,依次由低層次到高層次。

動圖封面

視覺或交互一致的設計,會提升產品的易用性和用戶的認知效率,也可以幫助用戶關註到一致事物之間的聯繫。

動圖封面

可用性原則本身就是啟髮式的,應用該原則時也要符合設計服務的場景,其邊界與限制需要隨著場景動態變化。

在同一區域內,通過設計手法的差別處理,讓優先順序和重要性更高的元素和信息著重凸顯出來。

動圖封面

用線條或方框連接在一起的元素集合,比單獨存在的元素更容易被感知。尤其是在元素量級較大的頁面中,均質連接會比鄰近性原則效果更佳。

動圖封面

人類的認知系統會把視覺刺激分為「圖」和「底」兩類元素,在構圖中需要將重要的元素信息置於「圖」的層次上。

即:在人眼看到一組物體時,會先關註到主體,然後才會關註到部分。

動圖封面

用戶會將物理距離近的元素認為是具備強相關性的,在設計上需要按信息的關聯度做鄰近性的考慮。

接近原則告訴我們,人們將視覺上彼此更接近的對象分組。即使有更多的對象,相距較近的似乎也比較遠的更具相關性。接近性特征會比形狀或顏色等其他特征更容易被我們感知到。

動圖封面

用戶傾向將「線」按原有的方向平滑且連續地延伸,在界面設計中可將關聯性強的模塊排列在一起,形成有形或無形的線狀結構。

在移動端產品設計中,常常會將同類信息使用相同尺寸的卡片收攏在可以橫向滑動的組件中,節省頁面空間的同時,也告知用戶向左滑還可以繼續瀏覽同類內容。

動圖封面

用戶對於熟悉事物的認知常常保持不變,從而忽略透視、光線、顏色或大小上的變化。

「用戶的絕大多數時間是花在其他網站上的,因此他們希望你的網站和那些他們用過的網站具有相似的使用方式。」

動圖封面

動圖封面

將各元素按照縱向、橫向或圍繞一個圓心整齊地排列。

對齊可增加統一性和增強凝聚感,提高整體的穩定性和美觀度。

動圖封面

將複雜系統分解成幾塊可獨立運行的子系統的管理方式,模塊化利於系統本身的維護、評測和迭代。

設計組件庫系統便是利用原子模塊化的方式進行的。

動圖封面

將相關的信息組合在同一層,能夠加強他們之間的聯繫並有效管理信息的複雜度。將信息分層疊放展示,能使複雜的問題簡單化,便於人們理解。

移動端設計中,常常將相關的信息組合在同一層中,並通過陰影和蒙版等手法將分層信息傳遞給用戶。

動圖封面

限制用戶行為,來避免錯誤操作的發生。約束因素可分為四種:物理、文化、語義和邏輯。

通過標識傳遞出危險的信息,通過心理約束來警示用戶,以避免危險行為的發生。

動圖封面

通過約束以及良好的功能可見性來防止操作錯誤的發生,並允許在錯誤發生後具備可逆性。

我們對「寬容性設計」的要求不僅僅是「撤銷」和「保存」操作,更多的應用場景已經出現

動圖封面

相似特征在多個相似環境中,會獨立演變至趨同的結果。規劃產品創新策略時,需考慮到特征與環境是否存在共性,否則創意想法會與其他產品趨同。

因為當一種產品起作用時,它往往會被競爭對手模仿。

動圖封面

心流指用戶全身心專註在某件事情或某個任務中的狀態。專心工作時經常忘記時間以及對周圍環境的感知。諾曼在《設計心理學》中多次提到心流,並舉了視頻游戲比電影心流狀態更強烈的案例,同時認為游戲將會是一個讓人興奮的新發展。

動圖封面

正態分佈中大部分數據接近平均值,偏離平均值的數據均勻分佈在兩側,形成一個對稱的鐘型曲線。設計中需要研究用戶及產品功能的正態分佈,可以用於確定目標用戶或功能權重等。

動圖封面

PS:在互聯網時代,數字產品更容易服務到小眾群體、小眾行業,考慮到他們的需求也可以為我們的產品設計增色。

期望路線是由人或動物步行侵蝕造成的,是起點與終點之間路程最短的非既定路線,這表明人們的願望和規劃者的設想並不匹配。在既有產品框架下,通過觀察用戶在不受干擾、無偏見的狀態下使用產品的交互路徑和痕跡,直到產品設計得到優化。

動圖封面

PS:期望路線表明瞭真實的偏好,但並不是所有的偏好都要被適應

舊的輸出結果作為新的輸入再回饋到系統,會對下一次的輸出造成影響。利用好正負兩種反饋的系統設計,提升用戶對系統的使用度和留存。

數字產品中往往會為用戶提供反饋渠道,幫助產品在下版本的迭代中提供更好的服務。

動圖封面

用戶傾向於用物品或元素填滿空白處而不留剩餘空間,對於不同訴求的用戶群體,留白與否所產生的體感不同。

現代設計通常是極簡主義的,以減少視覺干擾,低密度、簡約往往意味著優雅、精緻;而高密度、雜亂則讓人聯想到大宗市場、折扣等,現在仿佛也已經成為了室內、網站設計的規範。

動圖封面

PS:對於對效率和信息密度有訴求的場景避免使用太大的留白

功能蔓延是指在產品的開發過程中,有趨向性地進行新特性的不斷擴張和增加。這會加大產品的使用難度,也會導致預算與時間成本的增加。在產品設計中需要意識到功能蔓延的發生,及時設定止步點。

動圖封面

信噪比是指相關信息與不相關信息的比值。信噪比原指電子設備中信號與雜訊的比例,信噪比越高,信息的傳輸質量越好。設計中追求高信噪比,可以提升信息觸達的有效性,從而帶來更好的用戶體驗。

動圖封面

心智模型指的是用戶頭腦中對事物將如何運行發展的預測,在設計中需要考慮到目標人群的心智模型,參考其既定慣例和行為方式。

紅色始終與數字產品中的錯誤或警報相關聯。也有例外。在一些亞洲文化中,紅色代表財富或好運,在某些情況下可能會導致不同的心理模式。

動圖封面

PS:不同文化中的用戶可能會形成不同的心智模型,應用時應考慮到目標用戶;心智模型不是一成不變的,設計師應需關註潮流趨勢

委員會設計指的是由多人組成的集體一起做決定,並不停反覆修改設計的過程。Mini 車之所以成為一個標誌,亞歷克認為主要是因為它沒有被委員會的設計所左右。

動圖封面

PS:個人統領的設計耗時短,但風險高

在限定條件下,尋求足以解決問題的方案,而非最優方案。

在快速迭代的產品流程中,在時間和資源有限的情況下,拆解成階段性設計方案。比如常用的檢索功能的設計中,初期通常只會有一種排序方式,但是會在之後的版本迭代中添加更多更豐富的排序能力,提供更好的用戶體驗。

動圖封面

PS:在某些情況下,滿意解決往往比追求最優方案更有成效.

52、非我發明症

對於不是自己所處的社會群體提出的想法和創新事物,人們可能會持排斥的心理傾向。

不同部門或小組的平行比稿方案,往往會帶有非我發明症的傾向,因此在評審時需要考慮到這點。

動圖

NIH 時常發生在決策的潛意識層面,這導致了問題很難被髮現和剋服。

 

作者|國思軟體

本文來自博客園,作者:古道輕風,轉載請註明原文鏈接:https://www.cnblogs.com/88223100/p/52-Design-Principles-of-Xiaohongshu.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、迴圈 1.在程式中,一組被重覆執行的語句被稱為迴圈體,能否繼續重覆執行,取決於迴圈的終止條件。由迴圈體及迴圈的終止條件組成的語句,被稱為迴圈語句。 2.迴圈執行的過程是①第一次迴圈:第一次賦值,然後條件判斷,執行迴圈體,最後執行累計。 ②非第一次迴圈:條件判斷,執行迴圈體,最後執行累計。 3.c ...
  • JavaScript 使用 splice 方法刪除數組元素可能導致的問題 splice() 方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。 JavaScript 遍曆數組並通過 splice 方法刪除該數組符合某些條件的元素將會導致哪些問 ...
  • function getWeekNumber(date) { // 創建表示周日的新 Date 對象並獲取其時間戳 const sunday = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()) ...
  • 場景:項目中有些靜態頁,沒有調用介面,而客戶那邊就今天改幾個字,明天改幾個圖片這種,客戶或者非開發人員吧,還不大會運行項目,這種情況下就很頭疼,特別是手裡有比較急的項目啥的 個人感覺行的通的方案,就是放在第三方,客戶下載個js文件,替換中文或者圖片啥的,然後覆蓋那個文件,感覺比教他運行代碼啥的靠譜的 ...
  • 在前端工程化中,JavaScript 依賴包管理是非常重要的一環。依賴包通常是項目所依賴的第三方庫、工具和框架等資源,它們能夠幫助我們減少重覆開發、提高效率並且確保項目可以正確的運行。 ...
  • 需求 根據許可權編碼禁用按鈕 阻止當前 dom 綁定的點擊事件,禁用狀態(opacity 半透明?? 或者 display: none?? ) 嘗試 開發環境用 Chrome 跑,一切正常,構建打包後去真機跑,按鈕沒控制住 (用 HBX -發行-原生應用 app 製作 wgt 包)開發環境: HBX: ...
  • 防抖(debounce) 一句話概括:防抖是給定一個時間周期,如果觸發事件的周期小於該事件(也就是觸發過快),則不會觸發事件。 舉個例子:我給定的時間周期是1s,如果我在觸發第一次事件後1s內觸發該事件,則重新開始計時,直到觸發周期大於1s才會執行事件的方法。 function debounce(f ...
  • 前言 數組是幾乎所有編程語言的基礎語法,JavaScript因為語法特性,之前缺少一些集合類對象,對數組的使用就會更多一些,因此我們更需要理解數組知識。 然而大部分人對數組都已經非常熟悉了,所以本文將不會介紹數組的基礎語法和用法,而是從JavaScript中數組的一些特殊之處入手,通過這些少有特性的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...