UX用戶體驗(yàn)設(shè)計(jì):如何創(chuàng)建設(shè)計(jì)原則?

2 評(píng)論 5137 瀏覽 93 收藏 15 分鐘

本文作者依據(jù)工作中項(xiàng)目實(shí)踐的所思所想,并結(jié)合案例等分享了創(chuàng)建設(shè)計(jì)的七項(xiàng)原則,供大家一同參考和學(xué)習(xí)。

最近,在Medium上看到一篇關(guān)于講述關(guān)于創(chuàng)建設(shè)計(jì)原則的文章,于是我回想了一下自己之前工作經(jīng)常會(huì)遇到的一些設(shè)計(jì)情景,不僅是我,相信任何一位設(shè)計(jì)師都遇到過:當(dāng)我們?yōu)楣镜漠a(chǎn)品進(jìn)行營(yíng)銷宣傳或者是用戶體驗(yàn)設(shè)計(jì)時(shí),每個(gè)設(shè)計(jì)者站起來都會(huì)變成色彩和漸變選擇的激烈辯論。我們將花費(fèi)數(shù)小時(shí)進(jìn)行無數(shù)次疲憊的討論,并進(jìn)行不那么令人愉快的語(yǔ)言攻擊。

每個(gè)人的意見都是不容忽視的,通過這種混亂,我們經(jīng)常會(huì)聽到如下的話語(yǔ):

  • 嗯……你說按鈕應(yīng)該小一點(diǎn)是什么意思?
  • 你聽說過這個(gè)詞嗎?嗯……什么? 是的……一致性!
  • 請(qǐng)遠(yuǎn)離設(shè)計(jì)……
  • 使用Lorem Ipsum到底有什么錯(cuò)……我喜歡那些深?yuàn)W的拉丁語(yǔ)單詞。

好吧,我夸張了。

那時(shí)候,我們的設(shè)計(jì)展示了我們公司企業(yè)的設(shè)計(jì)理念,缺乏標(biāo)準(zhǔn)化和我們重視的東西。并不是設(shè)計(jì)很糟糕,而是他們沒有遵循任何核心設(shè)計(jì)原則。

更令人沮喪的是,當(dāng)反饋沒有給出任何可采取行動(dòng)的東西時(shí),有人會(huì)脫口而出,“感覺不對(duì)勁”。

非常尊重你,朋友。但是你覺得它感覺不對(duì)勁到底是什么意思?

接著通常是一陣極度的沉默,摸著胡須,盯著天花板,然后默默地聳了聳肩——“我不知道的東西?!?/p>

所有這一切都成了一個(gè)大問題 – 如何在沒有共同語(yǔ)言的情況下獲得有效的設(shè)計(jì)反饋?

這里我列舉了七項(xiàng)設(shè)計(jì)原則,它幫助我們對(duì)我們的設(shè)計(jì)方法以及我們作為團(tuán)隊(duì)所重視的內(nèi)容有了共同的理解。

原則一

我們的第一個(gè)設(shè)計(jì)原則并不難接受,如果我們想讓設(shè)計(jì)解決用戶的問題,就必須與他們產(chǎn)生共鳴。

換位思考,而不是同情;以人為本,而不是像素為先。

這就像一個(gè)神圣的誓言。我們應(yīng)該關(guān)注用戶的問題,而不是我們的解決方案。

良好的設(shè)計(jì)解決了用戶的問題,只有在我們與用戶的目標(biāo)、操作環(huán)境和心理模型同步時(shí)才能創(chuàng)建。

我們決定了解用戶對(duì)問題的看法,穿上他們的鞋子去感受他們的感受??纯此麄兛吹搅耸裁?。想想他們?cè)谙胧裁础?/p>

只有當(dāng)我們從他們的眼睛開始看世界時(shí),我們的解決方案才開始用他們的問題講同一種語(yǔ)言。

