在本文中，作者將通過(guò)一些具體的情形描述這五個(gè)致命錯(cuò)誤，并將告訴你，如果以后你的團(tuán)隊(duì)再遇到這些問(wèn)題，就知道如何處理啦~

這個(gè)世界上從來(lái)沒(méi)有一個(gè)針對(duì)App UI設(shè)計(jì)的通用公式（當(dāng)然如果有，你也可以分享給我們），但設(shè)計(jì)過(guò)程中總會(huì)產(chǎn)生一些致命的錯(cuò)誤。這些錯(cuò)誤會(huì)發(fā)生在不同設(shè)計(jì)師身上，不過(guò)如果你犯錯(cuò)了，不要覺(jué)得丟人，因?yàn)橐粋€(gè)好的UI設(shè)計(jì)是多方面的，不能以偏概全。不過(guò)，雖然許多由這些錯(cuò)誤產(chǎn)生的細(xì)微影響在某些情況中也是微不足道的，但這并不能成為我們忽視它們的理由。

from Dribbble

今天，我們的主要目的不僅要指出這些錯(cuò)誤，更要去探討一下如何解決這些問(wèn)題。下文中，我們將通過(guò)一些具體的情形描述這五個(gè)致命錯(cuò)誤，并將告訴你，如果以后你的團(tuán)隊(duì)再遇到這些問(wèn)題，就知道如何處理啦~

Mistake I：字體的誤用

我們先從一些字體的樣式說(shuō)起。

眾所周知，San Francisco是IOS系統(tǒng)的默認(rèn)字體，而Android則是使用Roboto，而這兩種字體都具備簡(jiǎn)潔易辨認(rèn)的特點(diǎn)。當(dāng)然，使用系統(tǒng)默認(rèn)字體是一個(gè)安全可靠的選擇。但也有一些手機(jī)允許用戶更改系統(tǒng)默認(rèn)字體，比如三星，那你就會(huì)發(fā)現(xiàn)如果用戶將choco cooky字體設(shè)置為默認(rèn)，你精心制作的App將會(huì)變的面目全非。。。

同時(shí)，在很多情況下我們也需要使用自定義字體。這時(shí)，設(shè)計(jì)師們需要記住以下兩點(diǎn)：

1. “Less is more”，這句話想必你已經(jīng)聽(tīng)了很多遍了。沒(méi)錯(cuò)，確實(shí)有許許多多令人眼前一亮的字體形式，但使用時(shí)依然需要考慮這種字體的合理性。在選擇這些字體時(shí)，需要結(jié)合App本身，是否可以配合以獨(dú)特的字體以提升用戶體驗(yàn)，而不是一味的為了使用獨(dú)特設(shè)計(jì)的字體去使用它。
2. 版權(quán)問(wèn)題。對(duì)，你沒(méi)有看錯(cuò)，是版權(quán)。當(dāng)你在用心設(shè)計(jì)產(chǎn)品的時(shí)候，你有沒(méi)有考慮過(guò)自己選用的字體和素材是不是擁有使用許可呢？如果這些本就是開(kāi)源的，那么當(dāng)然會(huì)省很多時(shí)間和精力，但仍需要去了解一下，以防在后續(xù)的工作中產(chǎn)生更大的麻煩，甚至付出更大的代價(jià)。

Mistake II：過(guò)度密集的頁(yè)面

你知道，在一些移動(dòng)端上，屏幕的界面空間其實(shí)并沒(méi)有你想象的那么充足，那這個(gè)時(shí)候你就需要有所取舍，而不是將自己認(rèn)為重要的內(nèi)容一股腦兒地添加上去。

有的時(shí)候，詳細(xì)并不是一件好事。用戶在遇到充滿大量信息的頁(yè)面時(shí)，會(huì)產(chǎn)生迷茫，甚至排斥的心理。所以設(shè)計(jì)師們應(yīng)該將設(shè)計(jì)的重點(diǎn)聚焦到用戶的視線，才能更有效的讓用戶按照App的設(shè)計(jì)思路去獲得信息。

Mistake III：缺乏一致性

