如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

5 評論 8036 瀏覽 57 收藏 21 分鐘

編輯導語:簡單不意味著沒有復雜的功能,只是在結果上簡單。如何給設計做好減法,讓設計簡單而非簡陋呢?本文作者分享21個簡化設計的方法,一起來看看吧!

Hi,我是彩云。

讓設計的產品體驗簡單好用是我們的目標,但如何給設計做好減法,讓設計簡單而非簡陋,也是我們需要不斷思考的問題。

今天將會在文章中分享21個簡化設計的方法,還包含了20個以上的簡化示意圖,幫你更容易理解簡化這個概念,值得收藏學習!

現如今企業都在不斷追求打造簡單好用的產品,期望在產品中有更多的功能,更新的技術以及更強的能力但仍然能有一個非常輕量和簡單使用體驗。

但通常情況下,做減法反而是最難的事情。

一、如何定義”簡單“?

我們可以把簡單定義為容易理解,不難做到的事情。然而簡單是主觀的,某些事情對某些人來說簡單,但對另一些人來說又會很難。一般來講,我們對任何簡單或復雜的過程形成個人意見,大致分為三個階段:

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

為用戶在實現他們目標的路上消除困難,幫助他們輕松的到達目的地。John Maeda在《簡單法則》一書中提出了在商業、技術和設計中平衡簡單與復雜的十條法則,核心思想就是希望做更少的動作但得到更多。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

《簡單法則》 John Maeda:http://lawsofsimplicity.com/

Maeda是MIT媒體實驗室教授,也是世界著名的圖形設計師,他一直在探索如何重新定義”改進“的概念,使得這個概念不再人云亦云。這本書非常不錯,所以推薦大家去看看。

二、什么是復雜的?

談到簡單的時候,需要考慮到它的反面范圍。簡單或是復雜是比較主觀的感受。經過適當的培訓,即使是造火箭都可能不會那么難。但有幾個因素會使非常簡單的任務復雜化。在產品設計中,應該盡可能地避免以下這些情況:

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

我們應該如何應用到產品設計中?

1)建立產品的核心價值

有許多產品都希望盡可能地滿足所有用戶,然后成為行業中領頭羊。如果你希望你的產品變得簡單,就需要定義產品的核心價值,并且確定你真正想要服務好的用戶群體。不是每一個產品都需要內置一個facebook。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

2)移除掉任何不必要的元素

變簡單最直接的辦法就是深思熟慮地做減法。當你猶豫這個元素要不要拿掉時,拿掉就好。次要信息,不經常使用的控件需要處理,把樣式盡量弱化。就是這么簡單,一旦你使用這個原則后,效果是立竿見影的。只是你需要考慮清楚,哪些需要移除掉。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

簡單不意味著沒有復雜的功能,只是在結果上簡單。簡單是某種程度上描述一個物件和產品的目標及位置。不復雜是說產品本身的功能設計不是雜亂無章的,要做到這一點并不簡單?!啊狫onathan Ive(蘋果的喬納森)說。

3)數據轉換為更直觀的樣式

我們日常設計的大多數產品都聚集在用戶需要理解的大數據上,以便有效地執行他們的日常任務。當你知道用戶對于趨勢和變化更有興趣,把數據可視化會比單純的數字表格對用戶來說更有幫助。在數據圖表中,還可以根據需要顯示更多有價值的信息,并將這些直觀呈現在用戶的面前。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

4)支持快速決策

用戶被各種選擇狂轟濫炸,不得不花時間去理解和決定,給他們增加了不必要的工作。這里可以用一個非常著名的??硕蓙斫忉?,選項增多會增加用戶做決定的時間和精力。所以,如果你想提升用戶體驗,讓用戶感覺到簡單,那么就盡可能地幫助用戶更快地做出決定。盡可能地減少不必要的選擇。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

5)太多的選擇會嚇跑用戶

當前的心理學理論和研究肯定了個人選擇對情感和動機的積極影響。這些發現導致了一種流行的觀念,即選擇越多越好——人類管理選擇的能力和欲望是無限的。但在現實中,研究證明了相反的情況。Jam實驗是消費心理學中最著名的實驗之一,減少消費者的選擇有利于銷售。重要的是,研究表明準確地提供較少的選擇可能會提高你的銷量。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

這個實驗似乎證明了,與選擇較多的顧客相比,選擇較少的顧客購買的可能性是前者的10倍。它一直是選擇過多的一個關鍵例子,即給顧客提供太多的選擇實際上會抑制顧客購買。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

