當(dāng)?shù)湫偷腢I設(shè)計(jì)師到達(dá)新公司時(shí)，他或她會(huì)遇到兩種情況：

該公司的產(chǎn)品愿景框架，包括規(guī)格和施工團(tuán)隊(duì)，非常完整。乍看之下，產(chǎn)品體驗(yàn)非常好，而且只有少數(shù)優(yōu)化的地方。與第一種情況相反。

然后我們從第二個(gè)不好的情況開(kāi)始，總結(jié)如何從1過(guò)渡到2，以改善設(shè)計(jì)和用戶體驗(yàn)。

一，梳理的基本問(wèn)題

面試官是否經(jīng)常喜歡提出這樣的問(wèn)題：您認(rèn)為我們的APP中有什么可以優(yōu)化的嗎？

1.一致性原則

一致性原則是Jacob&Bulll十大互動(dòng)設(shè)計(jì)原則之一;尼爾森在實(shí)際項(xiàng)目實(shí)踐中具有強(qiáng)大的指導(dǎo)作用。

由于各種原因，一些產(chǎn)品的視覺(jué)設(shè)計(jì)不是標(biāo)準(zhǔn)化的，并且由不同批次的設(shè)計(jì)者完成，導(dǎo)致APP中許多界面的視覺(jué)風(fēng)格不一致。

一致性體現(xiàn)的方面

控制結(jié)構(gòu)：例如，卡底部的操作區(qū)域顯示的均勻性（甜/評(píng)/共享固定控制方式）?？梢暬?guī)范：每個(gè)界面中原色和其他二次色的均勻性，文本樣式的均勻性和主文本的大小。操作反饋：統(tǒng)一使用APP的相同功能時(shí)用戶的操作，獲得統(tǒng)一的反饋。例如，單擊彈出窗口關(guān)閉按鈕將具有統(tǒng)一的滑落反饋。

一致性的重要性

由于相同的控制風(fēng)格/操作反饋對(duì)用戶觸發(fā)相同的事情，因此不同的界面可視語(yǔ)言會(huì)破壞用戶界面的慣性并損害產(chǎn)品的可用性。

同時(shí)，視覺(jué)不規(guī)則性只會(huì)影響后續(xù)版本的設(shè)計(jì)團(tuán)隊(duì)對(duì)迭代視覺(jué)規(guī)范的管理，同時(shí)也對(duì)產(chǎn)品的品牌化產(chǎn)生一定的影響，給產(chǎn)品帶來(lái)不滿的感覺(jué)。

雖然產(chǎn)品經(jīng)理有時(shí)不關(guān)心APP界面的不一致性，但作為UI設(shè)計(jì)師，他們應(yīng)該被說(shuō)服。

2.視覺(jué)品牌

通常，我們通過(guò)視覺(jué)優(yōu)化產(chǎn)品體驗(yàn)來(lái)定義UI設(shè)計(jì)的角色，以傳達(dá)品牌概念。 APP產(chǎn)品與我們常見(jiàn)的離線產(chǎn)品不同，用戶感覺(jué)幾乎完全依賴于在線界面提供的信息。因此，除了自己的產(chǎn)品LOGO之外，整個(gè)APP UI正在向用戶傳達(dá)產(chǎn)品的定位和品牌音調(diào)。

因此，如果APP沒(méi)有自己的色調(diào)并且類似于N級(jí)競(jìng)爭(zhēng)像素級(jí)別，那么產(chǎn)品本身將難以從眾多小屋中逃脫。

3.用戶體驗(yàn)漏洞

我們不是在這里提到用戶體驗(yàn)的改善，更不用說(shuō)簡(jiǎn)單地說(shuō)存在差距。您可能認(rèn)為只有剛剛完成1.0版本的APP才會(huì)有這樣的差距，而成熟的APP則不會(huì)。

這是一個(gè)成熟的工具APP的例子——墨水天氣。

Photo/Select Image部分調(diào)用iOS本機(jī)控件，這顯然是缺少設(shè)計(jì)細(xì)節(jié)。

另外，我想知道這個(gè)頁(yè)面右上角的圖標(biāo)將是一個(gè)什么內(nèi)容的界面（雖然APP第一次有一個(gè)黃色條）。

最后，我們回到了主頁(yè)。讓我感到驚訝的是，APP第一次沒(méi)有提示屏幕，以便查看接下來(lái)5天的天氣情況。

當(dāng)然，也許墨水天氣有其數(shù)據(jù)考慮因素，我們只能從視覺(jué)用戶體驗(yàn)水平稍微分析一下。

每個(gè)人都應(yīng)該發(fā)現(xiàn)，在這部分中，我沒(méi)有提到大框架上的界面設(shè)計(jì)優(yōu)化，因?yàn)槭聦?shí)上，在實(shí)際獲取APP的具體數(shù)據(jù)到產(chǎn)品經(jīng)理手中之前，了解實(shí)際的用戶組和當(dāng)前他們所針對(duì)的發(fā)展方向，APP設(shè)計(jì)優(yōu)化也只是在淺層視覺(jué)優(yōu)化層面。因此，真正的設(shè)計(jì)改進(jìn)優(yōu)化仍然必須從了解產(chǎn)品本身開(kāi)始。

