摘要: 產(chǎn)品設(shè)計(jì)是一個(gè)不斷迭代優(yōu)化的過程。大家都喜歡做新東西，接手別人的產(chǎn)品開始做優(yōu)化，比一個(gè)產(chǎn)品從頭開始，還要難。平庸的設(shè)計(jì)師是拿來主義：別人有，我也得有。造成接手的產(chǎn)品越來越復(fù)雜，越來越龐大?；蛘咄耆频?…

產(chǎn)品優(yōu)化的加減法

產(chǎn)品設(shè)計(jì)是一個(gè)不斷迭代優(yōu)化的過程。大家都喜歡做新東西，接手別人的產(chǎn)品開始做優(yōu)化，比一個(gè)產(chǎn)品從頭開始，還要難。平庸的設(shè)計(jì)師是拿來主義：別人有，我也得有。造成接手的產(chǎn)品越來越復(fù)雜，越來越龐大?；蛘咄耆频怪貋恚o開發(fā)人員帶來很大的工作量。優(yōu)秀的設(shè)計(jì)師而是結(jié)合分析產(chǎn)品現(xiàn)有功能架構(gòu)，在讓產(chǎn)品更好用的方向上，對產(chǎn)品進(jìn)行優(yōu)化。這個(gè)優(yōu)化可以是功能的增減，也可以是視覺的合并、重繪。

1 加還是減？

在開發(fā)的過程中，總能想到各種各樣的新功能，新的想法也不斷涌現(xiàn)，偶爾也會(huì)遇到一些想當(dāng)出色的想法。但對于一個(gè)產(chǎn)品而言，太多的功能或許并不是一件好事，尤其是那些用戶幾乎用不到的超前功能，盲目的加上去只會(huì)令人產(chǎn)生困擾。這個(gè)時(shí)候，我們更需要的就是對產(chǎn)品做減法，去掉那些不必要的功能。但是減法，往往更是一個(gè)令人頭痛的問題。

“簡單”和“簡潔”是兩個(gè)不同的概念。簡潔更多的是一種可以被看到的，更傾向于界面的設(shè)計(jì)風(fēng)格方面；而簡單，則是一種難以被直接看到的，貫穿了整個(gè)產(chǎn)品設(shè)計(jì)中的思想。

簡潔的界面，其根本目的是為了降低用戶的學(xué)習(xí)成本。而這種創(chuàng)新的設(shè)計(jì)，平白的為用戶增加了不必要的學(xué)習(xí)成本，與設(shè)計(jì)的初衷已經(jīng)背道而馳。對于開發(fā)維護(hù)的工程師來說，也增加了開發(fā)和測試的代碼維護(hù)成本。

為了保持簡潔的風(fēng)格，去掉一些不常用的按鈕，確實(shí)是有意義的；但是從用戶的角度而言，用法保持簡單，使用路徑最短，直達(dá)用戶所需，才是更重要的事情。

2 哪些是可以去掉的?

如何讓雜亂又咄咄逼人的網(wǎng)頁變得輕薄簡潔而美觀，又需保留完整功能、同時(shí)很好的區(qū)分出重點(diǎn)模塊？需求如山一樣堆積，該先做哪個(gè)，再做哪個(gè)，是產(chǎn)品經(jīng)理的斷舍離難題！

2-1保留有效元素

如果一個(gè)頁面上有一段文字一張圖畫一個(gè)按鈕，用戶會(huì)怎么做？人自然而然的目光順序是：先看圖畫——再看文字——點(diǎn)擊按鈕。但是，當(dāng)一個(gè)頁面上有好幾段混排的圖文，好幾個(gè)并列的按鈕，按鈕上還有數(shù)字、圖標(biāo)，用戶就開始疑惑了：

“我是先看這張圖還是先看那張圖呢？

“這么些個(gè)按鈕，我該先點(diǎn)哪個(gè)？是挨個(gè)點(diǎn)一遍，還是全部忽略？”

當(dāng)用戶一旦對你設(shè)計(jì)的一排按鈕，熟視無睹時(shí)，最糟糕的事情已經(jīng)發(fā)生了——用戶從心理上已經(jīng)拒絕和你的產(chǎn)品進(jìn)行互動(dòng)了！

那些多余的，會(huì)被大多數(shù)用戶的眼睛自動(dòng)忽視的功能，就是界面上的無效元素，去掉這些無效元素吧，這能大大提高你的界面使用效率，并且還能降低開發(fā)、維護(hù)、測試的成本！

2-2去掉低頻元素

層級清晰，從一開始的交互操作和產(chǎn)品架構(gòu)開始，可以寫下必須要的產(chǎn)品步驟：啟動(dòng)——首頁——列表——內(nèi)容——操作——結(jié)果，盡量去掉其它一切不需要的點(diǎn)擊，盡可能的縮短用戶的使用路徑。

下面是一些你可能精簡的層級，請注意這僅僅是一個(gè)指導(dǎo)，確切的需求將依賴于你的具體設(shè)計(jì)：

1跳轉(zhuǎn)到編輯頁面——在同一個(gè)頁面上，所見即所及，當(dāng)頁修改，當(dāng)頁顯示修改后結(jié)果。

2占一行的純提示性文字——道理同上，所見即所及，盡量減少那些不可操作的、純用來做提示、分類、標(biāo)題的文字。

