[[140382]]

美國(guó)在2014年初，透過(guò)行動(dòng)裝置的上網(wǎng)量正式超越了桌面電腦，從此確立了行動(dòng)裝置取代桌面電腦成為一般大眾接受資訊的主流終端。也因此越來(lái)越多的 Start-up 將自己的產(chǎn)品重心放在行動(dòng) APP 上面。然而隨著市場(chǎng)上的 APP 數(shù)量爆發(fā)性成長(zhǎng)，如何從眾多的產(chǎn)品中吸引使用者、黏住使用者，使用者經(jīng)驗(yàn)設(shè)計(jì)變成了其中一個(gè)很重要的環(huán)節(jié)。

使用者經(jīng)驗(yàn)設(shè)計(jì)的范疇非常大，包含了解使用者、挖掘使用者潛在動(dòng)機(jī)到易用性、美學(xué)等等，通俗點(diǎn)來(lái)說(shuō)，如何讓一個(gè)產(chǎn)品給使用者爽的感覺(jué)，其中所包含的知識(shí)與方法都是所謂使用者經(jīng)驗(yàn)設(shè)計(jì)。

在整個(gè) APP 的設(shè)計(jì)之中，介面與使用流程是使用者最直接體驗(yàn)到產(chǎn)品好壞的地方，即便你在前期研究發(fā)想，抓住了很棒的價(jià)值訴求、問(wèn)題解決方式，而在 APP 設(shè)計(jì)上的***一步－－介面與流程給使用者不好的印象，你前面的努力便功虧一簣，由此可以見(jiàn)介面設(shè)計(jì)的重要性。

這篇文章將會(huì)帶大家實(shí)地重新設(shè)計(jì)一個(gè)簡(jiǎn)單的 APP 介面，從中讓大家熟悉介面設(shè)計(jì)上的思考方式。整個(gè)設(shè)計(jì)的流程包含：

• 框定你的設(shè)計(jì)范圍
• 整理你的資訊架構(gòu)
• 考慮資訊的不同狀態(tài)
• 考慮資訊的流動(dòng)性
• 發(fā)揮你的美感

里頭我會(huì)使用最近給一位朋友的產(chǎn)品－－Phofun 介面上的建議與修改方案為例帶大家思考。

Phofun 是一款讓朋友間彼此販賣(mài)創(chuàng)意照片的社群 APP。在里頭每個(gè)人給每張照片定價(jià)，并用一句話形容照片后分享給朋友，收到照片的朋友，一開(kāi)始沒(méi)辦法看到照片，只能從這張照片的敘述以及價(jià)格，來(lái)決定自己要不要使用 APP 內(nèi)的金幣來(lái)實(shí)際觀看這張照片，觀看后讓使用者即時(shí)回饋評(píng)價(jià)這張照片。

簡(jiǎn)單地說(shuō)，這是一個(gè)藉由窺看慾望以及虛擬經(jīng)濟(jì)為驅(qū)動(dòng)的照片社群，最近 Phofun 想要讓社群從認(rèn)識(shí)的朋友彼此分享擴(kuò)展為讓不認(rèn)識(shí)的朋友也可以互相分享販賣(mài)照片，也就是要建立一個(gè)賣(mài)場(chǎng)，讓全世界彼此不認(rèn)識(shí)的人，也可以購(gòu)買(mǎi)觀看互相的照片。

在開(kāi)發(fā)過(guò)程中，我朋友他還沒(méi)有細(xì)想賣(mài)場(chǎng)的介面便直接開(kāi)發(fā)了，以下這張圖是當(dāng)時(shí)開(kāi)發(fā)中的介面，看到這張圖以后你會(huì)怎么重新設(shè)計(jì)它呢？

看起來(lái)不知道從哪里下手嗎？

來(lái)跟著我一起一步步去整理自己的思緒重新設(shè)計(jì)它吧！

框定設(shè)計(jì)范圍

動(dòng)手設(shè)計(jì)之前，先問(wèn)問(wèn)自己「我可以設(shè)計(jì)的范圍在哪里？」，有些專案可以從前期調(diào)查開(kāi)始挖掘需求、有些專案已經(jīng)定下了商業(yè)目標(biāo)得從互動(dòng)設(shè)計(jì)上發(fā)揮……，每次設(shè)計(jì)都要先厘清你這次設(shè)計(jì)可以發(fā)揮的限制在哪里，避免自己一頭熱***設(shè)計(jì)出開(kāi)發(fā)上來(lái)不及、無(wú)法融入現(xiàn)有產(chǎn)品的產(chǎn)品。

而在這次介面設(shè)計(jì)案例中，我無(wú)法重新定義需求、無(wú)法定義使用者與產(chǎn)品的互動(dòng)方式以及產(chǎn)品設(shè)計(jì)語(yǔ)言等等，我們能做的是最基礎(chǔ)的介面設(shè)計(jì)。在這個(gè)階段，我們的設(shè)計(jì)目標(biāo)是要確保介面表達(dá)出適當(dāng)及適合的資訊，讓使用者清楚理解介面互動(dòng)的方式。

