神譯局是36氪旗下的編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場(chǎng)、生活等領(lǐng)域，重點(diǎn)介紹外國的新技術(shù)、新觀點(diǎn)、新風(fēng)向。

編者按：互聯(lián)網(wǎng)時(shí)代，你設(shè)計(jì)的產(chǎn)品只需要一秒就能激怒用戶。完美的產(chǎn)品體驗(yàn)離不開精心的細(xì)節(jié)設(shè)計(jì)。在這篇文章中，作者以“過來人”的身份，為大家介紹了8個(gè)容易被忽略卻十分重要的細(xì)節(jié)，希望能對(duì)大家有所啟發(fā)。本文來自Medium，作者Daniel Danielyan，原文標(biāo)題8 Overlooked Details by Beginner UI/UX Designers。

• 推薦閱讀：UX 設(shè)計(jì)的心理學(xué)指南

圖片來自Unsplash｜攝影Josh Calabrese

在設(shè)計(jì)一個(gè)重大工程的時(shí)候，人們時(shí)常會(huì)忘記一些簡(jiǎn)單但是容易被忽略的元素。以下提到的許多元素都是新手設(shè)計(jì)師可能會(huì)遺漏的。

1.忘記密碼的頁面

圖片來自Medium

新手設(shè)計(jì)師可能會(huì)出現(xiàn)這個(gè)問題：他們會(huì)記得設(shè)計(jì)注冊(cè)頁面、登陸頁面，但是會(huì)忘記去做忘記密碼的頁面，后者設(shè)計(jì)起來雖然簡(jiǎn)單，卻至關(guān)重要。

通常情況下，用戶可以通過郵件或者電話驗(yàn)證碼的方式找回密碼，通過這兩種方式設(shè)置新密碼，或者收到臨時(shí)密碼。

在一些APP或者網(wǎng)頁中，上述流程還可以進(jìn)一步完善。

比如如果用戶使用的是移動(dòng)端，那么通過郵件接收驗(yàn)證鏈接、設(shè)置新密碼的過程就會(huì)需要更多步驟。如果是手機(jī)驗(yàn)證碼，那么如果用戶更換了手機(jī)號(hào)碼，或者其他人開始使用這一號(hào)碼，那么就有可能出現(xiàn)賬戶安全的問題。

這些也是設(shè)計(jì)師們需要考慮和完善的地方。

2.404頁面

圖片來自Medium

404頁面其實(shí)是非常難設(shè)計(jì)的，它常會(huì)體現(xiàn)出設(shè)計(jì)師強(qiáng)烈的個(gè)人風(fēng)格。設(shè)計(jì)師們?cè)?04頁面上的設(shè)計(jì)是相對(duì)自由的，我們現(xiàn)在也可以看到許多優(yōu)秀的設(shè)計(jì)作品，有一些創(chuàng)意甚至是難以企及的。

我們當(dāng)然可以在頁面中間擺一個(gè)404符號(hào)，然后盡可能真誠地說明自己多么抱歉。但是更好的方式是在404頁面中植入創(chuàng)意，令用戶感到驚艷。比如Figma網(wǎng)頁的404頁面，我們可以拖動(dòng)“404”字符上的定點(diǎn)，將這三個(gè)數(shù)字自由改成抽象圖畫。

3.骨架屏和旋轉(zhuǎn)動(dòng)畫

左圖為骨架屏，右圖為旋轉(zhuǎn)動(dòng)畫｜圖片來自Medium

需要解釋一下，骨架屏（Skeleton）就是你在下拉頁面、在內(nèi)容未加載之前出現(xiàn)的板塊。當(dāng)你下拉Facebook的頁面時(shí)，出現(xiàn)的灰色部分就是骨架屏。

另外一個(gè)概念是旋轉(zhuǎn)動(dòng)畫（Spinner），旋轉(zhuǎn)動(dòng)畫往往是一個(gè)圈，顯示頁面正在加載中。

