細(xì)節(jié)決定成敗:談?wù)刄I設(shè)計中3個易被忽略的設(shè)計元素

0 評論 7652 瀏覽 27 收藏 11 分鐘

用心做設(shè)計,哪怕最小的細(xì)節(jié)也應(yīng)該獲得我們足夠的重視,因為設(shè)計是互聯(lián)互通環(huán)環(huán)相扣的。

一款產(chǎn)品的成功取決于多方面因素之間的相互配合,但其中最重要的因素是優(yōu)秀的用戶體驗設(shè)計。而在當(dāng)前這個產(chǎn)品同質(zhì)化嚴(yán)重的時代,差異化用戶體驗設(shè)計可能更容易贏得用戶的青睞。這就意味著我們進(jìn)行設(shè)計的時候,要從那些容易被忽視的細(xì)節(jié)做起。這篇文章中,我將會從視覺反饋、微文案和留白,這些可能會被我們忽略,但卻極其重要的設(shè)計元素來研究細(xì)節(jié)是如何影響一款產(chǎn)品的用戶體驗。

視覺反饋

反饋在我們制定設(shè)計規(guī)范時經(jīng)常會被忽視,但它的存在實際上有效的梳理了產(chǎn)品的整個交互流程。交互設(shè)計其實可以看成是設(shè)計人與物(app或網(wǎng)站)之間的對話。如果沒有任何反饋,就相當(dāng)于聊天時的你滔滔不絕,但對方卻一言不發(fā),兩人之間毫無互動。從產(chǎn)品的角度而言,如果沒有反饋,用戶則無法得知當(dāng)下發(fā)生了什么,也無從確定自己操作的結(jié)果,更不必提要進(jìn)行下一步的操作。所以說無反饋,不交互。

良好的交互設(shè)計應(yīng)該確保用戶的每一次操作都能得到視覺反饋,無論成功與否,這會讓用戶體會到使用產(chǎn)品期間的一種安全感——一切盡在自己的掌控之中。視覺反饋的目的就是通過一種可視化、簡潔的形式向用戶展示操作的結(jié)果以及當(dāng)前系統(tǒng)所處的狀態(tài)。

我們在手機上進(jìn)行點擊、滑動等操作時,按鈕、控件和其他交互元素通過改變自身形態(tài)做出響應(yīng),為我們提供反饋。這種反饋模式會拉近用戶與產(chǎn)品之間的距離,因為用戶可以容易的感受到自己在同屏幕中的元素進(jìn)行直接真實的互動。

功能性動畫可以讓用戶及時獲知狀態(tài)的變更。

加載動畫向用戶展示系統(tǒng)的實時狀態(tài),使用戶能夠快速了解目前發(fā)生了什么。

微文案

微文案是指引導(dǎo)用戶操作的小段文字,在APP和網(wǎng)站中,微文案的應(yīng)用包括按鈕上的標(biāo)簽,錯誤提醒和提示文字。在使用過程中,用戶主要注意力可能都在頁面的排版布局和配色上,這些微文案的存在似乎并不顯眼。但如果恰當(dāng)?shù)氖褂梦⑽陌?,這將會給產(chǎn)品帶來魔法般的效果。以下就是微文案如何給設(shè)計添彩的具體實例。

人性化表達(dá)

我們一直提倡做一款減少機械感卻有溫度的產(chǎn)品。如果微文案的使用可以借朋友之間對話的口吻,這會在無意間提升產(chǎn)品的用戶友好度。拉近與用戶之間的距離,讓用戶會更容易信任這款產(chǎn)品。

安慰

微文案中的報錯提示會極大的影響用戶對于該產(chǎn)品的友好度,但我們卻常常忽視它存在的重要性。

用戶使用app或者網(wǎng)站都是為了解決特定需求的。例如想買一件衣服,看一場球賽直播或者是查看明天的天氣情況。一旦出現(xiàn)系統(tǒng)錯誤導(dǎo)致進(jìn)程受阻,這將給用戶帶來沮喪和焦慮情緒,使用戶失去繼續(xù)使用app或者網(wǎng)站的耐心。此時微文案的作用就可以凸顯出來。