整理你的資訊架構(gòu)

在拿起你的鉛筆開(kāi)始畫(huà)介面之前，先思考你的介面上需要呈現(xiàn)什么資訊。

首先是整理你的產(chǎn)品資訊架構(gòu)（Information Architecture），也就是在你的產(chǎn)品中里頭的資訊彼此的關(guān)連性、階層關(guān)系，進(jìn)而去設(shè)計(jì)這些資訊以什么方式組織呈現(xiàn)給使用者。

在我們的案例中，賣(mài)場(chǎng)里頭賣(mài)的是照片，我們需要先思考每一張上架的照片呈現(xiàn)哪些資訊，并且同時(shí)思考這些資訊彼此的關(guān)系。比如說(shuō)在照片資訊內(nèi)，里頭的賣(mài)價(jià)與倒數(shù)時(shí)間是一塊的，可以把它分類出來(lái)，方便之后介面上設(shè)計(jì)。

整理結(jié)果如上圖所示，有了他之后我們才能了解到這個(gè)介面需要呈現(xiàn)哪些資訊、這些資訊的分類關(guān)系。

為什么要知道這兩點(diǎn)呢？因?yàn)榱私饬诵枰尸F(xiàn)哪些資訊，你才知道介面上要放什么資訊；了解了這些資訊的分類關(guān)系，你才知道資訊要怎么放在介面上。

在介面上，我們會(huì)傾向會(huì)把同類的內(nèi)容與互動(dòng)元件放在一起，讓使用者更容易理解元素之間的關(guān)系。那為什么放在一起會(huì)讓使用者更容易理解呢？那是因?yàn)樵谠蚴窃?a target="_blank">完形心理學(xué)里頭有所謂的接近法則（law of proximity），如果兩個(gè)元素緊密地放在一起，人類會(huì)將這兩個(gè)東西建立關(guān)聯(lián)，即使是不相似的事物也可能因?yàn)榫嚯x相近，而在視覺(jué)上產(chǎn)生群組效果，比如說(shuō)下圖左右兩邊都有圓形，但你不會(huì)把這兩個(gè)圓形當(dāng)做同一個(gè)群組的元素。

考慮資訊的不同狀態(tài)

接下來(lái)，要考慮介面上資訊的不同狀態(tài)，因?yàn)?APP 介面并不是一張畫(huà)在固定大小紙上的畫(huà)，而是可與使用者互動(dòng)來(lái)變化自己部分介面資訊。比如說(shuō)在我們的案例中，每一張照片有著「我還沒(méi)買(mǎi)過(guò)」、「我已經(jīng)買(mǎi)過(guò)的狀態(tài)」，而評(píng)價(jià)資訊上則會(huì)有「我還沒(méi)評(píng)價(jià)」「我已經(jīng)評(píng)價(jià)」的不同狀態(tài)。

這些狀態(tài)會(huì)隨著使用者的互動(dòng)而變，并且也是需要呈現(xiàn)在介面上讓使用者看見(jiàn)，藉由這些狀態(tài)變化的資訊，使用者才能感受到自己與系統(tǒng)正在互動(dòng)，并且理解自己的操作狀態(tài)。

考慮資訊的流動(dòng)性

除了介面的不同狀態(tài)外，介面設(shè)計(jì)與平面設(shè)計(jì)的差別還有在於資訊是流動(dòng)的，也就是介面上的資訊并不是固定長(zhǎng)度的，比如說(shuō)每個(gè)人的 ID 名字長(zhǎng)度不一樣、照片敘述的長(zhǎng)度也不一樣、剩下的倒數(shù)時(shí)間不一樣、評(píng)價(jià)數(shù)也是不一樣的，而這些不同長(zhǎng)度的文字有可能會(huì)在畫(huà)面上與其他 UI 元素碰撞，比如說(shuō)底下這個(gè)購(gòu)買(mǎi)介面，當(dāng)商品名過(guò)長(zhǎng)時(shí)會(huì)覆蓋到付款的按鈕。

這個(gè)問(wèn)題有以下三種處理方式：

• 限制長(zhǎng)度

限制長(zhǎng)度可以分為輸入限制以及顯示限制，輸入限制是指使用者在輸入資訊時(shí)，限制他可以輸入的字元長(zhǎng)度；顯示限制則是當(dāng)資訊長(zhǎng)度超過(guò)顯示范圍時(shí)，則隱藏過(guò)長(zhǎng)的資訊，最常使用的是截?cái)噘Y訊后加上刪節(jié)號(hào)（ellipsis）。

• 動(dòng)態(tài)調(diào)整大小

