該有的視覺元素全都有,設計不好到底差在哪裡?

小時候我們很多經驗都是來自於寓言故事,故事總能幫你更好地理解一些事情和道理。關於設計,這個道理同樣適用。今天的文章,我們就跟著一個設計師的經歷來學點什麼吧。

我有一個朋友,名字叫做 Jimmy,這的確是一個很普遍的名字。當我認識他的時候,他正供職於一家名為 Shmuckle 的公司,而他正是這家公司的設計師。和所有的設計師一樣,他日思夜想夢寐以求的,是成為一名著名的設計師,而喬布斯的經歷對他有著不可磨滅的影響。Jimmy 和很多設計師一樣,著迷喬教主。好在 Jimmy 的崇拜並不是停留在嘴上,而是身體力行,力圖在公司裡面推行好的設計。在 Jimmy 的眼中,好的設計應該是直觀的、創新且令人愉悅的。

當然,故事的發展如果總是一帆風順就沒有意思了。Jimmy 果然一如正常的劇情推進……他碰到障礙了。

該有的視覺元素全都有,設計不好到底差在哪裡?

這一次,Jimmy 正在執行一個重要的項目,這個項目的成敗將會直接影響到他的職業生涯。這次的任務,他需要為他們公司的一款產品,重新設計整個控制面板。而就在這次的項目當中,Jimmy 發現他沒有辦法拿出一套足夠優秀的解決方案。好在他還有 Plan B,那就是重新找靈感。Jimmy 開始重新播放他最喜歡的設計類的視頻,閱讀曾經給他啟發的文章,收聽其他同行所開設的播客,以期在其中找到感覺或者靈感。

該有的視覺元素全都有,設計不好到底差在哪裡?

可惜,靈感並沒有如期而至。局面尷尬了。

就在此刻,援手到了。Sarah 是公司的資深設計師,正巧這個時候路過 Jimmy 的工位,看到了 Jimmy 糾結掙扎的樣子。這是多麼熟悉的場景啊,她早年入行的時候,同樣經歷過這樣的狀態,為求一好設計而痛苦不已。如今,她已經能夠輕鬆駕馭不同的需求,足以應對複雜多變的設計項目。

該有的視覺元素全都有,設計不好到底差在哪裡?

「Hey Jimmy,老遠就看到你正在揪頭髮,看樣子正在構思新設計吧,瞧你這個狀態,應該不太順利吧?」

「誒,客戶說讓我給他們重新設計整個控制面板。他們覺得不夠好使,希望新的控制面板能夠更好展示信息,提升效率,最好再把幾個比較明顯的可訪問性問題給解決一下。但是我怎麼設計……都覺得不對。客戶那邊有不少人參與了測試,有人覺得挺棒的,有人又非常討厭,還有一部分直接說還得接著改。現在,我覺得無能為力,不知道要怎麼弄了。」Jimmy 保持著撓頭的姿勢,盯著屏幕說道。

「別糾結,」Sarah 微笑道:「如果一直盯著問題解決問題是常常會陷入這樣的困境的,解決方案其實並不複雜,你需要從根子上來想辦法。只要讓整個設計方案貼合規則基礎穩固了,問題就會迎刃而解了。其實,關鍵也就是幾個基本的設計原則。」

該有的視覺元素全都有,設計不好到底差在哪裡?

「雖然這話經常聽到,但是真的能行?」Jimmy 狐疑地盯著 Sarah,思忖兩秒感覺到大姐頭這是要傳授秘籍,便摸過小本子,端正坐姿,準備做筆記:「那麼,都有哪些原則呢?」

該有的視覺元素全都有,設計不好到底差在哪裡?

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,說道:「下樓散步吧,咱們邊走邊聊。」

「其實,在產品完成之後,是需要基於幾個基本的原則來重新審視和調整設計的。」Sarah 喝了一口咖啡,慢慢地開始說。

該有的視覺元素全都有,設計不好到底差在哪裡?

保持清晰

Jimmy,如果腦子裡面的思路沒有梳理清晰,很難做出條理清晰的產品的。因此,在設計產品之前,先應當消除思維中的混亂,有幾個事情,在設計的過程中要始終保持關注:

  • 業務目標,客戶的問題和需要的功能則會催生設計,而這幾個因素之間是存在關係的。
  • 永遠不要為了好看而犧牲功能。
  • 下一步要做的事情始終要是不言自明的。
  • 對於最重要的內容,要藉助負空間、色彩、字體、圖形和其他的 UI 元素來進行突出展示的。
  • 各種尺寸的文本都應該清晰可見。
  • 圖標應該精確而銳利。
  • 除此之外,要讓設計保持微妙而恰到好處。
  • 通過設計,你的用戶應該本能的知道他在哪裡,以及該做什麼。
該有的視覺元素全都有,設計不好到底差在哪裡?

產品的外觀最終都是在清晰的設計(或者不夠清晰的設計)之下的副產物。清晰的設計意圖,最終會轉化為清晰的產品設計。——Massimo Vignelli