系統(tǒng)報錯時極易引起用戶不適的心情,措辭不當(dāng)?shù)奈陌竸t可能直接讓用戶抓狂。

上面這個報錯提示可以說是一個反面典型,“An error occurred”(出錯啦)這句模棱兩可的話很難讓用戶信服。報錯?到底報什么錯了,為什么會報錯,我接下來應(yīng)該怎么做?

從另一個角度說,在系統(tǒng)報錯的時候,良好的微文案使用會起到安撫用戶的作用,讓用戶在遇到問題時可以坦然面對。

報錯提示在做到準(zhǔn)確友好的同時,還要告訴用戶解決方案。

緩解用戶負(fù)面情緒

微文案的使用要考慮具體場景,因為微文案本身即為引導(dǎo)性文字,它就是為解決用戶心中的疑惑而存在。例如在支付寶的支付設(shè)置頁面中,我們可以在頁面底部看到“賬戶安全保障中”的文案。因為涉及到金錢交易時,用戶都是極其慎重的,所以支付寶通過細(xì)節(jié),竭力來提升用戶使用期間的安全感。這里微文案的使用就是通過強調(diào)資金的安全性來消除用戶內(nèi)心的不安。

留白

留白(或負(fù)空間)是指頁面中設(shè)計師沒有放置任何元素的區(qū)域。留白不代表一定要使用白色,而是預(yù)留出一定空間來組織頁面空間中的其余元素。雖然很多人認(rèn)為留白純粹屬于浪費寶貴的空間,但不可否認(rèn)留白依舊是UI設(shè)計中的一個重要元素。

提升頁面可讀性

頁面中展示過多的信息會增加用戶閱覽的難度。對于那些覺得頁面就應(yīng)該塞得滿滿當(dāng)當(dāng)?shù)目蛻?,我們給他們看下面這個圖。

對于用戶,雜亂的排版不存在任何吸引力,尤其是當(dāng)前頁面沒有任何的層級結(jié)構(gòu),用戶更是毫無閱讀興趣。

使用留白主要是受限于人類短暫的記憶力,我們的短期記憶可以容納的信息極少(在未經(jīng)復(fù)述的條件下,大部分信息在短期記憶中保持的時間很短,通常在5-20秒,最長不超過1分鐘)。用戶看到一個頁面,如果里面展示的信息過多,用戶就會處理不過來。使用留白就可以減少當(dāng)前頁面中元素的數(shù)目,提升頁面的可讀性。

Medium通過合理的留白應(yīng)用提升了文字和圖片的可讀性。

吸引用戶注意力

用戶的注意力是寶貴的資源,應(yīng)該得到合理的分配。我遇到過很多客戶,他們說這里要使用大紅色突出,那里要放大字體吸引用戶注意。在他們的設(shè)想中,頁面里的任何一個元素都要強調(diào)出來,但是殊不知頁面中視覺重點有且只有一個,過多的給予對于用戶來說其實是一種負(fù)擔(dān)。少即是多,這是互聯(lián)網(wǎng)時代的信條。

谷歌搜索的網(wǎng)站出現(xiàn)了大面積的留白,用戶的目光自然就會被吸引到搜索框。這和谷歌的初衷相契合,他們希望用戶在這個頁面完成搜索操作,所以不用展示過多其他的信息來分散用戶的注意力。

建立層級關(guān)系

根據(jù)交互設(shè)計中的接近法則:當(dāng)對象之間距離太近時,用戶潛意識中會認(rèn)為它們是相似的。我們可以通過使用留白來建立不同元素之間的層級關(guān)系。例如,下圖中幾乎每一個人都會看到兩組點,而不是16個點。

對信息進(jìn)行整合分組會提升內(nèi)容的可讀性。下圖中右表格將15個字段分成3組。同樣數(shù)量的內(nèi)容,但用戶的印象卻大不相同。

總結(jié)

用心做設(shè)計,哪怕最小的細(xì)節(jié)也應(yīng)該獲得我們足夠的重視,因為設(shè)計是互聯(lián)互通環(huán)環(huán)相扣的。

 

本文由 @王M爭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!