[譯] 顧慮越少,設計越好。

  • 原文地址:Think Less. Design Better.
  • 原文作者:Christian Miller
  • 譯文出自:掘金翻譯計劃
  • 譯者:Siegen
  • 校對者:jiaowoyongqi, Newton

在設計過程中,存在的可能性越多,需要進行的思考就越多。

美國心理學家 Barry Schwartz 在 The Paradox Of Choice 這本書中寫到,排除一些選擇可以大幅度的減少焦慮。

最優解不是成為一個完美主義者,而是讓最為人所贊同的決定變得可行,這可以讓我們共同創造出最佳體驗。

1. 限制變數

為了製作出高度精確的概念,如果我們要考慮所有潛在的變數,那將會有很多,而如果我們在早期就限制和定義這些變數,製作過程會變得很明朗。

有了這個經驗,限定某些變數組之後,我們預測在創造過程中如何產生幾倍的效果變得更加簡單了。

減少選擇不會導致獨創性的減少。我們假設把圍繞預先制定好的規則來創造概念作為一個限制,但是作為設計者我們可以創建我們自己的規則,完全掌控創造它們的過程。

尺寸與間距

UI 設計的每個方面都需要圍繞一個系統進行,以此來改善節奏感並在一個項目成長的時候幫助保持尺寸與間距的一致性。一個我愛用的像這樣的系統是 modular scale,它可以使制定尺寸變得便利它可以通過任意指定比列來測量、設定某個元素或者某個整體中負空間的尺寸。

一旦我們採用了某個比例,modular scale 會使得定義尺寸和間距變得更加簡單。

儘管它可以在柵格,排版,垂直空間以及一個布局的綜合方面減少變數,來使這個設計達到一個易操作的層次,但是它也提供了令人愉悅的美感和韻律。設計 UI 相當容易。

柵格

柵格系統是一個絕佳的設計方法,當把內容實現成具體的 UI 界面的時候,它不僅可以對頁面內容組織的方式加以限制,還可以簡化實現方式。但是,柵格經常被不加思考的採用,變成了一個被當作萬金油的方案。大多數設計師都沒有意識到,相對於使用萬金油方案,專門設計一款適用於你產品的柵格系統會是更好的一個方案。

柵格系統可以減少影響布局的變數。

這意味著理想情況下應該提前對內容的大致情況有一個清晰的了解,以便于思考如何設計出最適合於特定內容的柵格系統。根據預存的資源和品牌指南來考慮商業限制,例如一個擁有具體空間規則和要求的 logo,或者可能是有著具體的固定單元的廣告。

內容的類型也是一個因素。設計時還需要考慮到內容的不同類型,如商品包裝、新聞出版物、博客或者是簡單的引導頁,它們之間的差異十分之大。要考慮到布局是以圖片為主還是以文字為主。要理解 eye-scanning patterns 和它們是如何對一個視覺層次產生作用,這會對設計很有幫助,

對商業和內容的重要限制理解的越深刻,採用柵格系統並作出布局決定就越容易。

字體

我覺得字體是 UI 設計最重要的方面,因為它佔據了網頁的 95%,是信息交流的驅動力量。

儘管像 modular scale 這樣的系統可以應用在尺寸和行距上,但是字體族和風格是被限制的。一個 UI 布局不應該超過兩個字體類型和多個字重。規則可以拓展到如何應對摘要和標題。

顏色

使用調色板很容易過度用心。幾種色調就可以產生一個充足並且一致的視覺效果。通常在一開始我們有 5 種色卡就夠了。

諸如 Adobe Color CC 之類的工具可以使預定義一個調色板變得非常容易。

大部分品牌應該採用了一個主要的或者重要的顏色以及一些中立的或者差異的色調來實現。一開始的時候,界面中並不需要用到 15 種不同明度的顏色。最佳的做法應該是從單一的明度起步然後逐步增加更多不同的明度。

圖片

我們如何把圖片插入到 UI 中在很大程度上是由內容的上下文所決定的。如果我們對那個有一個大致的了解,我們可以為我們的圖片創建一個起始點,這些圖片有著比例,尺寸,形狀和論述等等的變數。我們可能會發現我們不需要那麼多。

限制我們圖片的變數可以強制的獲得更好的一致性,並且使得在長期過程中管理圖片資源變得更加容易。這對標誌來說也是一樣。

對於圖片的比例和尺寸我們確實需要的有多少變數?

2. 儘早的創建一個風格指南

作為一個概念上的 UI 項目,創建和維護一個風格指南或者模式庫變得越來越重要。這將建立設計準則來幫助項目擴展,維護節奏感和一致性。如果我們正在事先定義變數,為它們寫文檔是一個好的方法。相比於沒有文檔來說,擁有一份文檔在未來進行決策的時候會更加容易。

