文章為作者基于自身經(jīng)驗(yàn)，對(duì)極簡風(fēng)格設(shè)計(jì)的相關(guān)總結(jié)，希望可以給你帶來幫助。
手機(jī)最開始出現(xiàn)只是為了通話，后來可以發(fā)短信，拍照片，聽音樂，看視頻。到現(xiàn)在手機(jī)完全成了我們身體的延伸，沒有手機(jī)我們可能會(huì)很快的與這個(gè)社會(huì)脫節(jié)。可以預(yù)見一款產(chǎn)品/app所能完成任務(wù)是越來越多的，最典型的就是支付寶。支付寶里任何一個(gè)模塊單拎出來就可以是一個(gè)單獨(dú)的app。
極簡風(fēng)格
在內(nèi)容越來越多的前提下，設(shè)計(jì)師應(yīng)該減少無用信息的干擾讓用戶可以快速聚焦的到內(nèi)容本身，這種“少即是多”設(shè)計(jì)思路就是我們常說的極簡風(fēng)格。那么設(shè)計(jì)師如何將極簡風(fēng)格應(yīng)用到自己的產(chǎn)品中呢？下面我會(huì)做一個(gè)簡單的分析，希望可以幫助到大家。
刪減不必要的元素
極簡風(fēng)格最簡單粗暴的實(shí)現(xiàn)手法就是刪減與用戶任務(wù)無關(guān)的非功能性元素，只保留重要的信息，減輕用戶的認(rèn)知負(fù)荷。
那么如何去判斷一個(gè)設(shè)計(jì)元素的取舍呢？設(shè)計(jì)師應(yīng)該問自己以下三個(gè)問題：
這個(gè)設(shè)計(jì)元素在當(dāng)前界面中是起什么作用的？能夠完成什么 樣功能？
去掉以后是否會(huì)影響用戶正常操作？
如果影響用戶操作，可否有更簡潔的設(shè)計(jì)元素來替代？
前幾天有一個(gè)朋友問我，微博界面中每條動(dòng)態(tài)下面的icon能否去掉。這里icon的使用主要是用于提升信息的可讀性，因?yàn)橄鄬?duì)于文本信息，具象元素可以更好的完成信息的傳達(dá)。但是這只是起到一個(gè)提升作用，即使我把icon拿走，用戶也會(huì)知道這三個(gè)是轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊。
所以這里的icon是可以去掉的嗎？當(dāng)然不是，我們要考慮不同的使用場(chǎng)景。當(dāng)這條動(dòng)態(tài)沒有任何人點(diǎn)贊，評(píng)論，轉(zhuǎn)發(fā)的時(shí)候，我們把icon拿走是沒有問題的。但是一旦出現(xiàn)了互動(dòng)，那么icon就完全取代了文字成為這個(gè)功能唯一的可識(shí)別性元素，后面的數(shù)目顯示的是互動(dòng)強(qiáng)度。即使我一直很推崇的“一個(gè)”應(yīng)用，它的界面設(shè)計(jì)簡單到不能再簡單，在這里還是保留了icon，所以我傾向于保留，當(dāng)然如果你有更好的方案歡迎留言交流。
多態(tài)組件的應(yīng)用
刪減次要元素并不是萬能的，因?yàn)橛械臅r(shí)候，你進(jìn)行了刪減之后發(fā)現(xiàn)界面中內(nèi)容還是很多。那么在這種情況下，設(shè)計(jì)師應(yīng)該學(xué)會(huì)應(yīng)用多態(tài)組件。所謂多態(tài)組件的意思就是一個(gè)組件可以完成多個(gè)功能，這樣也可以有效的減少界面中的元素。
例如，支付寶的支付界面，立即支付按鈕可以跳轉(zhuǎn)到付款成功的狀態(tài)，這時(shí)候就沒有必要再用彈框給用戶提示了。這里的多態(tài)按鈕除了供用戶點(diǎn)擊之外還可以完成信息傳遞的功能。
微信最新的一次改版也很好的體現(xiàn)出多態(tài)組件的應(yīng)用，之前用戶如果想刪除與一個(gè)好友的聊天記錄，點(diǎn)擊“刪除”以后會(huì)從界面底部彈出actionsheet來供用戶進(jìn)行刪除確認(rèn)(不好意思，忘截圖了)。但是微信最新的一次改版，對(duì)刪除確認(rèn)這一步驟進(jìn)行了簡化。整個(gè)刪除流程用戶的注意力會(huì)一直停留在在當(dāng)前的這條聊天記錄上，不會(huì)轉(zhuǎn)移到界面底部的actionsheet，這種小細(xì)節(jié)的優(yōu)化真的很讓人眼前一亮。
多態(tài)組件的應(yīng)用可以幫助設(shè)計(jì)師進(jìn)一步簡化界面中的信息。當(dāng)然這就要求設(shè)計(jì)師對(duì)設(shè)計(jì)組件做到足夠的了解，逐個(gè)分析不同的組件的優(yōu)缺點(diǎn)和適用場(chǎng)景。以底部按鈕為例，
這是最常見的一個(gè)底部按鈕樣式，能夠應(yīng)付大部分的使用場(chǎng)景。因?yàn)槠湟话愣紩?huì)采用面狀按鈕，大面積的色塊能夠達(dá)到吸引用戶注意力的目的。當(dāng)然有的時(shí)候，不需要按鈕這么顯眼，我們則可以換種樣式，最典型的就是“退出登錄”按鈕，沒有設(shè)計(jì)師希望用戶可以很輕易的發(fā)現(xiàn)退出產(chǎn)品的路徑。
這種按鈕樣式的有兩個(gè)缺點(diǎn)，第一就是不能浮動(dòng)的，當(dāng)界面內(nèi)容過多的時(shí)候，用戶需要滑動(dòng)很久才能看到界面下方的按鈕，降低了產(chǎn)品的易用性。當(dāng)然我們加一個(gè)背景框做成浮動(dòng)樣式固定在界面底部，這個(gè)問題也隨之解決了。
它的第二缺點(diǎn)是只適合展示1-2個(gè)按鈕的場(chǎng)景，3個(gè)以上的按鈕就很難勝任了。而且這里的優(yōu)先級(jí)區(qū)分只能通過改變（圓角）矩形的樣式來實(shí)現(xiàn)，例如面狀對(duì)線狀，紅色背景對(duì)藍(lán)色背景。要解決這個(gè)問題，我們不妨看看下面這個(gè)按鈕樣式。
這種底部按鈕現(xiàn)在比較火，很多主流產(chǎn)品都采用這種樣式。突然的爆火不是沒有緣由的，它的的優(yōu)點(diǎn)就在于可以完美解決上面的第二個(gè)問題。因?yàn)閕con的引入一方面釋放了界面的空間，最多可以放五個(gè)按鈕。而且樣式更加多變，可以是“文字+色塊”也可以是“文字+icon”,而且尺寸與配色可以根據(jù)優(yōu)先級(jí)來進(jìn)行設(shè)置，設(shè)計(jì)師可發(fā)揮的空間會(huì)大一點(diǎn)。
但是這種底部按鈕樣式也是有缺點(diǎn)的，iPhone X因?yàn)榈撞縃ome Indicator的存在給我們的適配帶來了很多不便。有的產(chǎn)品在適配的時(shí)候改變了樣式，破壞了用戶體驗(yàn)的一致性。
可能會(huì)有設(shè)計(jì)師說，我只是一個(gè)UI設(shè)計(jì)師，這里面選擇什么組件不是我來決定的，這是交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理的工作。我一直所提倡的UI設(shè)計(jì)師要懂交互和產(chǎn)品，如果他們給的交互稿原型圖不合理，你可以去反向去影響他們。只是被動(dòng)的去給他們的原型圖上色而不去思考，這樣我們很難得到提升。
重點(diǎn)突出
為什么極簡風(fēng)格設(shè)計(jì)我們還要考慮重點(diǎn)突出呢？因?yàn)橛械脑O(shè)計(jì)師過于追求簡單，導(dǎo)致整個(gè)界面看起來跟原型圖一樣，特別的平淡。其實(shí)真正的極簡風(fēng)格設(shè)計(jì)是在界面簡單的基礎(chǔ)上還要做到重點(diǎn)信息突出，讓用戶在快速瀏覽的模式下可以看到他們感興趣的內(nèi)容。
極簡風(fēng)格的設(shè)計(jì)理念提倡：一個(gè)界面只有一個(gè)焦點(diǎn)。我們會(huì)經(jīng)常會(huì)看到一些設(shè)計(jì)師做的界面非常的繁雜，讓人抓不住重點(diǎn)。當(dāng)然這不一定全是設(shè)計(jì)師的鍋，有的時(shí)候腦殘的產(chǎn)品經(jīng)理要求這個(gè)要突出，那個(gè)強(qiáng)調(diào)，導(dǎo)致整個(gè)界面都充斥著大紅大紫，特別的凌亂。
但是有的設(shè)計(jì)師矯枉過正，為了凸顯主要功能，過于弱化次要功能，這也是不可取的。例如，上面這個(gè)界面中“小紅點(diǎn)”，當(dāng)然這里應(yīng)該說“小黃點(diǎn)”。因?yàn)檫@里把紅色改成了黃色，對(duì)于這個(gè)改法我非常的理解。因?yàn)榧t色特別的刺眼，改成黃色的確舒服多了。但是！“小紅點(diǎn)”的工作原理就是用戶對(duì)界面和諧統(tǒng)一的追求，這里突然出現(xiàn)了一個(gè)紅點(diǎn)，非常突兀，所以會(huì)忍不住的想去點(diǎn)擊。如果你把紅色改成了黃色，用戶就無法注意到新消息提醒，小紅點(diǎn)的作用也無法起到。這個(gè)屬于過度弱化次要功能。