以下是遵循的一些建立同理心的方法:

  1. 仔細(xì)聆聽,先理解問題陳述。不要立即進(jìn)入解決方案模式。與人交往,發(fā)現(xiàn)未知;
  2. 觀察用戶,走出大樓去了解他們的操作環(huán)境。只有當(dāng)我們?cè)谡鎸?shí)的環(huán)境中觀察用戶時(shí),我們才能得出他們痛點(diǎn)的真正含義;
  3. 建立同理心地圖和人物角色。這就像為你的想象提供一張臉。構(gòu)建用戶角色可以更好地理解為其設(shè)計(jì)解決方案的用戶組的問題;
  4. 減少偏見。問題是開放的。讓新鮮的觀點(diǎn)蓬勃發(fā)展。我們不抱任何偏見,讓用戶表達(dá)自己;
  5. 問一些開放性的問題,這會(huì)讓用戶陷入某種思維模式,而這些問題不會(huì)讓用戶給出“你喜歡使用這個(gè)產(chǎn)品嗎?”但這些問題能讓對(duì)話順暢進(jìn)行,并演變成有趣的解釋。例如:“如果您正在開發(fā)這個(gè)應(yīng)用程序,還會(huì)構(gòu)建哪些功能?”

原則二

內(nèi)容先于設(shè)計(jì)。沒有內(nèi)容的設(shè)計(jì)不是設(shè)計(jì),而是裝飾。

—— 杰弗里澤爾德曼

我們質(zhì)疑自己——當(dāng)我們能夠清楚地使用現(xiàn)實(shí)世界的數(shù)據(jù)并為我們的設(shè)計(jì)帶來清晰度時(shí),為什么我們依賴于我們對(duì)內(nèi)容的預(yù)感和猜測(cè)?

使用Lorem Ipsum或任何虛擬文本都會(huì)破壞字符的最終設(shè)計(jì)。Lorem Ipsum并沒有真正理解如何使用這些設(shè)計(jì),只是坐在那里,就像一件衣服,在人體模特身上看起來很棒,但卻沒有告訴你同樣的衣服穿在你身上會(huì)是什么樣子!

所以要忘記設(shè)計(jì)師字典里的Lorem ipsum這個(gè)詞。它讓我們更真實(shí)地了解應(yīng)用程序在真實(shí)環(huán)境中的行為,而不是Photoshop或Sketch。

以下是用(真實(shí))數(shù)據(jù)設(shè)計(jì)的方法:

  1. 獲取真實(shí)數(shù)據(jù)。與產(chǎn)品負(fù)責(zé)人合作以獲得實(shí)際的數(shù)據(jù)示例。這確保了當(dāng)我們?cè)谡鎸?shí)的野外世界中外出時(shí),我們腦海中的布局看起來是一樣的,并且項(xiàng)目不會(huì)因?yàn)殚L(zhǎng)度的不同而互相碰撞;
  2. 獲取不同大小的數(shù)據(jù)。我們?cè)噲D收集內(nèi)容的最小和完全充實(shí)的例子。我們發(fā)現(xiàn)數(shù)據(jù)顯示在屏幕上的每一種可能的方式;
  3. 使用數(shù)據(jù)集。我們確保應(yīng)用程序流在屏幕上使用相同的內(nèi)容。為不同的屏幕使用不同的數(shù)據(jù)集會(huì)導(dǎo)致混淆。

原則三

任何傻瓜都可以讓事情變得復(fù)雜,讓它變簡(jiǎn)單需要天才。

——Woody Guthrie

每個(gè)復(fù)雜的操作都需要花費(fèi)大量時(shí)間和用戶的努力才能理解。而且很有可能,這種復(fù)雜的界面將阻止用戶回來并在將來再次使用它。

在設(shè)計(jì)中實(shí)現(xiàn)徹底的簡(jiǎn)單性并不容易。您需要了解人類認(rèn)知和設(shè)計(jì)的局限性,牢記用戶的目標(biāo)。簡(jiǎn)單的設(shè)計(jì)始終關(guān)注問題的本質(zhì),并利用用戶現(xiàn)有的心智模型來減少認(rèn)知負(fù)擔(dān)。