二，如何改進(jìn)設(shè)計(jì)

您的設(shè)計(jì)從“可用”到“易于使用”有多遠(yuǎn)？

1.學(xué)習(xí)打包

當(dāng)然，這里提到的包裝并不意味著您將作品打包成一個(gè)帶有各種模擬和排版的blingbling顯示。把它扔到車站涼爽意味著你的包裝成功。

有些學(xué)生還偷偷摸摸地問(wèn)我為什么面試失敗了。在閱讀了TA的工作后，我發(fā)現(xiàn)了一個(gè)非常嚴(yán)重的問(wèn)題。當(dāng)工作沒(méi)有落地時(shí)，我在視覺(jué)包裝上留下了太多而不是內(nèi)容包裝。

如果您是在公司工作的UI設(shè)計(jì)師，那么工作中的真正問(wèn)題是，從產(chǎn)品經(jīng)理到設(shè)計(jì)經(jīng)理，沒(méi)有人會(huì)輕易同意您的設(shè)計(jì)（除非您是行業(yè)認(rèn)可的大咖啡）。開(kāi)發(fā)可以開(kāi)始將您的設(shè)計(jì)從顏色匹配變?yōu)轱L(fēng)格。那么你如何從一開(kāi)始就獲得主動(dòng)權(quán)？

用完整思考路徑代替結(jié)果

無(wú)論是顏色匹配還是圖標(biāo)風(fēng)格，我相信您將擁有自己的思維過(guò)程，并將“證據(jù)”（競(jìng)爭(zhēng)產(chǎn)品或大咖啡APP的效果）添加到完成的分析中，最后用完整的替換簡(jiǎn)單的分析。單頁(yè)設(shè)計(jì)草案。

即使有不同的聲音，至少你會(huì)讓自己站在早期階段，獲得主動(dòng)權(quán)，并且非常有說(shuō)服力。

以下是每個(gè)人為公司提供基金詳情頁(yè)面優(yōu)化的參考路徑。

△基金會(huì)詳情頁(yè)面在用戶體驗(yàn)修改后增加了3個(gè)百分點(diǎn)

提供更多解決方案

正如我們?cè)凇冻?！?到1正確開(kāi)啟UX項(xiàng)目的方式》文章中所說(shuō)，設(shè)計(jì)師正在解決問(wèn)題，然后在找到解決問(wèn)題的過(guò)程中，隱藏單個(gè)結(jié)果是不可能的。

建議通過(guò)思考（而不是太多）來(lái)制作各種解決方案，這是一個(gè)與您分享的示例。

2.設(shè)計(jì)同理心

這個(gè)概念也是我在分享騰訊大咖啡設(shè)計(jì)師后聽(tīng)到的概念。我覺(jué)得我受益匪淺。

簡(jiǎn)化是學(xué)會(huì)考慮用戶對(duì)場(chǎng)景的使用，從用戶的角度映射場(chǎng)景的使用，考慮設(shè)計(jì)的可能性，并將設(shè)計(jì)從可用變?yōu)橛杏?。我們?lái)談?wù)勏旅娴睦印?

△這是騰訊大咖啡手機(jī)購(gòu)買票的一個(gè)版本。在APP版本發(fā)生變化之前，它似乎正常工作。

△這是APP優(yōu)化后的最終結(jié)果

個(gè)人覺(jué)得這是一個(gè)特別完美的例子。在比較之前和之后，我們可以清楚地看到，這不僅僅是視覺(jué)優(yōu)化的過(guò)程，而是更多關(guān)于信息的集成和存儲(chǔ)。

同時(shí)，它模擬用戶的使用情況，模擬實(shí)體票快線上的票務(wù)信息，并使用不同的地鐵線路對(duì)地鐵站進(jìn)行分類，而不是難以點(diǎn)擊的字母分類（雖然個(gè)人覺(jué)得這件作品可以重新優(yōu)化，目前它也是少搜索功能）。

這些變化大大提高了用戶的使用效率，并且從UI級(jí)別真正接近地鐵票APP的核心：方便購(gòu)票。

3.培養(yǎng)產(chǎn)品思維

數(shù)據(jù)化思維

許多熱心的設(shè)計(jì)師都注重設(shè)計(jì)創(chuàng)意和互動(dòng)理論的積累，而忽略了數(shù)據(jù)分析的重要性。這可能需要在實(shí)際工作項(xiàng)目中加以理解。

在整個(gè)項(xiàng)目中，數(shù)據(jù)分析基本上可以分為：

以前的研究數(shù)據(jù)，中期測(cè)試數(shù)據(jù)，后期制作數(shù)據(jù)

以下是獵豹作為清潔大師時(shí)遇到的設(shè)計(jì)變更示例。