設(shè)計(jì)師的思路要保持一致，不能讓用戶產(chǎn)生混淆的感覺(jué)。比如說(shuō)，如果你準(zhǔn)備使用一種元素或風(fēng)格去定義一個(gè)類(lèi)目，那么請(qǐng)堅(jiān)持下去。用戶一向習(xí)慣在操作中進(jìn)行學(xué)習(xí)，但是一旦他們遇到與預(yù)想中不同的操作，便會(huì)極大的影響他們的用戶體驗(yàn)。

另外，布局和風(fēng)格的一致性也同樣重要－－嗯，在大部分的情況下。例如，可以創(chuàng)建一種風(fēng)格的標(biāo)準(zhǔn)，防止自己在之后的設(shè)計(jì)中漸漸偏離軌跡。

延續(xù)性一直是極為重要的一點(diǎn)。但是，一些特殊情況下，你也可以考慮做一些不同的東西。例如嘗試將登錄界面或者使用時(shí)彈出的新窗口的風(fēng)格進(jìn)行改變，這就會(huì)產(chǎn)生畫(huà)龍點(diǎn)睛的作用。但也務(wù)必記住一點(diǎn)：在嘗試使用脫離整體風(fēng)格之外的元素的時(shí)候，你仍然需要考慮到元素與整體風(fēng)格的相關(guān)性，或者互補(bǔ)性。

Mistake IV：IOS到Android的1:1轉(zhuǎn)換

如今，這種不同系統(tǒng)間的復(fù)制效果已經(jīng)變的不是那么理想了。

很多人會(huì)問(wèn)，直接進(jìn)行這種1:1的復(fù)制難道不是很節(jié)省成本和時(shí)間嗎？

當(dāng)然，是這樣的。但是我們更追求用戶的體驗(yàn)，不是嗎？用戶一直在使用他們自己的手機(jī)，并且肯定已經(jīng)形成與其手機(jī)系統(tǒng)相對(duì)應(yīng)的習(xí)慣。那么，如果你創(chuàng)建出來(lái)的操作習(xí)慣與用戶的習(xí)慣完全不一樣，用戶就極有可能拋棄你的產(chǎn)品。

舉個(gè)比較典型的例子，IOS和Android都有自己系統(tǒng)獨(dú)特的互動(dòng)模式，暫且不提產(chǎn)品是否能夠在兩個(gè)系統(tǒng)間平滑的進(jìn)行轉(zhuǎn)換，但如果你讓一個(gè)系統(tǒng)的用戶從零開(kāi)始學(xué)習(xí)另一個(gè)系統(tǒng)的互動(dòng)模式，那么他們肯定會(huì)不太愉快。

但也不需要過(guò)于極端，同一個(gè)產(chǎn)品在不同的系統(tǒng)之間也不需要完完全全的不同，因?yàn)轱L(fēng)格的一致性依然是你需要考慮到的因素，以確?？紤]到更多的使用情況，也能延續(xù)自己產(chǎn)品的風(fēng)格。拿租車(chē)App Silvercar為例，他們創(chuàng)造了屬于自己的導(dǎo)航風(fēng)格，在不同的系統(tǒng)中也堅(jiān)持維持著使用相同的元素，這就讓這種風(fēng)格完全扎根到他們的產(chǎn)品中，體現(xiàn)了其產(chǎn)品的特色。

Mistake V：貧乏的信息層級(jí)

當(dāng)你設(shè)計(jì)一些產(chǎn)品，不管是一張名片、一面網(wǎng)頁(yè)還是一個(gè)軟件，用戶總是會(huì)以不同的途徑去與之產(chǎn)生互動(dòng)，那么你就需要考慮如何基于產(chǎn)品與用戶的互動(dòng)途徑，來(lái)表現(xiàn)自己想要呈現(xiàn)的信息。

在開(kāi)始工作前，抽一點(diǎn)時(shí)間，坐下來(lái)想一想什么才是這個(gè)產(chǎn)品你最想突出和呈現(xiàn)的。我相信，一旦你理清了所傳達(dá)信息的層級(jí)，那么你一定會(huì)產(chǎn)生一個(gè)清晰的想法，如何使用不同的字體、顏色、尺寸、位置去體現(xiàn)這種層級(jí)。并且你也需要考慮產(chǎn)品針對(duì)的用戶群體以及他們的使用習(xí)慣，制定出理想型和非理想型的方案，并圍繞這些在后續(xù)的工作中設(shè)計(jì)和測(cè)試。