「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫道,一個混亂而複雜的產品始終是源自於製造者本身的混亂,說明這個人本身內心深處心態複雜而想法混亂。」Sarah 說道。Jimmy 此刻若有所思。

該有的視覺元素全都有,設計不好到底差在哪裡?

可操作的界面

「接下來的這一點也同樣很重要。我們設計的數字產品必須清晰,也要專注於當前的任務,一個交互性強、可操作性優秀的 APP 才是用戶所需要的,而要做到這一點,屏幕上的內容應當始終是最新的,並且始終保持較高的相關性。與此同時,APP 也應當作為用戶意圖的延伸。如果用戶打開了你的 APP,想要解決某個問題,執行某個任務,而你的 APP 做不到這一點,那麼情況就很糟糕了。」Sarah 說道。

她停了幾秒鐘,梳理了一下思路,繼續說道:「你看,我們所做的一切都是為了確保我們的方案,能夠在正確的環境中,面對著對的用戶,解決亟需解決的問題。當然,我們要經歷很多次的迭代,才能靠近這一目標。」

該有的視覺元素全都有,設計不好到底差在哪裡?

該有的視覺元素全都有,設計不好到底差在哪裡?

主觀的願景

「許多設計師和開發者都在說,APP 應該靈活,應該滿足所有客戶的需求。好吧,Jimmy,這些說法都是胡說八道的。但是有一個說法很真實,也需要你時刻謹記:試圖取悅每個人只會帶來無盡的壓力和痛苦,讓你沮喪,失去資源。所以,不要害怕失去一部分用戶,真正需要擔心的是失去願景和遠見。」

「一個偉大的而足夠優秀的數字產品,必須始終清楚它到底是服務於誰的。只有牢記真正的用戶,明白他們的需求,才能開發出真正有效的解決方案。最好的數字產品當中,都是藏著願景的。」Sarah 和 Jimmy 走到了大樓的窗戶附近,看著外面來往的人流,Jimmy 忍不住問到:「那其他的用戶呢?」Sarah 笑著回答:「當我們滿足目前的目標之後,才能顧的上其他的人。我們的目標用戶才是核心,其他的人不喜歡,和我們的願景不匹配,也不用操心。市場上會有其他的應用或者服務能夠滿足他們,讓他們高興,而我們總是隻能身處一個陣營,你不可能什麼都擁有。」Sarah 笑著回答 Jimmy 的疑問。

該有的視覺元素全都有,設計不好到底差在哪裡?

當人們尋找軟件和服務的時候,他們要的並不是功能,他們要的是解決問題的方法,一個和自己相匹配的願景。——37Signals《Getting Real》

該有的視覺元素全都有,設計不好到底差在哪裡?

反饋系統

下一個原則,也是一個很重要的注意事項,那就是反饋。反饋能夠幫用戶確定操作是否執行了,明白結果是否發生,讓用戶明白當前的情況:

  • 交互發生時,相應的交互元素應該被凸顯出來
  • 進度指示控件應該持續地顯示當前狀態
  • 動畫和聲音的加入有助於用戶理解交互的狀態和結果

「我想你應該知道,即使技術如此的進步,人類本身的生物性決定了我們依然是依靠反饋來確知互動的結果和狀態的。我們的身體(視覺或者觸感)需要感受到反饋,再像大腦發出信號,而虛擬的界面背後到底在發生什麼,需要全面的交互設計傳遞出來,只有這樣用戶才不會費勁巴拉地去思考之前的點擊或者滑動交互是否操作成功了。反饋給用戶的信息也應該是能夠被輕鬆理解的,用戶不應該在這個事情上再費勁去思考了。因此,你手邊應該有關於心理學、行為學這類能夠揭示人類思考的圖書,因為它們能夠幫你提升技能。」Sarah 喝了一口咖啡,潤了潤嗓子,帶著 Jimmy 又溜達上樓,回到了辦公室。

該有的視覺元素全都有,設計不好到底差在哪裡?

善用隱喻

「隱喻——我這裡說的並不是文學中的隱喻,」Sarah 又提到了一個看似無用但是經常被說起的概念:「你看,UI界面中的設計元素和交互方式和我們的現實生活中的元素和交互方式是如此的相似,這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數字產品當中。這樣一來,用戶會更快地學會和理解。」

該有的視覺元素全都有,設計不好到底差在哪裡?

「正是因為隱喻的存在,現實的經驗和虛擬的交互產生了關聯,用戶交互因此而更加自然地發生。視線隨著被精心設計的佈局而遊移到重點上,用戶會下意識地點擊被高亮顯示的、和現實按鈕差不多的交互控件,他們還會下意識地在虛擬的屏幕上滑動,在界面之前自然遊走。因此,你有必要了解你的核心用戶每天都在使用哪些 APP,他們都是如何交互的。這有助於你吸收經驗,消除不良的體驗,創造舒適的交互,降低學習的壓力,更好地轉化。」Sarah 一邊說著,一邊下意識地模擬著交互並解釋道。