由于部分?jǐn)?shù)據(jù)在中期測(cè)試中，用戶反饋在主頁(yè)修改后顯得很明顯（因?yàn)锳PP長(zhǎng)時(shí)間沒(méi)有經(jīng)過(guò)重新設(shè)計(jì)，舊版本有更深的主色），所以主色已經(jīng)重新調(diào)整了修訂版本，并使用了亮度接近原始版本的藍(lán)色。

營(yíng)銷思維

在關(guān)注數(shù)據(jù)后，我們可以根據(jù)基礎(chǔ)設(shè)計(jì)，而不是如何設(shè)計(jì)好，但如何設(shè)計(jì)用戶更容易付費(fèi)。最近的一篇文章非常受歡迎《這5個(gè)丑出新高度的網(wǎng)站，為什么那么多人夸》，讓我想起了Expedia之前為日本市場(chǎng)重新制作的“基礎(chǔ)燃?xì)狻变N售網(wǎng)站。

△左邊是美國(guó)的Expedia，右邊是日本的Expedia。 2014

日本是一個(gè)非常重視信貸的國(guó)家。美國(guó)版的Expedia對(duì)大多數(shù)日本人來(lái)說(shuō)內(nèi)容太少，而且沒(méi)有足夠的信任。

這個(gè)例子實(shí)際上告訴我們，所有UI設(shè)計(jì)都應(yīng)該基于實(shí)際數(shù)據(jù)，而不是設(shè)計(jì)師的美學(xué)或外國(guó)書(shū)中講述的互動(dòng)法。設(shè)計(jì)意識(shí)和法律是參考，但決定一切的是產(chǎn)品開(kāi)發(fā)策略和實(shí)際數(shù)據(jù)。不同的國(guó)家和不同的國(guó)情不一定適用，例如，歐洲人和美國(guó)人的閱讀習(xí)慣與普通人的閱讀習(xí)慣不同。

第三，誤解了互動(dòng)

在許多人的眼中，效果與輔助效果相同。它真的如此肋骨嗎？

1.互動(dòng)的目的是有區(qū)別的

可以在AP P中使用的交互式效果可以根據(jù)其用途分為幾種類型：

反饋型交互動(dòng)效

使用某個(gè)功能后，反饋用戶當(dāng)前APP功能狀態(tài)切換的交互效果。覆蓋范圍也很廣，例如下拉加載，tabbar上的微動(dòng)，等等。

功能型交互動(dòng)效

特定工具，現(xiàn)場(chǎng)直播等所需的元素效果。例如，在直播期間飛行的飛機(jī)，以及清潔應(yīng)用程序時(shí)轉(zhuǎn)動(dòng)的風(fēng)扇。這種動(dòng)態(tài)效果通過(guò)準(zhǔn)物理設(shè)計(jì)增強(qiáng)了與用戶的交互，完成了某些重要功能，這是顯示功能的最佳方式。

過(guò)渡型交互動(dòng)效

在頁(yè)面跳轉(zhuǎn)和功能融合中起重要作用的交互。良好的過(guò)渡效果避免了界面快速切換時(shí)用戶的損失，給人以極佳的舒適感。

趣味型交互動(dòng)效

互動(dòng)效果增添了錦上添花，增添了樂(lè)趣和品牌色調(diào)。

△以上例子來(lái)自運(yùn)球

在這里，我們打開(kāi)了暴漲的草稿和純藝術(shù)創(chuàng)作，說(shuō)在實(shí)際項(xiàng)目中交互式效果的應(yīng)用并不是越多越好。

在實(shí)際項(xiàng)目中，不同類型的APP對(duì)動(dòng)態(tài)效果有不同的要求。與新聞和深度閱讀產(chǎn)品類似，過(guò)度和不必要的運(yùn)動(dòng)使用會(huì)干擾閱讀。我們應(yīng)該考慮實(shí)際情況的影響。第一選擇。

2. Lottie開(kāi)源動(dòng)畫(huà)庫(kù)

通常我們會(huì)做很多復(fù)雜的app效果，在實(shí)際登陸過(guò)程中會(huì)遇到很多問(wèn)題，比如：Gif圖形亂碼，占用內(nèi)存太多，開(kāi)發(fā)成本太高。

然后Airbnb的開(kāi)源動(dòng)畫(huà)庫(kù)Lottie非常有效地解決了這一系列問(wèn)題。 Lottie可以直接使用AE導(dǎo)出的JSON動(dòng)畫(huà)文件，將它們解析為本機(jī)代碼，并在iOS和Android設(shè)備平臺(tái)上運(yùn)行它們。

« 傳統(tǒng)的企業(yè)網(wǎng)站優(yōu)化需要通過(guò)幾個(gè)維修點(diǎn)。在過(guò)去 | 如何在點(diǎn)對(duì)點(diǎn)競(jìng)爭(zhēng)的情況下惡意推廣醫(yī)療推廣程序 »