根據(jù)不同的文字長(zhǎng)度，在不失可讀性范圍內(nèi)去動(dòng)態(tài)縮小文字。讓文字根據(jù)長(zhǎng)度自適應(yīng)大小。

• 動(dòng)態(tài)調(diào)整顯示形式

有些資訊有不只一種的表達(dá)方式，當(dāng)資訊過(guò)長(zhǎng)時(shí)可以使用比較簡(jiǎn)短的表達(dá)方式，比如說(shuō) September 換成 Sep.、1200 換成 1.2K、1分30秒換成 90 秒……等等。

對(duì)於介面上要呈現(xiàn)的資訊都思考過(guò)以后，你就可以在紙上打草圖或是使用 Axure RP、Balsamiq 等原型工具畫(huà) wireframe。

#p#

發(fā)揮你的美感

當(dāng)草圖畫(huà)完，檢查確認(rèn)后沒(méi)有問(wèn)題后，打開(kāi)你的 Photoshop、Illustrator 或是 Sketch來(lái)畫(huà)出漂亮的視覺(jué)稿吧！

最終的方案中，可以看見(jiàn)我是怎么將之前整理的資訊表現(xiàn)在介面上：

我把資訊架構(gòu)中同一族群的元素放在一塊，比如說(shuō)把價(jià)錢(qián)與購(gòu)買(mǎi)倒數(shù)時(shí)間一塊放在右上角，讓使用者一眼就知道購(gòu)買(mǎi)相關(guān)的資訊。對(duì)於介面不同狀態(tài)的表現(xiàn)，我讓使用者已經(jīng)購(gòu)買(mǎi)的照片背景轉(zhuǎn)暗，表示對(duì)照片已經(jīng)操作過(guò)了；購(gòu)買(mǎi)資訊（價(jià)錢(qián)與購(gòu)買(mǎi)倒數(shù)時(shí)間）對(duì)使用者來(lái)說(shuō)也已經(jīng)沒(méi)有意義了，所以將他隱藏起來(lái)?yè)Q為「已購(gòu)買(mǎi)」字樣；對(duì)照片評(píng)價(jià)的部份，我運(yùn)用小花、大便與評(píng)論的 icon 顏色來(lái)表現(xiàn)使用者有沒(méi)有對(duì)照片評(píng)價(jià)，而對(duì)於不同長(zhǎng)度的資訊，我分別對(duì)他們做不同的處理：

• 倒數(shù)時(shí)間：只顯示***單位的時(shí)間，比如說(shuō)還剩 1 天 20 小時(shí) 5 分，只顯示 1 天，理由是在 Phofun 賣(mài)場(chǎng)里，并不像拍賣(mài)喊價(jià)應(yīng)用對(duì)時(shí)間資訊有這么高的需求，所以隱藏到對(duì)使用者重要度沒(méi)這么高的時(shí)間訊息。
• 評(píng)價(jià)數(shù)量：運(yùn)用一千轉(zhuǎn)為 1K 、一百萬(wàn)轉(zhuǎn)為 1M 的方式，限制評(píng)價(jià)數(shù)量所用的字元數(shù)在三個(gè)以內(nèi)。
• 照片敘述：限制使用者只能輸入 70 字元，并且根據(jù)不同長(zhǎng)度的字?jǐn)?shù)動(dòng)態(tài)調(diào)整文字大小，小於 28 字元字體大小為 16px、 28 ~ 56 字元時(shí)字體為 15px 、而大於 56 字元時(shí)為 12px。

而***我評(píng)估認(rèn)為評(píng)價(jià)資訊中的購(gòu)買(mǎi)數(shù)，對(duì)使用者來(lái)說(shuō)并不是一個(gè)重要的指標(biāo)，使用者想了解的是其他人對(duì)這張照片的好壞，因此小花數(shù)、大便數(shù)以及評(píng)論數(shù)才是對(duì)使用者來(lái)說(shuō)重要的元素，因此去除購(gòu)賣(mài)數(shù)資訊，并且把可能需要對(duì)圖片進(jìn)行購(gòu)買(mǎi)、刪除以外的操作，像是檢舉、分享……等可能的操作藏在評(píng)價(jià)列最右邊的刪節(jié)號(hào)里頭，當(dāng)使用者點(diǎn)下刪節(jié)號(hào)才會(huì)出現(xiàn)更進(jìn)一步的選單。

開(kāi)始動(dòng)手設(shè)計(jì)你自己的 APP 介面

學(xué)習(xí)了怎么設(shè)計(jì) APP 介面后，你是不是手癢想趕快設(shè)計(jì)自己的 APP 了呢？趕快動(dòng)手開(kāi)始設(shè)計(jì)你的APP UI 吧！

設(shè)計(jì)完以后在底下留言，分享炫耀你所設(shè)計(jì)的 APP 介面吧！如果設(shè)計(jì)上遇到了什么問(wèn)題，也歡迎在底下留言發(fā)問(wèn)！