6)在有多個選擇的時候提供建議

當多選不可避免時,試著增加一些建議。給選擇增加推薦選項,或分享其他客戶最喜歡的數據。通過設計清晰地向用戶傳達選項之間的關鍵區別。這種方法通過用于選擇不同套餐的界面。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

7)將用戶的注意力吸引到正確的區域

當你理解用戶實現目標的過程時,每個步驟都有一些更相關的內容,這些內容將幫助你朝著最終目標前進。找到這些關鍵區域并讓用戶能聚集在這些區域上。(彩云注:給操作設定好清晰的優先級)

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

8)使用顏色和排版來傳達內容的層次結構

你應該經常能聽到——”用戶不喜歡閱讀“。這沒錯,我們對能記住和對需要深入了解的東西是有選擇性的。如果你曾經一個字都不愿意讀就選擇同意了用戶協議,你肯定懂我的意思。有許多因素會影響傳達:字體類型、尺寸、字間距、行距、大小寫、顏色。用這些要素來組織內容的結構層次,使用正確的顏色和字體,將能夠增強品牌感,使其更好地被識別,更有吸引力和記憶。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

9)合理的組織能夠幫助系統看起來更簡單好用

讓我們做一個簡單的測試。下面的2張圖片,用秒表來記錄下你大概花多久時間數完所有的黑點。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

結束了嗎?就像你自己會看到的那樣,計算不規則的圓點方塊會花費更多的時間,除此之外,還會給你帶來更多的認知負擔。為什么我們會得到這個結果?因為正方形中有相同數量的點。把這些點擺成一個特殊的矩陣,在視覺上可以幫助掃描,成組的非常好統計。在左邊沒有組織的方塊中,我們必須逐個計算。另外,對于左圖來說,有時候你還可能會統計錯誤,需要再次確認才能放心,太麻煩了。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

組織好的元素不僅僅好認,而且還非常好記。不論是操作什么樣的產品,記住所有控件位置和功能非常重要。讓我們做另一個小練習,一分鐘前,你還在認真的數兩張圖中的點,現在請你回憶下兩個正方形中的每個點的位置。對大多數人來說,回憶這種無序的結構幾乎是不可能的。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

10)將內容分組

簡化一個頁面,有一個簡單的辦法就是把內容進行分組。此時,用戶在處理組信息時,精力耗費很少,而不是要看大量不相關的元素。在元素或元素組周圍添加邊框是創建與周圍元素分離的一種簡單方法。格式塔心理學中有多種分組原則可以幫助物品產生關聯性:接近性、相似性、連續性、封閉性和連通性。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

11)把大任務分解成小步驟,嘗試用一列來布局

現在幾乎每個產品中都有不同的表單,為了收集你的資料。有時候即使去掉所有不必要的東西后,它依然會很復雜。這些表單會讓用戶失去完成的動力。所以我們能做的就是把這個大任務分解成一系列的小任務。眨眼間,把這個過程進行到底似乎變得容易多了。完成小的子任務會給用戶帶來一部分內啡肽和繼續進行的滿足感。在設計這個表單時,用單列布局替代多列布局。單列布局更容易填寫。這樣用戶就不大需要考慮下一步要填什么,只需要沿著直線向下移動填完就好了。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

12)及時告知進度和當前狀態

不確定性讓我們感到焦慮,在操作過程中應該盡可能地給用戶確定的信息。用戶需要知道他現在的位置,下一步要做什么。常駐一個信息進度摘要會是一個非常棒的做法,能讓用戶降低認知壓力,并能方便退回前一步確認信息。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

13)幫用戶自動計算

人類大腦不擅長涉及數字的原始計算。嘗試讓系統自動完成所有計算對用戶來說會有更好的體驗。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

14)采用漸進式呈現復雜信息

漸進呈現是UX設計中更容易讓用戶理解的一種用戶界面設計模式。它涉及到在多個界面上排列信息和動作,這樣就不會讓用戶淹沒在無關信息中,直至優化到所有信息都強相關。漸進呈現屬于從”抽象到具體“的典型概念,包括用戶行為和交互順序。一個非常好的漸進案例就是iOS的嵌套開關設置界面。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

15)設計普遍接受的模式和交互

用戶將大部分時間花在其他產品上。這意味著用戶喜歡用在其他產品上他已有習慣來使用你的產品,他們會對你的產品的外觀和性能有特定的期望。這句話適用于從互聯網產品到你家冰箱的任何數字或實體產品,反映了用戶心態。但這并不意味著你應該停止創新,更多的是評估背離傳統的導航或控制方式是否能讓用戶改變他們的思維模式。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