3二級導(dǎo)航頁面——如果一級導(dǎo)航可以看做是不同功能模塊的分組，那么二級導(dǎo)航頁面的使用效率就會(huì)極大的下降，畢竟在移動(dòng)APP上，上下滑動(dòng)是最高效的操作方式，切換就不必了。

4超過一屏幕的文字說明——閱讀咨詢類產(chǎn)品設(shè)計(jì)師，已經(jīng)花費(fèi)了大量的時(shí)間精力，在移動(dòng)APP上的大段的文字排版工作上，除非你是法律說明，其他任何形式的提示、說明、引導(dǎo)，還是考慮用控件、圖片或者互動(dòng)動(dòng)畫來解決吧。

2-3合理布局

如果一個(gè)頁面有太多的元素，用戶將迷惑于去看哪里或誤解每個(gè)元素的優(yōu)先級。優(yōu)秀的設(shè)計(jì)師需要用設(shè)計(jì)語言將焦點(diǎn)正好引導(dǎo)到正確的內(nèi)容上，正如提到的，極簡的網(wǎng)頁視覺能夠?qū)⒆钪匾膬?nèi)容帶到最前面并為用戶避免分散注意力，比如，在一個(gè)黑白設(shè)計(jì)上的任何色斑，都會(huì)引起用戶的注意力，色彩本身也將成為焦點(diǎn)。

設(shè)計(jì)開始之初，從原型稿到視覺稿的轉(zhuǎn)化過程中，擅長圖形化識別的視覺設(shè)計(jì)師們，在面對繁雜而單調(diào)的線稿內(nèi)容時(shí)，往往急于上馬大施拳腳展開創(chuàng)作，缺忽略了清晰梳理判斷整體頁面結(jié)構(gòu)的重要環(huán)節(jié)。

哪些屬于重點(diǎn)模塊需要突出展示，哪些次要模塊可以移動(dòng)到更優(yōu)化的布局或者精簡合并？這是一個(gè)需要長期經(jīng)驗(yàn)積累，不斷磨練耐心和提高理解判斷能力的成長過程，也是職業(yè)化的開端。

排版布局中的平衡、對齊及對比關(guān)系，對頁面視覺效果至關(guān)重要。如果畫面效果頭重腳輕，或者左右不均衡，會(huì)讓用戶感覺到壓迫感，從而影響到瀏覽信息的順暢。雖然大部分的布局可以通過空白和良好的線框?qū)崿F(xiàn)，還是要特別注意一下設(shè)計(jì)的基本原則。與極簡設(shè)計(jì)相關(guān)的三個(gè)最重要的因素是平衡、對齊和對比。

實(shí)現(xiàn)簡化設(shè)計(jì)的第一步，不是簡單的去掉大部分圖片，而是要重新考慮內(nèi)容并將其簡化到無遮蓋的需求。只有那樣才能讓頁面中最重要的元素實(shí)現(xiàn)其預(yù)期的效果。

3 怎么下刀?

有三個(gè)方法：

3-1瞇眼測試法

移動(dòng)APP多數(shù)使用場景是在車上、路上、廁上，晃動(dòng)的、局促的、幽暗地方，是測試你的界面是否簡潔的最好環(huán)境。視力不好的人，手太小的人，單手操作都多少有點(diǎn)困難的人，是你最佳的測試用戶。

就用“瞇眼”測試法來檢驗(yàn)一下你手中的產(chǎn)品吧：在一屏界面上，瞇著眼睛，單手操作，畫出3個(gè)最吸引目光最容易操作的地方，這三個(gè)地方，擺放你最重要的三個(gè)功能或者界面元素！其他的統(tǒng)統(tǒng)砍掉收，舍不得砍掉？那就用抽屜歸類的方法，藏起來！

3-2倒數(shù)砍頭法

當(dāng)我們列出一長串功能或者界面元素時(shí)，讓你選出最優(yōu)先，最重要，必須要做的功能，非常難，這個(gè)時(shí)候，采取倒數(shù)砍頭的方法：這里有10個(gè)功能，如果必須去掉3個(gè)，你選擇哪三個(gè)？這時(shí)候做選擇會(huì)比較容易，咔咔咔，砍掉3個(gè)。

剩下7個(gè)功能，如果再必須去掉3個(gè)，你選哪三個(gè)？這時(shí)候做選擇就比較謹(jǐn)慎和困難了。

再砍掉3個(gè)，剩下4個(gè)時(shí)候，最終討價(jià)還價(jià)再砍掉1個(gè)，剩下的3個(gè)功能或者界面元素就是你界面上最重要的3個(gè)了。用這三個(gè)功能來布局你的界面，服務(wù)你的用戶吧！

3-3進(jìn)1出1法

新版本迭代，要增加新功能？可以，沒問題！

還想要作為重要功能，主推給用戶？可以，也沒問題！

但是，進(jìn)1個(gè)新功能，必須出1個(gè)老功能。

這里說的老功能，并不是1.0版本就有的基礎(chǔ)功能，而是那些用戶使用中，統(tǒng)計(jì)數(shù)據(jù)顯示的低頻功能。這些功能，或去掉，或隱藏，讓你的界面是的主推功能更醒目！

本文作者：陳潔