該有的視覺元素全都有,設計不好到底差在哪裡?

內容的一致性

「接下來我們還是用案例來說明一下,會更容易理解。」說著 Sarah 坐到椅子上,並且打開電腦屏幕,說道:「比如我們要做一個日曆,你認為它應該是網格,還是做成列表?」Jimmy 撓頭想了一下,遲疑道:「恩……我們應該堅持使用網格的樣式。它更加緊湊也更加有條理,我說的對嗎?」

「其實這取決於用戶的主要目標是什麼。如果這個日曆元素是出現在報告文檔當中,應該是用網格的樣式還是列表的樣式呢?一樣的,這要看情況。我們是否要在每個應用中都使用全局導航?同樣是需要基於上下文情況來決定的。一致的設計不止是表面樣式上的一致,還需要從需求、內容、用戶使用場景和體驗上來保持一致性。如果在特定的情況下,獨特的設計能夠帶來更大的價值,那麼這是有意義的,這種特殊情況下不同是有必要的。」Sarah 細心地為 Jimmy 解釋道。

良好的設計,應該是特定語境經過評估後定製的副產物,而不是脫離使用場景而憑空創造出來的,否則,無論多麼炫酷都是不合時宜的。——Massimo Vignelli

該有的視覺元素全都有,設計不好到底差在哪裡?

防禦性設計

「最後要說的,是防禦性設計。」Sarah 轉身對著 Jimmy,然後說道最後一個規則。

「防禦性設計?什麼東西?」Jimmy 感覺今天學到了不少,最後這個原則也被他寫到小本子上了。「這個啊,也就是大家常說的直覺性設計。」Sarah 微微一笑。

「我知道!喬布斯以前就經常說這個概念!」Jimmy 終於找到一個他足夠熟悉的概念,興奮不已。

「可是,你真的知道什麼是直覺性的設計麼?」Sarah 看著興奮的 Jimmy 賣了個關子。

「預測用戶行為?然後在用戶要執行下一個操作之前幫他解決需求?」Jimmy 狐疑地問道。

「是也不是。它並不是讓你去預測用戶的行為,防禦性設計是為了避免出錯。無論你如何謹慎地去做設計,總會有錯誤發生,無論你做過多少調研,你計劃有多麼妥帖,你的產品總會需要一個備用方案來規避問題。」Sarah 說道:「防禦性設計,是讓你找到可能會出現的問題。」

相信我,你的產品如果給了用戶負面的體驗,他們絕對不會忘記。

「我還是沒明白你的意思……」Jimmy 習慣性地撓頭。Sarah 耐心地開始解釋:「以開車為例來說明這個事兒吧。當你開車的時候,總會盡量避免道路上各種可能出現的危險情況,比如魯莽駕駛的大貨車,三心二意橫穿馬路的行人,懵懂無知在路邊打鬧的兒童,甚至野外竄上馬路的野鹿,等等。同樣的,作為設計師,我們需要預料到可能會出現的問題,以及始終保持專注來修復這些問題。這樣我們就不會破壞整個用戶體驗。我們要有良好的防禦性的設計意識,維持住體驗,改善體驗。」Sarah 說到這個地方的時候,Jimmy 感覺她身上散發著某種光芒。

該有的視覺元素全都有,設計不好到底差在哪裡?

然後 Sarah 起身,帶著 Jimmy 回到他的工位。「怎麼樣,這些東西你都記下來了嗎?」Sarah 打趣地歪著頭看著低著頭還在琢磨的 Jimmy,如同大男孩一樣的 Jimmy 驚訝地抬頭問道:「什麼意思?這就是全部嘛?難道只有這些?」

Sarah 呼出一口氣,微笑著對 Jimmy 說道:「好了好了,設計原則、規則、規範、技巧有太多,可是對於每個人,每個公司而言,都有屬於自己的一套方法和策略。你可以盡興地去探索,但是即使你不知道全部,也可以藉助你所熟知的幾個原則和策略,拿出足夠優秀的設計。我把我最熟悉的、掌握地最嫻熟、體會最深刻的幾個原則分享給你,它們足以幫你開啟一條走向好設計的道路,我覺得你要是真的體會到了,就已經能夠拿出比別人更好的東西了。其他的設計原則,只要你有耐心和時間,還可以繼續探索。該工作啦。」

尾聲

就像 Sarah 說的,設計原則太多了,誰又規定死了具體有幾條呢?每個人心中的哈姆雷特都不一樣,每個人眼裡的哈利波特又何嘗是一樣的呢?

最重要的問題在於,許多人知道原則,卻並不會在設計項目當中運用它們。洞悉每個設計項目當中的重點,瞭解客戶的需求,明白首要的設計目標,在產品和用戶之間,找到平衡點,用心地思考,利用好設計原則這一利器。


分享到:


相關文章: