該有的視覺(jué)元素全都有,設(shè)計(jì)不好到底差在哪里?

2018-8-15    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

小時(shí)候我們很多經(jīng)驗(yàn)都是來(lái)自于寓言故事,故事總能幫你更好地理解一些事情和道理。關(guān)于設(shè)計(jì),這個(gè)道理同樣適用。今天的文章,我們就跟著一個(gè)設(shè)計(jì)師的經(jīng)歷來(lái)學(xué)點(diǎn)什么吧。

我有一個(gè)朋友,名字叫做 Jimmy,這的確是一個(gè)很普遍的名字。當(dāng)我認(rèn)識(shí)他的時(shí)候,他正供職于一家名為 Shmuckle 的公司,而他正是這家公司的設(shè)計(jì)師。和所有的設(shè)計(jì)師一樣,他日思夜想夢(mèng)寐以求的,是成為一名著名的設(shè)計(jì)師,而喬布斯的經(jīng)歷對(duì)他有著不可磨滅的影響。Jimmy 和很多設(shè)計(jì)師一樣,著迷喬教主。好在 Jimmy 的崇拜并不是停留在嘴上,而是身體力行,力圖在公司里面推行好的設(shè)計(jì)。在 Jimmy 的眼中,好的設(shè)計(jì)應(yīng)該是直觀(guān)的、創(chuàng)新且令人愉悅的。

當(dāng)然,故事的發(fā)展如果總是一帆風(fēng)順就沒(méi)有意思了。Jimmy 果然一如正常的劇情推進(jìn)……他碰到障礙了。

這一次,Jimmy 正在執(zhí)行一個(gè)重要的項(xiàng)目,這個(gè)項(xiàng)目的成敗將會(huì)直接影響到他的職業(yè)生涯。這次的任務(wù),他需要為他們公司的一款產(chǎn)品,重新設(shè)計(jì)整個(gè)控制面板。而就在這次的項(xiàng)目當(dāng)中,Jimmy 發(fā)現(xiàn)他沒(méi)有辦法拿出一套足夠優(yōu)秀的解決方案。好在他還有 Plan B,那就是重新找靈感。Jimmy 開(kāi)始重新播放他最喜歡的設(shè)計(jì)類(lèi)的視頻,閱讀曾經(jīng)給他啟發(fā)的文章,收聽(tīng)其他同行所開(kāi)設(shè)的播客,以期在其中找到感覺(jué)或者靈感。

可惜,靈感并沒(méi)有如期而至。局面尷尬了。

就在此刻,援手到了。Sarah 是公司的資深設(shè)計(jì)師,正巧這個(gè)時(shí)候路過(guò) Jimmy 的工位,看到了 Jimmy 糾結(jié)掙扎的樣子。這是多么熟悉的場(chǎng)景啊,她早年入行的時(shí)候,同樣經(jīng)歷過(guò)這樣的狀態(tài),為求一好設(shè)計(jì)而痛苦不已。如今,她已經(jīng)能夠輕松駕馭不同的需求,足以應(yīng)對(duì)復(fù)雜多變的設(shè)計(jì)項(xiàng)目。

「Hey Jimmy,老遠(yuǎn)就看到你正在揪頭發(fā),看樣子正在構(gòu)思新設(shè)計(jì)吧,瞧你這個(gè)狀態(tài),應(yīng)該不太順利吧?」

「誒,客戶(hù)說(shuō)讓我給他們重新設(shè)計(jì)整個(gè)控制面板。他們覺(jué)得不夠好使,希望新的控制面板能夠更好展示信息,提升效率,最好再把幾個(gè)比較明顯的可訪(fǎng)問(wèn)性問(wèn)題給解決一下。但是我怎么設(shè)計(jì)……都覺(jué)得不對(duì)??蛻?hù)那邊有不少人參與了測(cè)試,有人覺(jué)得挺棒的,有人又非常討厭,還有一部分直接說(shuō)還得接著改。現(xiàn)在,我覺(jué)得無(wú)能為力,不知道要怎么弄了?!笿immy 保持著撓頭的姿勢(shì),盯著屏幕說(shuō)道。