在設(shè)計(jì)中使用以下方法來實(shí)現(xiàn)簡(jiǎn)單性:

  1. 刪除不重要的事物。我們的重點(diǎn)是只包含“絕對(duì)必須”元素,并確保沒有任何視覺上的混亂來完成任何特定的任務(wù);
  2. 把屬于一起的東西分組。適當(dāng)?shù)姆纸M有助于提高用戶在產(chǎn)品中發(fā)現(xiàn)、學(xué)習(xí)、記憶和執(zhí)行任務(wù)的效率;
  3. 必要時(shí)把東西藏起來。如果能讓我們的產(chǎn)品看起來不那么雜亂,我們不會(huì)羞于隱藏信息。相反,它有助于減輕用戶的認(rèn)知負(fù)擔(dān);
  4. 我們使用廣泛使用的結(jié)構(gòu)和心理模型。例如,按鈕的心智模型是一個(gè)實(shí)心或空心矩形,其中心是文本。我們都習(xí)慣于看到用于提交、下載等操作的按鈕。所以我們不會(huì)用不同形狀的按鈕來做實(shí)驗(yàn);
  5. 我們使用設(shè)計(jì)可提供性來保持事物的直觀性;
  6. 最后,我們總是牢記,當(dāng)沒有什么可以刪除的時(shí)候,完美才會(huì)到來。

原則四

一致性是最強(qiáng)大的可用性原則之一:當(dāng)事物總是表現(xiàn)相同時(shí),用戶不必?fù)?dān)心會(huì)發(fā)生什么。相反,他們根據(jù)早期的經(jīng)驗(yàn)知道會(huì)發(fā)生什么。

——Jakob Nielsen

一致性對(duì)于提高用戶體驗(yàn)效率非常重要。在使用應(yīng)用程序時(shí),如果用戶遇到他們之前已經(jīng)了解過的元素,他們會(huì)學(xué)會(huì)更快地使用您的設(shè)計(jì)?;蛘撸瑧?yīng)用程序讓他們?cè)谠缙诘钠聊恢袑W(xué)習(xí)。

以下是在設(shè)計(jì)時(shí)如何處理一致性:

  1. 通過相同的視覺元素創(chuàng)建一致性無論是顏色,字體,按鈕,圖標(biāo)還是排版,一切都應(yīng)該在整個(gè)產(chǎn)品中保持不變;
  2. 建立對(duì)常用UI元素的熟悉程度。像搜索框,徽標(biāo)位置等。盡管嘗試新事物很好,但我們不會(huì)過多地進(jìn)行瘋狂的實(shí)驗(yàn)。我們接受這樣的事實(shí),即我們的設(shè)計(jì)需要遵循公認(rèn)的用戶模式;
  3. 發(fā)布樣式規(guī)范指南。我們的風(fēng)格指南有重要指導(dǎo)方針,有助于我們提高清晰度。

原則五

我們需要為整個(gè)體驗(yàn)設(shè)計(jì),而不僅僅是快樂的場(chǎng)景。

極致的用戶體驗(yàn)照顧每個(gè)用戶,從第一次使用該產(chǎn)品的用戶到專家,從快樂場(chǎng)景到不愉快場(chǎng)景。

當(dāng)設(shè)計(jì)處理以下狀態(tài)時(shí),會(huì)創(chuàng)建整體用戶體驗(yàn) 。