根據項目的情況,有時候創建一個風格指南是一件奢侈的事,經常需要依據未來的計划進行改動。這也是為什麼大部分風格指南都在最後一分鐘或者是在項目完成後才準備好,當然這仍然是個好習慣。但是對於風格指南來說有著大量致力於預期設計和發展的主張和論證,它可以為早期概念化打好堅實基礎提供幫助。

在開始的時候正確創建一個基本的風格指南不僅可以早早建立原則來減少設計抉擇,還可以作為一個基礎設施幫助參與和添加主要的內容。

在開始的時候製作一個東西不意味著它需要是完整的——可以差的很遠。這些風格在早期總是會演變出許多的可能性,一個項目變得越大,它的邊界也就越清晰越嚴謹。

3. 基於模塊的優先順序和適應性

在基於模塊的設計系統中,例如 Brad Frost 的原子設計,布局可以在具體的關鍵區域外進行制定。模塊可以在各種各樣的布局裡面重複使用。界面被當作系統對待而不是頁面,使用基於模式的設計和部署是進程中的一個重要環節。

這是一個很好的方法,它使得 UI 設計更加容易管理,但是為了使它更加有效率我們不得不優先考慮關鍵區域,並讓關鍵區域周圍的所有內容去適應它們。這樣將會相應的確定視覺連貫性。

確定關鍵區域

我們的設計應該圍繞重要的部分進行。每個區域的優先順序是由它在界面內的內容或者功能所決定的,這是這個問題基本答案。

通過首先聚焦於重要的區域,我們正在減少此後的設計抉擇,因為隨後的區域不得不進行變通來適應已經建立的周圍內容。

聚焦於關鍵區域

一旦高優先順序的區域已經被確定下來,對於這些關鍵的區域需要高度關注並且將它們完成。這個觀點主要是指,在適應次要區域之前,我們需要確保它們是簡單可用並且符合所有的要求的。

4. 讓它為每個人工作

幾千年來設計師們都一直儘力做一件事——高效的溝通。我們持續不斷地在視覺和聽覺方面,迭代重構一個對於用戶而言更為友好的溝通方式。

隨著我們從廣闊的潛在用戶群不斷的獲得信息,為了從中得到儘可能多類型的人群信息,優化獲取方式變得迫在眉睫。

無障礙使用是一件因禍得福的事情

迎合更廣泛的用戶聽起來意味著更多的工作,把無障礙使用視作為革新的障礙是很誘人的。但是,遵循最新的標準會是件因禍得福的事,尤其是如果它們已經成為習慣了。

在設計期間的例子包括一系列的要求——我們需要一個最小的字體尺寸用在文本主體,或者是正文和背景資料之間的一些有意義的差異,或者是觸摸設備上更大的鏈接區域。

這不僅僅是關於殘障人士的。

無障礙使用不僅僅是為了服務殘障人士,一些人可能會這樣暗示,但其實也是服務於那些用著老式設備和瀏覽器的用戶,他們的設備往往無法支持所有的最新特效和提升。意識到這些標準並且遵守它們將會很自然的減少設計抉擇。

5. 使用經過考驗和測試的模式

事實是,當用戶遵循數百個普遍的設計模式的時候,這些設計模式他們已經從多年的使用和了解過程中完全吸收了,所以現在用戶憑藉直覺發現界面。一旦我們開始打破傳統模式並且發展新的趨勢,我們會發現讓一種新模式完全變成用戶的直覺會花費大量的時間。

製作原創的 UI 模式是可行的,但是我們不應該對常見的方式心懷顧忌——畢竟它們的成功是有理由的。

少考慮重新創造,聚焦於美感是我們的一線希望。基於已建立的模式進行原創的工作仍然是可行的。

對於成功的設計模式我們了解和融入的越多,作為設計師我們需要做的選擇就越少。我們不需要考慮什麼可能會起作用,轉而去考慮什麼將會起作用。

最後的注意事項

對於這些方法中的一部分方法來說,單獨使用可能對於減少我們的思考量和抉擇幫助不大,或者說無法大幅度的改善我們的設計。但是把它們合併在一起,持續獲取好的反饋,可以使得設計更好 UI 的這件事變得相當容易。

想閱讀更多掘金翻譯計劃的優質譯文,快在 GitHub 上 Star 我們吧~

推薦閱讀:

Data Design 數據可視化設計素材
Photoshop 在圖片中心創建矩形選區?
如何優雅得體地吐槽這個字體?
母親節&父親節創意文案+設計[原創]

TAG:设计 | 设计师 | 用户界面设计 |