筆者認(rèn)為UI作品代表了產(chǎn)品的門面，并結(jié)合IOWA（愛荷華州）App的例子指出糟糕的UI作品的具體表現(xiàn)，避免大家踩雷！

在Medium上看到這篇文章，感覺文中的觀點(diǎn)簡(jiǎn)直不能更贊同了，翻譯過來和大家分享一下。

在工作中也經(jīng)常會(huì)遇到這樣的崩潰時(shí)刻：前期充足的用研，縝密的業(yè)務(wù)邏輯；讓人心動(dòng)的動(dòng)效；精致華麗的UI設(shè)計(jì)稿；然后經(jīng)過程序員的“升華”，出來的真實(shí)系統(tǒng)有時(shí)卻讓人不能直視。

正如本文原作者說的：

“當(dāng)你看到生銹的汽車，變形的車窗且金屬吱吱作響時(shí)，你是否認(rèn)為其發(fā)動(dòng)機(jī)狀況良好？”

首先我們來探討一下：應(yīng)該如何通過UI的質(zhì)量來判斷產(chǎn)品質(zhì)量？

你認(rèn)為哪個(gè)是官方應(yīng)用？

左邊的那個(gè)。

實(shí)在遺憾，質(zhì)量太差——大多數(shù)照片都沒對(duì)齊。

我用了30分鐘的時(shí)間，根據(jù)左邊的重新設(shè)計(jì)了右邊的。 當(dāng)然可以進(jìn)一步改進(jìn)，但這不是重點(diǎn)。 這只是展示了努力的最小一部分。

上周末，每個(gè)人都在談?wù)搻酆扇A州。如果不是因?yàn)橐韵聝牲c(diǎn)，我通常不會(huì)在這里參與爭(zhēng)議。

首先，即使我目前住在波蘭的索波特，愛荷華州也是我生活中的重要部分。早在1999年，我就在愛荷華州馬里恩（Marion）讀完了高中，那對(duì)我來說是改變?nèi)松臅r(shí)刻；因此，我感覺確實(shí)與愛荷華州有著千絲萬縷的聯(lián)系，它像是我的一部分。

再次，當(dāng)我看到那個(gè)臭名昭著的App的一些圖片時(shí)，我意識(shí)到：這是我一直在大量談?wù)摰年P(guān)于愛荷華州的另外一些例子。

一、糟糕的UI通常意味著糟糕的產(chǎn)品

雖然UX人群之前對(duì)我的方法不太滿意，但我仍然堅(jiān)持：在某些情況下,專業(yè)的開發(fā)人員團(tuán)隊(duì)會(huì)為專業(yè)人士構(gòu)建復(fù)雜的App；它的UI做得不好，但App依然很有用。

但是在大多數(shù)情況下，UI是UX的一部分，它能確鑿反應(yīng)整體質(zhì)量。在不了解所有信息的情況下，你無法真正判斷產(chǎn)品中的信息架構(gòu)，流程或做過的很成功的研究。

在Iowa App中，這一點(diǎn)更加明顯，因?yàn)樗赡苁枪俜疆a(chǎn)品。

我知道當(dāng)今的政治分歧很大；不過，由于雙方主要是美國(guó)人，也許他們可以……你知道的——在其官方產(chǎn)品中使用美國(guó)Web設(shè)計(jì)系統(tǒng)？

USWDS 2.0

創(chuàng)建它是有原因的（實(shí)際上非常好）。

當(dāng)然，它是用于“網(wǎng)站”的，但是這樣的應(yīng)用程序并不復(fù)雜，以至于無法使用它來重新創(chuàng)建。

二、“憑封面判斷一本書”怎么了

即使Iowa核心小組的負(fù)責(zé)人并不“精通技術(shù)”，他們也可能每天都會(huì)使用其他更精致的App。

但他們看不出區(qū)別嗎？ 真的嗎？

你能在一輛全新的特斯拉旁邊看到一輛生銹的舊豐田車，還說：他們都一樣好。

一些年輕的員工，甚至可能以前也是曾從事數(shù)字產(chǎn)品相關(guān)的工作。我無法想象整個(gè)主要的政治力量會(huì)將UX / UI / CX流程外包給IT公司，而沒有人質(zhì)疑結(jié)果。

三、為什么還要選擇看起來像demo的產(chǎn)品呢

我們可能永遠(yuǎn)不會(huì)知道（或不想知道）。

我將嘗試查看該App的截圖，并對(duì)其進(jìn)行簡(jiǎn)要注釋。這些問題很多都是普遍存在的，是判斷產(chǎn)品的簡(jiǎn)便方法。當(dāng)然，你可能會(huì)錯(cuò)，但你也可能不會(huì)。

讓我們一起看看吧，好嗎？

上圖是一個(gè)很好的例子。

這是登錄界面。請(qǐng)注意：在移動(dòng)設(shè)備上（它畢竟是App），“點(diǎn)擊此處”的用語可能會(huì)造成混淆。

1. 第一回合

僅此一個(gè)非常簡(jiǎn)單的屏幕，至少存在3個(gè)問題。

我們當(dāng)然可以談?wù)撜麄€(gè)屏幕的對(duì)齊方式，或徽標(biāo)與表單的關(guān)系；但這不是重點(diǎn)。

再次抱歉，截圖質(zhì)量不佳，但注釋的這幾點(diǎn)仍然有效。

2. 第二回合

即使是模糊的截圖，你仍然可以在這里看到很多問題：在一個(gè)屏幕上就有三個(gè)不同的頁(yè)面間距（數(shù)據(jù)表，膠囊狀粉紅色指示器和按鈕）。

乍一看，這里幾乎所有的東西都是凌亂的——間距可能太大，然后在某些地方突然太?。凰坪跛鼈兪请S機(jī)組合在一起的。

原始的（左）與花30分鐘重新設(shè)計(jì)的（右）

四、總結(jié)

很顯然我不知道這里的全部故事；并且，我并不想為此而抨擊一個(gè)簡(jiǎn)單的APP。

我的觀點(diǎn)是：僅從幾個(gè)截圖來看，一個(gè)視力很好的人也許可以避免很多這樣的問題。如果不能——那這仍然是一個(gè)很好的例子。

當(dāng)然，該App的問題并不在于其界面；但是這些界面（及其質(zhì)量）表明，即使你在“夜間”測(cè)試該App之前，問題就已經(jīng)存在。

用封面來判斷一本書可能會(huì)很容易出錯(cuò)，但是針對(duì)數(shù)字產(chǎn)品準(zhǔn)確度則是其9到10倍。

構(gòu)建任何類型的應(yīng)用程序的目標(biāo)都是使它們達(dá)到最佳質(zhì)量——良好的服務(wù)器基礎(chǔ)架構(gòu)，安全性，隱私性，快速的加載時(shí)間等等，這些對(duì)你都是不可見的。

當(dāng)你看到生銹的汽車，變形的車窗且金屬吱吱作響時(shí)，你是否會(huì)認(rèn)為其發(fā)動(dòng)機(jī)狀況良好？

原文作者：Fabricio Teixeira

原文地址：uxdesign.cc/i-redesigned-the-infamous-iowa-App-in-30-minutes-478a7ae7ffc8

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

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