以下是如何設(shè)計(jì)保持所有狀態(tài)的方法:

  1. 為初次使用者設(shè)計(jì)。我們不僅僅考慮黑色和白色區(qū)域,還考慮灰色區(qū)域。例如,當(dāng)用戶第一次使用我們的產(chǎn)品時(shí)會(huì)發(fā)生什么?系統(tǒng)如何幫助他們登機(jī)?
  2. 設(shè)計(jì)可能的兔子洞。我們知道,當(dāng)系統(tǒng)正在加載數(shù)據(jù)或遇到某種錯(cuò)誤時(shí),會(huì)出現(xiàn)用戶在沒有任何數(shù)據(jù)時(shí)陷入困境的情況;
  3. 設(shè)計(jì)替代流程。我們?yōu)閭溆昧鞒淘O(shè)計(jì)并幫助它們成功完成。

原則六

設(shè)計(jì)不只是外觀和感覺。設(shè)計(jì)就是它的工作原理。

——史蒂夫?喬布斯

設(shè)計(jì)需要確保它不僅看起來漂亮和可用,而且能夠以突破性的速度工作。

因此,作為設(shè)計(jì)師,我們擔(dān)心每一個(gè)小細(xì)節(jié),比如瀏覽器兼容性、速度、布局以及這些元素如何影響頁(yè)面加載時(shí)間和最終用戶體驗(yàn)。

以下是如何確保我們的設(shè)計(jì)不會(huì)阻塞帶寬:

  1. Simplify(簡(jiǎn)化)、Simplify(簡(jiǎn)化)、Simplify(在簡(jiǎn)化);
  2. 與開發(fā)人員合作。讓開發(fā)人員參與設(shè)計(jì)過程并對(duì)添加/刪除元素持有意見非常重要。我們確保開發(fā)團(tuán)隊(duì)盡早批準(zhǔn)設(shè)計(jì);
  3. 所有設(shè)計(jì)師都需要了解瀏覽器和移動(dòng)應(yīng)用在技術(shù)上的運(yùn)作方式。這很重要,這樣他們就可以在真實(shí)設(shè)備上測(cè)試他們的設(shè)計(jì),而無需開發(fā)人員的幫助。

原則七

我們大多數(shù)人的問題在于,我們寧愿被贊美毀掉而不是被批評(píng)所拯救。

—— 諾曼文森特皮爾

對(duì)于設(shè)計(jì)師來說,反饋應(yīng)該像聽音樂一樣。這是改進(jìn)設(shè)計(jì)的最快方法。

可以在設(shè)計(jì)組內(nèi)安排每周一次的“ Show&Tell ”會(huì)議。會(huì)議中,我們將展示我們的工作并相互提供反饋。這使我們不僅能夠創(chuàng)造出優(yōu)秀的設(shè)計(jì),還能成為更好的設(shè)計(jì)師。

以下是尋求和提供無偏見設(shè)計(jì)批評(píng)的方式:

  1. 提前分享設(shè)計(jì)。在會(huì)議之前,我們分享問題敘述和設(shè)計(jì)思路。這為人們提供了足夠的時(shí)間來為設(shè)計(jì)評(píng)論會(huì)做好準(zhǔn)備;
  2. 讓所有人參與進(jìn)來在我們的反饋會(huì)議期間,我們要求人們對(duì)白板上的黃色膠粘物提出批評(píng)。這樣,即使是我們最內(nèi)向的設(shè)計(jì)師也有機(jī)會(huì)表達(dá)他們的意見;
  3. 反饋問題要具體。當(dāng)我們戴上批評(píng)給予者的帽子時(shí)——我們很有禮貌,但對(duì)我們必須分享的東西很具體。我們提供的建議可以幫助改進(jìn)設(shè)計(jì);
  4. 欣賞。我們也不會(huì)回避在設(shè)計(jì)中分享我們喜歡的東西。

總結(jié)

設(shè)計(jì)原則幫助我們圍繞重要事項(xiàng)調(diào)整人員。這樣沖突要少得多??赡芗ち业挠懻摏]有消退,但它會(huì)變得更有意義了!

 

作者:?Zzzdl;公眾號(hào):LDesign1(ID:LDesign1)

來源:https://mp.weixin.qq.com/s/MAF8pVLeiVKiO-oBWf6pRA

本文由 @LDesign1 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!