當(dāng)頁面上一次性有太多圖片、文字和其他信息時(shí)，或者當(dāng)我們需要的信息加載需要一定的時(shí)間時(shí)，我們就需要用到骨架屏和旋轉(zhuǎn)動(dòng)畫。有的時(shí)候，旋轉(zhuǎn)動(dòng)畫比具體的加載進(jìn)度更適合頁面，尤其是打開照片或者APP的時(shí)候。

有的時(shí)候，這兩個(gè)元素會(huì)疊加在一起，我們可能會(huì)在骨架屏上看到一個(gè)迷你版的旋轉(zhuǎn)動(dòng)畫。

許多設(shè)計(jì)師會(huì)忽略這兩個(gè)元素，直到有一天產(chǎn)品發(fā)展到一定程度，用戶的不滿倒逼他們加入這些設(shè)計(jì)。

4.檢索無結(jié)果的頁面

圖片來自亞馬遜頁面截圖

當(dāng)你設(shè)計(jì)電商網(wǎng)頁時(shí)，需要考慮搜索結(jié)果頁面如何設(shè)計(jì)。具體來說，你需要考慮產(chǎn)品以何種方式羅列，頁面如何安排。設(shè)計(jì)師往往會(huì)在這里花很大的功夫。

對(duì)于新手來說，可能會(huì)忘記“無結(jié)果”搜索頁面也需要精心設(shè)計(jì)，另外用戶在尚未購物的情況下，也要考慮“購物歷史”頁面如何設(shè)計(jì)。

5.付款未成功頁面

圖片來自Medium

在電商或者其他平臺(tái)的頁面上，設(shè)計(jì)師會(huì)精心準(zhǔn)備“付款成功”的頁面，卻往往忽略了設(shè)計(jì)“付款失敗/付款被拒絕”的頁面。在這樣的頁面中，新手設(shè)計(jì)師往往會(huì)忘記添加付款失敗的原因，比如用戶卡里的余額不足，或出現(xiàn)其他技術(shù)類問題。

有的設(shè)計(jì)師甚至?xí)浽O(shè)計(jì)付款成功的頁面，以至于用戶在付完錢后自動(dòng)跳轉(zhuǎn)到首頁。

6.移交材料

圖片來自Medium

這種情況經(jīng)常出現(xiàn)：在更換設(shè)計(jì)師或者交付產(chǎn)品時(shí)，新手設(shè)計(jì)師可能會(huì)忘記一并交付一些素材（如圖標(biāo)、照片等）。當(dāng)后期出現(xiàn)問題的時(shí)候，這些新手設(shè)計(jì)師不得不被叫回去繼續(xù)工作。

7.準(zhǔn)備格式指南

作者為自己的項(xiàng)目設(shè)計(jì)的格式指南｜圖片來自Medium

有些新手設(shè)計(jì)師會(huì)忘記（或者覺得沒必要）給APP或網(wǎng)頁寫格式指南。一些有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)在開始設(shè)計(jì)之前先準(zhǔn)備好格式指南，另一些會(huì)在設(shè)計(jì)之后總結(jié)出一份格式指南。我的經(jīng)驗(yàn)是，這兩種順序都可以，重點(diǎn)是一定要有這樣一份指南，防止你不經(jīng)意間犯下錯(cuò)誤。

8.Favicon（與網(wǎng)頁相關(guān)的圖標(biāo)）

Favicon舉例｜圖片來自Medium

與網(wǎng)頁相關(guān)的圖標(biāo)是指網(wǎng)址左邊的小圖標(biāo)。通常情況下，F(xiàn)avicon就是網(wǎng)址或APP的Logo，在比較少數(shù)的情況下，還可以用圖片或其他符號(hào)表示Favicon。

新手設(shè)計(jì)師有時(shí)候會(huì)忘記設(shè)計(jì)Favicon，直到臨到推廣設(shè)計(jì)產(chǎn)品之前，經(jīng)理等人才讓他們臨時(shí)加一個(gè)Favicon。但是為了能使風(fēng)格保持一致，設(shè)計(jì)師最好能在一開始就添加這個(gè)小圖標(biāo)。

譯者：Michiko

本文來自翻譯, 如若轉(zhuǎn)載請(qǐng)注明出處。