「別糾結(jié),」Sarah 微笑道:「如果一直盯著問(wèn)題解決問(wèn)題是常常會(huì)陷入這樣的困境的,解決方案其實(shí)并不復(fù)雜,你需要從根子上來(lái)想辦法。只要讓整個(gè)設(shè)計(jì)方案貼合規(guī)則基礎(chǔ)穩(wěn)固了,問(wèn)題就會(huì)迎刃而解了。其實(shí),關(guān)鍵也就是幾個(gè)基本的設(shè)計(jì)原則?!?

「雖然這話(huà)經(jīng)常聽(tīng)到,但是真的能行?」Jimmy 狐疑地盯著 Sarah,思忖兩秒感覺(jué)到大姐頭這是要傳授秘籍,便摸過(guò)小本子,端正坐姿,準(zhǔn)備做筆記:「那么,都有哪些原則呢?」

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,說(shuō)道:「下樓散步吧,咱們邊走邊聊?!?

「其實(shí),在產(chǎn)品完成之后,是需要基于幾個(gè)基本的原則來(lái)重新審視和調(diào)整設(shè)計(jì)的?!筍arah 喝了一口咖啡,慢慢地開(kāi)始說(shuō)。

保持清晰

Jimmy,如果腦子里面的思路沒(méi)有梳理清晰,很難做出條理清晰的產(chǎn)品的。因此,在設(shè)計(jì)產(chǎn)品之前,先應(yīng)當(dāng)消除思維中的混亂,有幾個(gè)事情,在設(shè)計(jì)的過(guò)程中要始終保持關(guān)注:

  • 業(yè)務(wù)目標(biāo),客戶(hù)的問(wèn)題和需要的功能則會(huì)催生設(shè)計(jì),而這幾個(gè)因素之間是存在關(guān)系的。
  • 永遠(yuǎn)不要為了好看而犧牲功能。
  • 下一步要做的事情始終要是不言自明的。
  • 對(duì)于最重要的內(nèi)容,要借助負(fù)空間、色彩、字體、圖形和其他的 UI 元素來(lái)進(jìn)行突出展示的。
  • 各種尺寸的文本都應(yīng)該清晰可見(jiàn)。
  • 圖標(biāo)應(yīng)該而銳利。
  • 除此之外,要讓設(shè)計(jì)保持微妙而恰到好處。
  • 通過(guò)設(shè)計(jì),你的用戶(hù)應(yīng)該本能的知道他在哪里,以及該做什么。

產(chǎn)品的外觀(guān)最終都是在清晰的設(shè)計(jì)(或者不夠清晰的設(shè)計(jì))之下的副產(chǎn)物。清晰的設(shè)計(jì)意圖,最終會(huì)轉(zhuǎn)化為清晰的產(chǎn)品設(shè)計(jì)?!狹assimo Vignelli

「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫(xiě)道,一個(gè)混亂而復(fù)雜的產(chǎn)品始終是源自于制造者本身的混亂,說(shuō)明這個(gè)人本身內(nèi)心深處心態(tài)復(fù)雜而想法混亂?!筍arah 說(shuō)道。Jimmy 此刻若有所思。

可操作的界面

「接下來(lái)的這一點(diǎn)也同樣很重要。我們?cè)O(shè)計(jì)的數(shù)字產(chǎn)品必須清晰,也要專(zhuān)注于當(dāng)前的任務(wù),一個(gè)交互性強(qiáng)、可操作性?xún)?yōu)秀的 APP 才是用戶(hù)所需要的,而要做到這一點(diǎn),屏幕上的內(nèi)容應(yīng)當(dāng)始終是的,并且始終保持較高的相關(guān)性。與此同時(shí),APP  也應(yīng)當(dāng)作為用戶(hù)意圖的延伸。如果用戶(hù)打開(kāi)了你的 APP,想要解決某個(gè)問(wèn)題,執(zhí)行某個(gè)任務(wù),而你的 APP 做不到這一點(diǎn),那么情況就很糟糕了。」Sarah 說(shuō)道。

