7個實用規則,讓你的設計更加簡單直觀

2020-12-25 人人都是產品經理

簡單直觀的設計並不一定非得是極簡的，它同樣可以是豐富而又有趣的。

還記得KISS原則麼？KISS 是 Keep it Simple and Stupid 的縮寫，指的是要將產品做的連白痴都會用，因此也常常被稱為懶人原則。這一設計原則最初在1960年被提出並應用於美國海軍的相關設計。在此後的50多年當中，設計在技術和思路上經歷了翻天覆地的變化，但是KISS原則依然非常重要，並且影響巨大。

絕大多數的平面設計師在剛剛開始接觸設計的時候，或多或少都接觸過KISS原則，但是在具體實施的時候，卻常常不知要如何實施。想要創造一個足夠簡單的設計，可能比你想像的要複雜一些。那麼，今天接下來要說的7個規則，能夠幫你在雜亂的思路裡面，理出一條通路。

1、一個頁面，一個目標

想要設計一個簡單直觀的網站，那麼你應該為每個頁面設定一個目標。每個頁面最終是要引領用戶進行某一個操作，從導航到頁腳都要圍繞這一個目標來設計。

可以是點擊一個連結，也可以是在表單中輸入信息，還可以是查看視頻或者進入一個遊戲。但是不論是哪種，都應該關注單個用戶在這個頁面中的轉化率。

分散用戶注意力的東西太多了，他們可能因為這些幹擾而打斷了原本正準備進行的操作。所以，你要做一個目的性明確的設計，集中精力來引導用戶。每個按鈕上下的設計元素，包括滾動的效果本身，都儘量將用戶導向按鈕、連結等。這種目標上的一致性能夠很好的幫助用戶了解他們需要在網站上做什麼，簡單的選擇往往能夠讓用戶更輕鬆參與進來。

2、堅持使用一兩個字體族

有許多設計規範會推薦用戶在一個設計項目中使用三個甚至更多的字體。不過，將使用的字體縮減到2個字體族當中，會讓整個設計的凝聚力更強。

許多字體族當中，不同的字重能夠創造足夠的視覺對比度。許多字體族當中甚至包含了多種不同樣式的字體，其中有些可選的字體形式感十足，甚至非常適合用來做尺寸超大的標題。

所以，你的主要工作是挑選適合正文用的字體以及用作展示的字體，選擇兩套能夠相互搭配的字體族，那麼你整套設計可用的字體搭配應該都可以搞定了。

接下來你會發現，這樣的字體搭配能夠讓你的整個排版和視覺層次更易於管理控制。

3、使用一致的對齊方式

左對齊，居中，還是靠右對齊，無論你是喜歡哪種，儘量在整個設計當中貫徹這種方式。這種對齊方式的選取不僅僅是文本本身的對齊，還包含了各種其他元素的對齊方式。

Adaptable 的網站在這個事情上就做的很好。儘管輪播圖中的圖片和文本的內容各不相同，但是幾乎都採用了統一的左對齊，文本和行為召喚按鈕也是做對齊，元素與元素之間的間距也很統一，這種一致的美感讓人非常舒適。

左對齊和居中對齊是最常見的兩種對齊的方式，因為這兩種是可讀性最強的排版方式。而在針對較長的文本進行排版的時候，左對齊是首選選項。

4、建立層次

用戶不應該在查看你的網頁的過程中費腦子思考。所以，即使是最簡單的視覺排版，都應該具備足夠清晰的層次。

你的設計應該從主視覺開始。它可以是一個圖像，也可以是一個視頻，同樣可以是一段文本，但不論是哪種，它都應該是給予用戶第一印象的元素。

接下來，通常需要有一些文字內容，告知用戶這個設計或者這個網站是幹啥的，通常，它會以標題的形式和主視覺搭配起來，一同傳遞信息給用戶。

隨後可以增加一些說明性的副標題。此外，還應該提供導航等元素，因為基於用戶的瀏覽習慣，他們會期望看到這些內容，並且已經具備了與之相關的瀏覽習慣。所以，通過這樣層次化的設計，可以讓用戶更便捷地獲取信息。

5、運用空間與留白

不要糾結於留白太多，留白其實是服務於各種設計元素的，它會讓你的設計更好。

如果你想要設計真正簡單直觀的設計，留白是必不可少的組成部分。給每個元素足夠的空間，有空間的襯託，才能讓這些元素被訪客注意到，因此，千萬不要讓整個布局雜亂不堪，而應該創造有視覺焦點的布局。