16)設計一個精簡的新手引導

設計的主要目標是為了將用戶與產品提供的價值聯系起來。任何阻擋在用戶和他實際操作之間的東西都是障礙,除非它服務于功能性需求。首次體驗對于產品來說非常重要,我們人類會很快形成對產品的看法,當我們不滿意就會立即離開。你在第一次操作時,即使是最簡單的任務也可能是一項挑戰。有時在我們操作產品之前需要額外的學習。在數字設計中,用戶期望的是產品應該足夠簡單易懂,他們希望根據需求得到幫助,或者在出現問題時得到幫助。提供上下文幫助,而不是預先為用戶提供學習材料,設計一堆引導頁。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

17)牢記人體工程學和使用產品的環境

簡單,正如我們已經定義的,你可以多么容易地使用產品。人體工程學是設計、產品和系統的考慮因素,以使它們適合操作它們的人。大多數人認為這與座位或汽車控制裝置和儀表的設計有關,事實確實如此。但它的意義遠不止于此。人體工程學適用于任何與人有關的設計,包括數字產品。

1954年,心理學家保羅·菲茨(Paul Fitts)對人體運動系統進行了研究,發現移動到一個目標所需的時間取決于它與目標的距離,與目標的大小成反比。因此,要確保常用元素的尺寸較大,并將它們放置在靠近用戶的常用位置。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

18)支持內聯編輯和自動建議值

刪除每個流程中所有不必要的交互、視圖和步驟。用戶操作系統有一個最佳速度,它被稱為“心流狀態”。不要用彈出窗口打破這種流暢。對于以后可以更改的所有操作/值,盡可能支持內聯編輯。當有大量值可用時,應當自動建議值。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

19)使用智能默認值來減少認知負荷

智能默認設置是給問題預先填入答案,讓用戶更快地完成表單。在定義相關的默認值時,設計師需要理解用戶以及他們將在何種環境下使用產品。這只有通過深入的研究和測試才能實現,從用戶身上學習,并根據用戶的歷史數據和使用模式調整默認值。如果需要明確的選擇,就將默認選項設置為絕大多數用戶(比如90 – 95%)會選擇的選項。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

20)預防錯誤

錯誤消息會帶來很大的壓力,讓用戶覺得他們搞砸了或者不能勝任任務。確保自動檢查輸入的數據,并對不適當的數據輸入提供警報或提醒,以減少錯誤。要么消除容易出錯的條件,要么檢查這些條件,并在用戶提交操作之前向他們提供確認選項。應使用強制功能保護破壞性和不可恢復的操作,以確保用戶意識到他們的選擇將產生的影響。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

21)無障礙設計

作為一名設計師,你的目標是維護易用性,確保你的產品能夠被更廣泛的受眾所訪問。全世界有超過10億人有殘疾。不要把顏色作為傳達信息的唯一視覺手段(彩云注:增加圖標不僅僅是為了好看,也為了提升操作的識別性)。確保文本和背景之間有足夠的對比度,支持鍵盤導航等??稍L問性并不局限于具有某些不同能力的一組用戶,當針對可訪問性進行設計時,你將改善每個使用產品的人的體驗。

如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

三、總結

設計出好用簡單易于理解的產品不容易,但那是一個方向,這些快速的小技巧能夠快速地讓界面變得簡單。如有學到,記得點贊分享給朋友們~

 

原文作者:Taras Bakusevych

原文鏈接:https://uxplanet.org/how-to-simplify-your-design-69d97fde11b9

譯者:彩云Sky,騰訊高級視覺設計師;公眾號:彩云譯設計

本文由@彩云sky 翻譯發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 過多的選擇項可能會讓用戶犯選擇困難癥,會降低用戶的體驗感,提供幾個有明確差異的選項就OK了

    來自廣東 回復
  2. 滿滿干貨!值得收藏,好的產品社交背后也有很多學問。

    來自上海 回復
  3. 簡單的設計不意味著沒有復雜的功能,文中分享的快速小技巧能夠快速地讓界面變得簡單。

    來自廣東 回復
  4. 不復雜是說產品本身的功能設計不是雜亂無章的,要做到這一點并不簡單。喬布斯一語中

    回復
    1. 喬納斯不是喬布斯,哈哈

      來自湖北 回復