她停了幾秒鐘,梳理了一下思路,繼續(xù)說(shuō)道:「你看,我們所做的一切都是為了確保我們的方案,能夠在正確的環(huán)境中,面對(duì)著對(duì)的用戶(hù),解決亟需解決的問(wèn)題。當(dāng)然,我們要經(jīng)歷很多次的迭代,才能靠近這一目標(biāo)?!?

主觀(guān)的愿景

「許多設(shè)計(jì)師和開(kāi)發(fā)者都在說(shuō),APP 應(yīng)該靈活,應(yīng)該滿(mǎn)足所有客戶(hù)的需求。好吧,Jimmy,這些說(shuō)法都是胡說(shuō)八道的。但是有一個(gè)說(shuō)法很真實(shí),也需要你時(shí)刻謹(jǐn)記:試圖取悅每個(gè)人只會(huì)帶來(lái)無(wú)盡的壓力和痛苦,讓你沮喪,失去資源。所以,不要害怕失去一部分用戶(hù),真正需要擔(dān)心的是失去愿景和遠(yuǎn)見(jiàn)?!?

「一個(gè)偉大的而足夠優(yōu)秀的數(shù)字產(chǎn)品,必須始終清楚它到底是服務(wù)于誰(shuí)的。只有牢記真正的用戶(hù),明白他們的需求,才能開(kāi)發(fā)出真正有效的解決方案。最好的數(shù)字產(chǎn)品當(dāng)中,都是藏著愿景的?!筍arah 和 Jimmy 走到了大樓的窗戶(hù)附近,看著外面來(lái)往的人流,Jimmy 忍不住問(wèn)到:「那其他的用戶(hù)呢?」Sarah 笑著回答:「當(dāng)我們滿(mǎn)足目前的目標(biāo)之后,才能顧的上其他的人。我們的目標(biāo)用戶(hù)才是核心,其他的人不喜歡,和我們的愿景不匹配,也不用操心。市場(chǎng)上會(huì)有其他的應(yīng)用或者服務(wù)能夠滿(mǎn)足他們,讓他們高興,而我們總是只能身處一個(gè)陣營(yíng),你不可能什么都擁有?!筍arah 笑著回答 Jimmy 的疑問(wèn)。

當(dāng)人們尋找軟件和服務(wù)的時(shí)候,他們要的并不是功能,他們要的是解決問(wèn)題的方法,一個(gè)和自己相匹配的愿景?!?7Signals《Getting Real》

反饋系統(tǒng)

下一個(gè)原則,也是一個(gè)很重要的注意事項(xiàng),那就是反饋。反饋能夠幫用戶(hù)確定操作是否執(zhí)行了,明白結(jié)果是否發(fā)生,讓用戶(hù)明白當(dāng)前的情況:

  • 交互發(fā)生時(shí),相應(yīng)的交互元素應(yīng)該被凸顯出來(lái)
  • 進(jìn)度指示控件應(yīng)該持續(xù)地顯示當(dāng)前狀態(tài)
  • 動(dòng)畫(huà)和聲音的加入有助于用戶(hù)理解交互的狀態(tài)和結(jié)果

「我想你應(yīng)該知道,即使技術(shù)如此的進(jìn)步,人類(lèi)本身的生物性決定了我們依然是依靠反饋來(lái)確知互動(dòng)的結(jié)果和狀態(tài)的。我們的身體(視覺(jué)或者觸感)需要感受到反饋,再像大腦發(fā)出信號(hào),而虛擬的界面背后到底在發(fā)生什么,需要全面的交互設(shè)計(jì)傳遞出來(lái),只有這樣用戶(hù)才不會(huì)費(fèi)勁巴拉地去思考之前的點(diǎn)擊或者滑動(dòng)交互是否操作成功了。反饋給用戶(hù)的信息也應(yīng)該是能夠被輕松理解的,用戶(hù)不應(yīng)該在這個(gè)事情上再費(fèi)勁去思考了。因此,你手邊應(yīng)該有關(guān)于心理學(xué)、行為學(xué)這類(lèi)能夠揭示人類(lèi)思考的圖書(shū),因?yàn)樗鼈兡軌驇湍闾嵘寄??!筍arah 喝了一口咖啡,潤(rùn)了潤(rùn)嗓子,帶著 Jimmy 又溜達(dá)上樓,回到了辦公室。

善用隱喻

「隱喻——我這里說(shuō)的并不是文學(xué)中的隱喻,」Sarah 又提到了一個(gè)看似無(wú)用但是經(jīng)常被說(shuō)起的概念:「你看,UI界面中的設(shè)計(jì)元素和交互方式和我們的現(xiàn)實(shí)生活中的元素和交互方式是如此的相似,這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數(shù)字產(chǎn)品當(dāng)中。這樣一來(lái),用戶(hù)會(huì)更快地學(xué)會(huì)和理解?!?

「正是因?yàn)殡[喻的存在,現(xiàn)實(shí)的經(jīng)驗(yàn)和虛擬的交互產(chǎn)生了關(guān)聯(lián),用戶(hù)交互因此而更加自然地發(fā)生。視線(xiàn)隨著被精心設(shè)計(jì)的布局而游移到重點(diǎn)上,用戶(hù)會(huì)下意識(shí)地點(diǎn)擊被高亮顯示的、和現(xiàn)實(shí)按鈕差不多的交互控件,他們還會(huì)下意識(shí)地在虛擬的屏幕上滑動(dòng),在界面之前自然游走。因此,你有必要了解你的核心用戶(hù)每天都在使用哪些 APP,他們都是如何交互的。這有助于你吸收經(jīng)驗(yàn),消除不良的體驗(yàn),創(chuàng)造舒適的交互,降低學(xué)習(xí)的壓力,更好地轉(zhuǎn)化。」Sarah 一邊說(shuō)著,一邊下意識(shí)地模擬著交互并解釋道。

內(nèi)容的一致性

「接下來(lái)我們還是用案例來(lái)說(shuō)明一下,會(huì)更容易理解?!拐f(shuō)著 Sarah 坐到椅子上,并且打開(kāi)電腦屏幕,說(shuō)道:「比如我們要做一個(gè)日歷,你認(rèn)為它應(yīng)該是網(wǎng)格,還是做成列表?」Jimmy 撓頭想了一下,遲疑道:「恩……我們應(yīng)該堅(jiān)持使用網(wǎng)格的樣式。它更加緊湊也更加有條理,我說(shuō)的對(duì)嗎?」

「其實(shí)這取決于用戶(hù)的主要目標(biāo)是什么。如果這個(gè)日歷元素是出現(xiàn)在報(bào)告文檔當(dāng)中,應(yīng)該是用網(wǎng)格的樣式還是列表的樣式呢?一樣的,這要看情況。我們是否要在每個(gè)應(yīng)用中都使用全局導(dǎo)航?同樣是需要基于上下文情況來(lái)決定的。一致的設(shè)計(jì)不止是表面樣式上的一致,還需要從需求、內(nèi)容、用戶(hù)使用場(chǎng)景和體驗(yàn)上來(lái)保持一致性。如果在特定的情況下,獨(dú)特的設(shè)計(jì)能夠帶來(lái)更大的價(jià)值,那么這是有意義的,這種特殊情況下不同是有必要的?!筍arah 細(xì)心地為 Jimmy 解釋道。

良好的設(shè)計(jì),應(yīng)該是特定語(yǔ)境經(jīng)過(guò)評(píng)估后定制的副產(chǎn)物,而不是脫離使用場(chǎng)景而憑空創(chuàng)造出來(lái)的,否則,無(wú)論多么炫酷都是不合時(shí)宜的?!狹assimo Vignelli

防御性設(shè)計(jì)

「最后要說(shuō)的,是防御性設(shè)計(jì)?!筍arah 轉(zhuǎn)身對(duì)著 Jimmy,然后說(shuō)道最后一個(gè)規(guī)則。

「防御性設(shè)計(jì)?什么東西?」Jimmy 感覺(jué)今天學(xué)到了不少,最后這個(gè)原則也被他寫(xiě)到小本子上了?!高@個(gè)啊,也就是大家常說(shuō)的直覺(jué)性設(shè)計(jì)?!筍arah 微微一笑。

「我知道!喬布斯以前就經(jīng)常說(shuō)這個(gè)概念!」Jimmy 終于找到一個(gè)他足夠熟悉的概念,興奮不已。

「可是,你真的知道什么是直覺(jué)性的設(shè)計(jì)么?」Sarah 看著興奮的 Jimmy 賣(mài)了個(gè)關(guān)子。

「預(yù)測(cè)用戶(hù)行為?然后在用戶(hù)要執(zhí)行下一個(gè)操作之前幫他解決需求?」Jimmy 狐疑地問(wèn)道。

「是也不是。它并不是讓你去預(yù)測(cè)用戶(hù)的行為,防御性設(shè)計(jì)是為了避免出錯(cuò)。無(wú)論你如何謹(jǐn)慎地去做設(shè)計(jì),總會(huì)有錯(cuò)誤發(fā)生,無(wú)論你做過(guò)多少調(diào)研,你計(jì)劃有多么妥帖,你的產(chǎn)品總會(huì)需要一個(gè)備用方案來(lái)規(guī)避問(wèn)題?!筍arah 說(shuō)道:「防御性設(shè)計(jì),是讓你找到可能會(huì)出現(xiàn)的問(wèn)題。」

相信我,你的產(chǎn)品如果給了用戶(hù)負(fù)面的體驗(yàn),他們絕對(duì)不會(huì)忘記。

「我還是沒(méi)明白你的意思……」Jimmy 習(xí)慣性地?fù)项^。Sarah 耐心地開(kāi)始解釋?zhuān)骸敢蚤_(kāi)車(chē)為例來(lái)說(shuō)明這個(gè)事兒吧。當(dāng)你開(kāi)車(chē)的時(shí)候,總會(huì)盡量避免道路上各種可能出現(xiàn)的危險(xiǎn)情況,比如魯莽駕駛的大貨車(chē),三心二意橫穿馬路的行人,懵懂無(wú)知在路邊打鬧的兒童,甚至野外竄上馬路的野鹿,等等。同樣的,作為設(shè)計(jì)師,我們需要預(yù)料到可能會(huì)出現(xiàn)的問(wèn)題,以及始終保持專(zhuān)注來(lái)修復(fù)這些問(wèn)題。這樣我們就不會(huì)破壞整個(gè)用戶(hù)體驗(yàn)。我們要有良好的防御性的設(shè)計(jì)意識(shí),維持住體驗(yàn),改善體驗(yàn)。」Sarah 說(shuō)到這個(gè)地方的時(shí)候,Jimmy 感覺(jué)她身上散發(fā)著某種光芒。

然后 Sarah 起身,帶著 Jimmy 回到他的工位?!冈趺礃樱@些東西你都記下來(lái)了嗎?」Sarah 打趣地歪著頭看著低著頭還在琢磨的 Jimmy,如同大男孩一樣的 Jimmy 驚訝地抬頭問(wèn)道:「什么意思?這就是全部嘛?難道只有這些?」

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

尾聲

就像 Sarah 說(shuō)的,設(shè)計(jì)原則太多了,誰(shuí)又規(guī)定死了具體有幾條呢?每個(gè)人心中的哈姆雷特都不一樣,每個(gè)人眼里的哈利波特又何嘗是一樣的呢?

最重要的問(wèn)題在于,許多人知道原則,卻并不會(huì)在設(shè)計(jì)項(xiàng)目當(dāng)中運(yùn)用它們。洞悉每個(gè)設(shè)計(jì)項(xiàng)目當(dāng)中的重點(diǎn),了解客戶(hù)的需求,明白首要的設(shè)計(jì)目標(biāo),在產(chǎn)品和用戶(hù)之間,找到平衡點(diǎn),用心地思考,利用好設(shè)計(jì)原則這一利器。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