使用空間竅門在於一致性的把控。為每個元素周圍的留白、文本的字間距、行間距都設定好，然後儘可能保持規則性。如果這樣設計出來的效果看起來不自然，也許你只需要對留白稍加調整就可以了。當你打開自己的設計，視覺自然聚焦到你想要用戶看的地方的時候，你就會知道你的留白和空間設計是爭取的。

6、強化對比度

從色彩到尺寸大小，具有高對比度的設計元素能夠讓整個項目的設計感和精細度得到提升，哪怕是在極簡的設計框架之下。

明亮而又富有對比度的配色是許多跟隨流行的項目所青睞的選擇，因為這樣更容易吸引用戶的注意力。大膽的配色讓一個簡單的設計顯得更加富有設計感，也更加有趣。為了充分的利用色彩的對比度，儘量選擇色輪上相對位置的色彩搭配，並且調整色彩飽和度到合適的狀態。也許你會在其中尋找到意想不到的搭配。

7、使用一致的圖標和元素

設計的一致性是最基本的設計規則，也是最容易被忽略的設計規則，與此同時，它也是許多優秀的設計的秘密所在。有太多的網站採用不匹配的設計元素，導致整個設計陷入尷尬。

所以，創建一整套系統而一致的圖標和UI元素合集與規則是相當有必要的，一旦你完成設定，應該在整個設計項目中貫徹並運用這套UIKit 和規則。

如果你為一個元素確定了色彩，選擇了一個光標懸停的特效，那麼你需要基於使用狀況和用量

Praticca Vending Machines 這個網站就採用了超大的圖標來告知用戶，可以點擊獲取更多的信息。包含+號的彩色圖標沿用了相同的樣式，並且為不同的區塊搭配了不同的色彩，引導用戶去點擊。

結語

簡單直觀的設計並不一定非得是極簡的，它同樣可以是豐富而又有趣的。但是簡單而易用的頁面的設計過程是需要用心做才能達成的，它需要具備高度的可用性和直觀的設計，確保用戶在使用的時候足夠直覺、不會遲疑。

原文作者：CARRIE COUSINS

原文地址：designshack

翻譯：@陳子木

譯文地址：http://www.uisdc.com/7-simple-design-rules