實(shí)踐中解決問(wèn)題的途徑

現(xiàn)在，我們將告訴你這些問(wèn)題通常是如何在實(shí)踐中表現(xiàn)出來(lái)的，并且應(yīng)該如何去解決它們。我們?cè)谶@里將使用一個(gè)訂餐軟件的界面修改作為例子。

假定一個(gè)開(kāi)發(fā)訂餐軟件的客戶需要增加一個(gè)餐廳評(píng)級(jí)的選項(xiàng)，那我們?cè)撛趺醋觥Ｄ俏覀兙烷_(kāi)始吧：

之前的界面是在iPhone 5仍占有極大市場(chǎng)份額的時(shí)候所設(shè)計(jì)的，所以界面上一些小的單元格、logo、文本在新設(shè)備上查看時(shí)會(huì)變的更為密集，極大地影響用戶的操作。從上面對(duì)比圖你應(yīng)該已經(jīng)能看出一些不同，而下圖給你放大展現(xiàn)了我們做出改變的地方：

正如你所看到的，單元格之間的距離變的更遠(yuǎn)了，現(xiàn)在的整體更為清晰且不會(huì)被互相影響。同時(shí)通過(guò)字體、字號(hào)的改變，信息層次也得到了改善，品牌的logo得到了突出。用戶現(xiàn)在完全可以通過(guò)logo找到自己的需求，而不是費(fèi)勁地去閱讀餐廳的名字和信息。

我們做的另外一個(gè)工作就是排版，我們使用了Oswald的字體去做名稱(chēng)和標(biāo)簽。最初，我們只預(yù)計(jì)有一行標(biāo)簽，但后來(lái)考慮到餐廳一些多樣化的優(yōu)惠報(bào)價(jià)，所以現(xiàn)在采取了適應(yīng)更多標(biāo)簽的方式。

我們還考慮到了不同版本Android內(nèi)系統(tǒng)字體和三星系統(tǒng)內(nèi)choco cooky字體的可視化，在這一點(diǎn)上面，我們以添加Roboto作為自定義字體作為解決方法。

而對(duì)于評(píng)級(jí)的標(biāo)志，我們?cè)敢馐褂门c酒店評(píng)分、米其林評(píng)分相同的星星標(biāo)志，直觀且有意義。但我們同時(shí)也發(fā)現(xiàn)了一個(gè)問(wèn)題，我們?cè)?jīng)使用星星作為用戶標(biāo)記喜愛(ài)餐廳的標(biāo)志，現(xiàn)在我們就無(wú)法將這兩個(gè)標(biāo)記同時(shí)放出，因?yàn)闀?huì)引起用戶的困惑。我們不想產(chǎn)生近似標(biāo)志含義不一致，也不想更改評(píng)分星星的設(shè)計(jì)。最后，我們通過(guò)增加了一個(gè)頁(yè)面，以告知用戶增加了新功能的方式去解決了這個(gè)問(wèn)題。

考慮到設(shè)計(jì)的多樣性，即使你在設(shè)計(jì)的過(guò)程中成功地避免了上文所提到的那五個(gè)致命的錯(cuò)誤，你的產(chǎn)品仍會(huì)有崩潰的風(fēng)險(xiǎn)。你永遠(yuǎn)無(wú)法預(yù)料用戶所做的一切，這也是你為什么仍需要分析并使用其它的工具去了解用戶的行為和需求，再去做出相應(yīng)的改進(jìn)。設(shè)計(jì)的變化和進(jìn)步，是要以提升用戶體驗(yàn)為主旨的，并且這點(diǎn)永遠(yuǎn)都不會(huì)改變。

還有，永遠(yuǎn)不要固步自封，因?yàn)槟阋嘈?，你總能設(shè)計(jì)出更好的作品。

最后，記住一句話：

“設(shè)計(jì)不同于科學(xué)，因?yàn)樵谠O(shè)計(jì)領(lǐng)域，沒(méi)有通向成功的萬(wàn)能公式。”

原文作者：Artur Martynowski,UI/UX Designer at All In Mobile and Luke Konior, COO at All In Mobile

原文地址：http://blog.invisionapp.com/app-ui-design-mistakes/

譯者：Conine Academy

本文由 @Conine 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。