相關焦點

  • 關於設計小廚房和餐廳的11個實用技巧
    當然，如果你掌握訣竅的話，即使是一個小型的廚房 - 餐廳空間也可能看起來很精緻美觀。小面積不是放棄時尚，整潔，精心設計的內飾的理由。如果你仔細思考並付出一點努力。規則很簡單：充分利用所有自由表面，不要害怕嘗試配色方案，並使用經過驗證的技術來直觀地增加空間。你準備好了嗎？我們開始吧！1.抽屜和櫥櫃不夠用嗎？這是專業裝飾師在裝修小廚房 - 餐廳時遇到的最常見問題之一。正確的答案是否定的，還不夠。在一個小房間裡，最大限度地使用每個可用區域的問題尤為重要。
  • 電子海圖在拖網漁船上的應用,讓海洋捕撈更加直觀、安全、簡單
    對於漁船，特別是底層拖網漁船，如果現在你還把電子海圖，僅僅當作紙海圖的替代品，那真的是OUT了。電子海圖經歷了幾十年的發展，層出不窮的黑科技，絕對令你大開眼界！常規功能我就不提了，我們看有特色的、實用的：繪製海底(bathy recording)要說底拖網漁船作業最怕的是啥？那肯定是海底上各式各樣的障礙物，大石頭、突兀的小山包、沉船啊一類的，一個不小心拖到上面，輕則魚跑網破，上來網費功夫一番修補，重則網具丟失，損失慘重。
  • 10個最新手機美食APP界面設計欣賞
    而且，其簡單整潔的界面設計，易於用戶更加方便的查看和預覽各式菜譜材料，製作步驟和流程，簡單易懂，直觀清晰。此外，設計師為方便各類設計師，產品經理或客戶更深層次地了解此款軟體的特點和價值，還在其Behance介紹頁面展示了軟體原型圖，這也成為設計師了解和學習這類美食軟體界面設計的重要資料。
  • 職場Excel:教你3個簡單實用的Highlight數據的技巧
    在我的日常工作中，在Excel為低於某個數值的設定提醒是一項非常必要的實用技巧。然而很多職場Excel人士卻完全不知道如何著手進行設置。為了解決大家的燃眉之需，我現在借著回答題主這個問題的機會給大家簡單介紹3個實用技巧。
  • 如何玩轉人物設計!7個超級實用的繪畫初學者漫畫人物設計技巧
    想必這些都是繪畫初學者們經常在想的問題吧，就是不知道如何才能學習好繪畫，然後繪畫出自己想要繪畫的東西 那麼今天靈貓課堂就在網絡上收集整理了一些關於如何設計人物的教程給大家，如何玩轉人物設計！7個超級實用的繪畫初學者漫畫人物設計技巧！教程非常簡單，趕緊來看看叭：
  • 產品設計的有趣變革:從「Intuitive(直觀)」到「Shareable(可分享...
    （早先的 Microsoft Excel 工具欄） 微軟花了大量的時間研究如何使軟體設計更加直觀。這就是工具欄和菜單欄之類的東西，它們很醜，但為了工作效率，確實足夠直觀。而且，如果這些設計還不夠簡單，他們會給出說明，一步一步地教使用者。 在那個年代，蘋果花了很多時間研究如何使其作業系統儘可能直觀。蘋果在 1987 年出版了一本關於「人機界面操作」的指南，這本書在 Macintosh 時代產生了巨大的影響。
  • 你家臥室飄窗還只是個擺設?看看人家都這樣設計了,實用又好看!
    你喜歡飄窗嗎？相信有不少朋友的答案都跟小編一樣吧，一個實用又美觀的飄窗誰不愛呢！那下面我們來看一下臥室裡的飄窗怎樣設計，才最最實用又美觀吧！可能對於有些朋友來說，臥室裡的飄窗也只是一個裝飾，當然這也許是有原因，其一可能是他們房子夠大，不需要多餘的收納；其二就是他們根本不知道臥室裡的飄窗還可以設計得很實用又美觀。那麼臥室裡的飄窗怎麼設計好呢？這裡我們主要是從實用性以及美觀角度來簡單介紹一下。
  • 臥室衣櫃別樣設計,美觀又實用,讓臥室更加多姿多彩
    衣櫃是家裝必備的家具，無論是獨立的衣帽間，還是臥室衣櫃，衣櫃合理設計，不僅收納性強，還具有一定美觀性。 看看臥室衣櫃的別樣設計，美觀又實用，讓臥室更加多姿多彩。臥室組合衣櫃衣櫃+書桌衣櫃搭配書桌，兒童房常用的家具組合，一半衣櫃一半書桌，方便孩子收納衣物玩具等物品，還不影響孩子學習，一舉兩得十分實用。
  • 《新東方·英文語法有規則:151個一學就會的語法規則》,日本暢銷不衰的英語語法讀本,符合亞洲英語學習者的學習習慣.
    《新東方·英文語法有規則：151個一學就會的語法規則》，日本暢銷不衰的英語語法讀本，符合亞洲英語學習者的學習習慣。本書將重點放在解釋「為什麼」上，每章分成Part 1「概念」→Part 2「理解」→Part3「進階」三個學習步驟，使用簡單的文字來解釋語法概念，再搭配生動有趣的插圖，通過視覺以直觀的方式讓讀者快速掌握語法的本質。
  • 簡單2步做出令人賞心悅目的「進度表」,表格立刻變直觀、漂亮!
    辦公絕招如果每天給老闆遞上的文件都是千篇一律，會讓人感覺是一種非常枯燥和無趣的事，那麼今天咱們為了能夠打破一下千篇一律的工作表格咱們只需要簡單的2個步驟就可以讓你的表格立刻變得更直觀、更漂亮，這樣做既能減少對一成不變的工作表格排斥力也更能體現出你的特別之處。
  • 發現一個處理PPT結構圖的好方法,用魚骨設計,內容清晰又直觀!
    顯然，這種魚骨分析圖，並不適合使用太複雜的效果設計，不然只會增加頁面的負擔。從而增加觀眾對內容的疲勞感，比如下面這頁多組魚骨分析圖。完全可以將其調整的更加直觀一點，首先，將內容規整一下，重新分組。其次，可以使用一個簡單且有設計感的魚骨骨架設計，並調整為上下結構展示。最後，再用【一邊倒】的方法調整內容，最好不要將內容交叉排版。除此之外，你還可以調整內容的方向，其實就是文字內容左對齊或右對齊的排版效果。
  • 數據太多容易看錯,可以設置聚光燈效果,數據閱讀更加直觀
    Hello，大家好今天跟大家分享下我們如何在excel中實現聚光燈效果，所謂聚光燈效果就是當我們選擇一個單元格的時候會出現一個高亮的交叉的十字，當數據非常多的時候這樣更加方便我們閱讀數據，讓數據閱讀更加直觀，效果如下圖一、cell函數
  • 家居最重要的就是方便實用,這樣設計,讓生活變得更加舒適
    簡約風格的，簡約不等於簡單，現在很多人都在追求家居的時髦， 在裝修設計中，可以看到在細節處透露對精緻生活的考究。黑色的小柜子搭配上白色大理石的臺面，這樣的白色大理石紋路很漂亮。風格主體是以簡單實用為主，並且可以看到沒有很多的造型設計， 生活並不單調，花點心思，簡單的生活也能過成詩。
  • 2層板設計需要養成的7個好習慣
    如果用麵包板/杜邦線連接就能夠讓你的電路正常工作，那麼用電路板來實現就不用考慮太多，只需要做到儘可能低的成本、方便生產和測試即可。但如果性能很重要，用麵包板的簡單互連無法滿足要求，或者你想養成良好的設計習慣，即便設計2層板，你也需要記住如下7個設計規則。多數的2層電路板很難達到非常高的性能。
  • 小戶型廚房別裝吊櫃了,現在這樣設計更加實用,太聰明了
    小戶型廚房別裝吊櫃了，現在這樣設計更加實用，太聰明了。隨著時代的不斷發展，人們經濟水平越來越高，對於家居的裝修我們都有了很高的要求，希望自己的新房是既美觀又實用的。為了能夠早日實現買房的夢想，讓自己和家人在大城市中居住得更加安穩舒適，人們都會選擇貸款購買一套小戶型的房子，以這種方式購買新房的話，可以減輕經濟負擔，讓自己和家人生活輕鬆更多。不過，我們面對小戶型的裝修就要做好面對各種裝修難題的準備，畢竟小戶型空間面積太有限了，想要打造出理想的裝修效果著實不易。
  • 鞋櫃怎麼設計?11條實用小技巧,讓鞋櫃變得簡單又實用!
    但是怎麼設計好鞋櫃，讓鞋櫃變得既實用，同時又美觀，這就是大雄今天要教大家的小技巧。實用小技巧——鞋櫃容量要大1.在條件允許的情況下，鞋櫃儘量做到頂。鞋櫃做到頂有什麼好處？大雄建議，如果入門鞋櫃足夠大，可以在鞋柜上專門預留一塊位置，設計一個卡座，平時換鞋直接坐在卡座上。如果鞋櫃不是很大，也要在門口附近留一個換鞋凳，方便使用。實用小技巧——鞋櫃細節要考慮好7.鞋櫃卡座後面安置幾個掛鈎。
  • 如何挑選紋身設計 - 5個基本規則
    如何挑選紋身設計 - 5個基本規則如何挑選紋身的想法？你做出了紋身的決定，但你不知道從什麼開始？你想在哪裡畫畫 - 你的手臂，背部，前臂，胸部，腿部或身體的任何其他部位？所有這些都只是供您決定，但是，在紋身選擇期間，您應該更好地遵循幾個主要規則和原則。史蒂芬詹姆斯選擇紋身設計時你必須知道的五件事。
  • 7大原則,帶你設計出更優秀的圖標
    想要設計一套高質量的圖標，就需要一套成熟的技巧、訓練有素的眼睛、不斷的練習和臨摹。而就將通過7大原則和大量的案例來說明優秀圖標的特點，使你了解優秀圖標的共性，設計出更優秀的圖標。Prime儀錶盤上的圖標設計如上圖所示，你知道他們所傳達的意思嗎？駕駛員由於長期開車而了解到他們的意思，但是其中一些圖標並不直觀，甚至需要一本說明手冊來解釋其圖標的含義。
  • 20個技巧和套路!打造出色的UI圖表設計
    設計時，也需要多次查看和確認：選擇的圖表類型是否能夠完美呈現各類軟體數據。為確保選擇的圖表類型準確無誤，可以嘗試通過行動裝置打開此圖表設計進行測試。看看， 作為用戶，你是否能夠輕鬆理解圖表上展示的所有信息。而且，需要注意的是：一定情境下，使用2-3個圖表分別展示相關數據，會比僅僅使用單個圖表更加簡潔直觀。
  • 為什麼你的圖標設計總是差點「感覺」?
    編者按：設計原則總是看起來簡單抽象不言自明的，但是在細分的設計領域，這些原則其實有著各自不同適用情況，有著「特定的條件」。圖標設計，就是如此。今天的這篇文章，來自專業的圖標設計師 Helena Zhang，她結合自己製作 Phosphor 系列圖標的經驗，來分享她對於圖標設計原則的理解。