如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

即使你遠(yuǎn)離設(shè)計(jì)領(lǐng)域，對于用戶體驗(yàn)這一詞也不會(huì)陌生。用戶和產(chǎn)品之間進(jìn)行交互過程中，產(chǎn)生的一般態(tài)度和情感反饋就是我們常說的用戶體驗(yàn)。在用戶體驗(yàn)設(shè)計(jì)中，有幾個(gè)關(guān)鍵性的因素的是設(shè)計(jì)師所關(guān)注的，比如可用性（usability）、工具性（utility）、合意性（desirability）、吸引度（attractiveness）等。如今，用戶體驗(yàn)設(shè)計(jì)和視覺設(shè)計(jì)幾乎達(dá)到了同等重要的程度。雖然仍有一些企業(yè)和團(tuán)隊(duì)在懷疑用戶體驗(yàn)設(shè)計(jì)是否有必要，但是總體上，大家對于它的認(rèn)可度還是非常高的。

用戶體驗(yàn)設(shè)計(jì)為何重要？

許多公司為了讓產(chǎn)品產(chǎn)品的體驗(yàn)和效率更高，而花費(fèi)更多的時(shí)間和金錢。現(xiàn)代商業(yè)競爭背景下，事實(shí)已經(jīng)證明，產(chǎn)品和服務(wù)的成功很大程度上是取決于用戶對于產(chǎn)品的喜愛程度。UX設(shè)計(jì)旨在通過讓產(chǎn)品更易于使用而提高用戶的滿意度。

有些人可能還認(rèn)為用戶體驗(yàn)設(shè)計(jì)的核心是視覺設(shè)計(jì)，其實(shí)它的范疇遠(yuǎn)不止于此。UX設(shè)計(jì)是一個(gè)復(fù)雜的過程，涵蓋了用戶研究，線框圖、原型、視覺稿、動(dòng)畫、開發(fā)、測試等許多不同的環(huán)節(jié)和階段，其中許多環(huán)節(jié)甚至是并發(fā)和交叉的。真正有效的用戶體驗(yàn)需要時(shí)間來開發(fā)，也需要足夠的知識來作為支撐，這種復(fù)雜的開發(fā)體系使得它或多或少地需要超出預(yù)期的額外投資。然而，UX設(shè)計(jì)對于初創(chuàng)和非初創(chuàng)公司而言，同樣有益，它確確實(shí)實(shí)從不同的方面幫助企業(yè)創(chuàng)造成功的產(chǎn)品，無論是參與度、可用性還是轉(zhuǎn)化率。

如果你擁有一個(gè)復(fù)雜的電商網(wǎng)站系統(tǒng)，那么用戶體驗(yàn)一定是影響它實(shí)際效用的重要因素。內(nèi)容組織是否系統(tǒng)，導(dǎo)航是否清晰，都會(huì)影響到產(chǎn)品的銷售，用戶的黏度。太復(fù)雜、不便捷的產(chǎn)品會(huì)讓用戶流失，這是肯定的。

有數(shù)據(jù)表明，近年來95%的移動(dòng)端APP 在上線一個(gè)月內(nèi)就宣告失敗而退出。這很大程度上是因?yàn)榧ち腋偁幹拢瑳]有足夠優(yōu)秀的用戶體驗(yàn)來留住用戶所造成的結(jié)果。結(jié)合現(xiàn)有的研究和我們自己的經(jīng)驗(yàn)，我們在今天的文章中總結(jié)出了優(yōu)秀產(chǎn)品的7個(gè)關(guān)鍵的用戶體驗(yàn)設(shè)計(jì)要素。

1、有效的可用性設(shè)計(jì)

現(xiàn)如今，“簡單”一詞和無聊的設(shè)計(jì)并無關(guān)系，而是成功產(chǎn)品設(shè)計(jì)的關(guān)鍵性要素。在Don Norman 的《設(shè)計(jì)心理學(xué)》系列教材中指出，良好的設(shè)計(jì)通常都會(huì)具有易于發(fā)現(xiàn)和易于理解兩個(gè)特性。用戶期望他們所使用的產(chǎn)品是簡單明了的，能夠讓他們不花費(fèi)太多精力就可以搞定，也可以從中獲得自信。而這些都是用戶體驗(yàn)設(shè)計(jì)的工作范疇以內(nèi)。

用戶體驗(yàn)設(shè)計(jì)師的目標(biāo)是為數(shù)字產(chǎn)品創(chuàng)造一致的體驗(yàn)，讓用戶能夠安心使用。有效的用戶體驗(yàn)設(shè)計(jì)能夠通過網(wǎng)站和APP為用戶循序漸進(jìn)、有效地展示內(nèi)容。而UX設(shè)計(jì)人員則可以通過數(shù)據(jù)分析和案例研究，消除不必要的設(shè)計(jì)、搞定問題、去除隱患，提升產(chǎn)品的可用性。UX設(shè)計(jì)師還能通過不同環(huán)節(jié)的引導(dǎo)服務(wù)來幫助用戶更加快速的熟悉產(chǎn)品，讓用戶感到貼心而不會(huì)緊張。

2、驅(qū)動(dòng)用戶深度參與

參與度是衡量用戶有效行為的度量，而它也是產(chǎn)品價(jià)值的重要體現(xiàn)之一。每個(gè)企業(yè)都希望有高素質(zhì)的用戶參與到產(chǎn)品建設(shè)當(dāng)中來，而他們也知道，最終還是要通過創(chuàng)造優(yōu)秀的用戶體驗(yàn)來解決這一問題。

UX設(shè)計(jì)有一個(gè)熱門的解決方案是游戲化設(shè)計(jì)。將游戲化的元素應(yīng)用到非游戲類的使用場景中來。游戲化設(shè)計(jì)讓網(wǎng)站和APP擁有更多有趣的元素，吸引用戶，提升參與度。游戲化設(shè)計(jì)的具體方法和策略有很多，設(shè)置任務(wù)、發(fā)放獎(jiǎng)勵(lì)都是很常見的手法了。挑起用戶的好奇心和激情，他們會(huì)堅(jiān)持不懈地執(zhí)行任務(wù)，在你的網(wǎng)站和APP中花費(fèi)更多的時(shí)間。

3、產(chǎn)品的獨(dú)特性

很難說市場上到底有多少APP存在，但是絕大多數(shù)的應(yīng)用和網(wǎng)站在起步的時(shí)候，就已經(jīng)失敗了。當(dāng)你要開始投放一個(gè)APP到市場的時(shí)候，可能已經(jīng)有好幾十個(gè)同類的產(chǎn)品已經(jīng)存在了。所以，企業(yè)和開發(fā)團(tuán)隊(duì)一直在尋求讓用戶選擇他們產(chǎn)品的原因和方法。UX設(shè)計(jì)師能夠通過分析目標(biāo)受眾的需求和實(shí)際市場狀況，來判斷和預(yù)測用戶對于自己產(chǎn)品的反應(yīng)。如果你想給別人帶來愉悅的體驗(yàn)，滿足用戶的需求，并且力圖讓自己的產(chǎn)品擁有足夠的特性從競爭中脫穎而出，那么你的產(chǎn)品就具有了同其他產(chǎn)品區(qū)分開來的獨(dú)特性。

4、省錢

UX設(shè)計(jì)的成本并不低，但是相比于修復(fù)可用性的問題，它的花費(fèi)依然很低。基于用戶研究，UX設(shè)計(jì)師能夠準(zhǔn)確地挑選出功能組合，并且規(guī)劃用戶的交互過程，排除可能存在的問題。通過對目標(biāo)受眾的研究和測試，分析和改進(jìn)整個(gè)產(chǎn)品的流程與細(xì)節(jié)，而這些過程對于產(chǎn)品開發(fā)和運(yùn)營的補(bǔ)充，相比于在產(chǎn)品上線過再根據(jù)反饋進(jìn)行調(diào)整，要省錢省心得多。

5、用戶忠誠度

用戶的口味越來越刁鉆了。令人不快的體驗(yàn)會(huì)讓他們很快不耐煩，然后迅速和你的APP說拜拜，然后再也不會(huì)回來了。用戶的忠誠度要維持起來并不容易，你需要?jiǎng)?chuàng)造足夠優(yōu)秀的產(chǎn)品，要讓人喜愛、沉迷，還得足夠快速地幫用戶排查問題。這種局面下，用戶體驗(yàn)設(shè)計(jì)的價(jià)值無疑是不可估量的。如果你的產(chǎn)品能夠始終保持令人舒服愉悅的體驗(yàn)，用戶習(xí)慣了就很難轉(zhuǎn)向別家了。另外，別忘了，快樂的用戶更喜歡向朋友推薦你的產(chǎn)品。

6、高轉(zhuǎn)化率

采取設(shè)計(jì)者預(yù)期行為的用戶所占總?cè)藬?shù)的百分比就是我們常說的轉(zhuǎn)化率。最典型的轉(zhuǎn)化率就是購買產(chǎn)品的用戶數(shù)所占打開電商網(wǎng)站的用戶總?cè)藬?shù)的百分比。用戶體驗(yàn)設(shè)計(jì)師通常會(huì)掌握一系列的分析技術(shù)，來幫助產(chǎn)品提高轉(zhuǎn)化率。通過深入分析用戶行為和用戶離開產(chǎn)品的原因，找到痛點(diǎn)，解決問題，從而提高轉(zhuǎn)化率。

7、積極的品牌體驗(yàn)

品牌識別不僅僅取決于視覺形象設(shè)計(jì)，還和體驗(yàn)息息相關(guān)。許多用戶在第一次使用產(chǎn)品的時(shí)候，會(huì)記住品牌給他們的感覺。這種第一次的體驗(yàn)對于用戶和品牌本身都至關(guān)重要，如果處理不好，可能會(huì)失去不少潛在用戶。良好的UX設(shè)計(jì)可以保證品牌擁有積極而良好的用戶體驗(yàn)。提供用戶喜歡的產(chǎn)品，可以提升品牌的認(rèn)知度，因?yàn)橛脩舨粫?huì)忘記他們喜歡的東西。

結(jié)語

優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)對于企業(yè)無疑是有利的。很多時(shí)候，它的價(jià)值并非是一眼可以看出來的，但是事實(shí)上，優(yōu)秀的用戶體驗(yàn)是成功產(chǎn)品中不可剝離的組成部分。令人信服的UX設(shè)計(jì)能夠節(jié)省資金和精力，這比起投資解決低質(zhì)量的產(chǎn)品要來得有效得多。更重要的是，現(xiàn)代產(chǎn)品一旦初次互動(dòng)不利，后面想要扭轉(zhuǎn)過來就很難了。

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Facebook 設(shè)計(jì)副總裁有個(gè)問答欄目，今天的問題是：對于設(shè)計(jì)師來說，什么才代表著成功？在這篇譯文里，她分享了自己的觀點(diǎn)。

每個(gè)設(shè)計(jì)師多少都有一點(diǎn)強(qiáng)迫癥，有時(shí)候會(huì)為一個(gè)像素的間距而糾結(jié)，有時(shí)候又會(huì)割舍不下自己做的元素，滿屏的信息都想突出，導(dǎo)致畫面混亂。設(shè)計(jì)師培養(yǎng)自己對畫面的全局觀是很重要的，所以我們的腦子里時(shí)刻都需要有一把“尺子”在，這把尺子，就是“點(diǎn)線面”。在使用這把“尺子”的時(shí)候，拋開那些裝飾和顏色還有材質(zhì)，將畫面抽象成點(diǎn)線面來把控你的設(shè)計(jì)，也許會(huì)有不一樣的啟發(fā)和看到畫面不和諧的原因所在。

設(shè)計(jì)師對版面的全局觀，就是“點(diǎn)線面”的處理。“點(diǎn)線面”是所有視覺畫面的基本結(jié)構(gòu)，點(diǎn)線面可以把不同的部分或者元素組合成一個(gè)整體，進(jìn)而打造一個(gè)視覺舒適平衡的版面。

搜索幾乎是現(xiàn)在所有網(wǎng)站，APP甚至操作系統(tǒng)的標(biāo)配，不論是電商還是論壇等等。它是一個(gè)站內(nèi)給用戶直接到達(dá)目的地的通道，起到了一個(gè)引導(dǎo)用戶走向的重要作用。在不同的系統(tǒng)，不同用途的網(wǎng)站上搜索呈現(xiàn)的方式都有所不同。

用搜索的原因

使用搜索時(shí)，用戶可以自己掌握瀏覽該網(wǎng)站的路徑，從哪一頁進(jìn)入到哪一頁，自己控制如何使用這個(gè)網(wǎng)站。沒有必要根據(jù)網(wǎng)站的頁面設(shè)計(jì)來決定瀏覽頁面的先后順序。這也是為什么很多網(wǎng)站用戶一進(jìn)入就直接使用搜索功能的原因。

另一個(gè)原因是，當(dāng)用戶瀏覽網(wǎng)頁到一半不知道接下去該干什么的時(shí)候，往往會(huì)使用搜索直接去找到自己想找的內(nèi)容。

一個(gè)完整的后臺，由菜單/導(dǎo)航、數(shù)據(jù)/圖形展示、表格、表單、控件/組件以及彈窗等構(gòu)成，下面跟大家分享后臺中的表格和表單的設(shè)計(jì)細(xì)節(jié)。

當(dāng)接到一個(gè)全新的網(wǎng)頁后臺項(xiàng)目時(shí)，首先確定設(shè)計(jì)風(fēng)格，然后考慮這個(gè)后臺尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁設(shè)計(jì)，除非有規(guī)定，否則你可以選擇任意主流尺寸作為基尺寸來設(shè)計(jì)網(wǎng)頁。當(dāng)然，不管選擇什么尺寸，都得基于做好一個(gè)后臺而開展工作。

隨著移動(dòng)優(yōu)先的趨勢，APP的設(shè)計(jì)也越來越受到公司重視，不斷地提高APP的設(shè)計(jì)質(zhì)量是每個(gè)設(shè)計(jì)師的追求，有哪些設(shè)計(jì)中的細(xì)節(jié)被你忽略了呢？讓我們一起來看看這些細(xì)節(jié)你都把握住了嗎。

視覺表現(xiàn)型問題

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

在過去的幾年當(dāng)中，網(wǎng)絡(luò)上所流傳的各種設(shè)計(jì)和開發(fā)資源，在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計(jì)師和開發(fā)者必備的工具，但是其中絕大多數(shù)由于其應(yīng)用范疇的局限，或者傳播不夠廣，導(dǎo)致它們大多并廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標(biāo)用戶能夠明白，需要這些工具的時(shí)候，上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全，仔細(xì)看看，總能找到幾款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的開發(fā)者的新產(chǎn)品，是一款應(yīng)用在macOS 平臺的應(yīng)用，當(dāng)你和別人共享屏幕的時(shí)候，它可以幫你關(guān)閉通知和其他的私密信息，避免尷尬。無論你共享屏幕時(shí)候的平臺是Skype、Google Hangouts 還是 Slack，它都能讓macOS 進(jìn)入“免打擾”模式。

Fractures

Fractures 是一個(gè)CSS類 合集，可以幫你快速創(chuàng)建網(wǎng)頁原型。Fractures 是基于原子設(shè)計(jì)模式來構(gòu)建的，樣式表被分割為小段。

CSS DB

CSS DB 能為你列舉出還在不斷開發(fā)中的CSS特性列表以及目前的狀態(tài)，讓你可以更好地使用CSS選擇器。

Preact

Apache 最近宣布禁止將 BSD+專利許可證分發(fā)給 ReactJS 和類似的項(xiàng)目，如果你的產(chǎn)品受到類似的專利許可證的影響，可以考慮 Preact 這樣的 ReactJS替代品。

Pell

Pell 是一款用來構(gòu)建所見即所得編輯器的JavaScript 庫，默認(rèn)情況下，它會(huì)帶有常見的富文本編輯器的按鈕。Pell 是使用ES6來構(gòu)建，它不會(huì)像jQuery 那樣需要大量的依賴庫，體積小巧，可維護(hù)性強(qiáng)，還兼容 IE9。

Markvis

Markdown 在語法和功能上是有限制的，而Markvis 在它的基礎(chǔ)上增加了圖表的功能。

Moment PHP

Moment 是一款 PHP 庫，用來處理日期和時(shí)間，類似于 Moment.js 之于 JavaScript。這個(gè)庫的使用也很簡單，可以快速設(shè)置時(shí)區(qū)、時(shí)間和顯示方式。

Tonik

這是一款使用現(xiàn)代PHP來構(gòu)建的Wordpress 新手主題，它充分利用了命名空間，自定義模板，自動(dòng)加載器，WebPack 以及一大堆現(xiàn)代Web開發(fā)的優(yōu)點(diǎn)。

Awesome Guidelines

這是一個(gè)包含了許多編程語言標(biāo)準(zhǔn)的列表，其中包含了C語言，JS，PHP，Ruby，甚至包括Visual Basic。這些標(biāo)準(zhǔn)能夠幫你的代碼保持簡潔、干凈。

BotUI

聊天機(jī)器人已經(jīng)逐漸成為主流。這款 JS 庫能夠幫你構(gòu)建對話式UI，這個(gè)庫比起傳統(tǒng)的“表單”體驗(yàn)更加優(yōu)秀。

Reaction Commerce

開源的內(nèi)容管理系統(tǒng)這些年變化并不大，其中絕大多數(shù)都是基于PHP來構(gòu)建的。

TinyReset

這是一款非常小巧的 CSS resetter，它可以作為 Eric Meyer 所創(chuàng)建的reset.css的替代品。

Martinet

Martinet 是一款用來構(gòu)建靜態(tài)網(wǎng)站的命令行工具，其中包含了諸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 這樣的現(xiàn)代工具。它的存在讓設(shè)計(jì)者不用擔(dān)心網(wǎng)站配置，只需要正常使用 Martinet 就能對網(wǎng)站進(jìn)行調(diào)整。

Billboard

BillboardJS 是一款基于 D3.js 來構(gòu)建的交互式數(shù)據(jù)可視化數(shù)據(jù)庫工具，它可以用來創(chuàng)建可視化的柱狀圖，餅圖，折線圖等。

SVGI

SVGI 是一款用來查找SVG元素和文件的命令行工具，安裝它之后，你可以采用svgi 命令來檢索 SVG 文檔的大小、元素、層次結(jié)構(gòu)和節(jié)點(diǎn)列表。

TimeStrap

TimeStrap 是另外一個(gè)非常實(shí)用的開源平臺，它可以像 WordPress 一樣可以在任何地方運(yùn)行和訪問的發(fā)票系統(tǒng)。對于喜歡自己控制而不希望使用外部服務(wù)來管理發(fā)票的用戶而言，這是一個(gè)很好的選擇。

Slate

Slate 是一款為API 文檔創(chuàng)建靜態(tài)網(wǎng)頁的工具，諸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了這一工具。

FontJoy

FontJoy 是一款能夠生成大量有效字體組合的工具，點(diǎn)擊“Generate”按鈕就能生成許多新的字體組合。有趣的地方在于，這款工具還有具備深度學(xué)習(xí)的功能。

CoolHue

毫無疑問漸變色再一次回歸主流，而CoolHue 是另外一款非常優(yōu)秀的漸變色生成工具。

FrontPress

FrontPress 是一款前端框架，可用來控制 WP-API 和 AngularJS。如果你想創(chuàng)建一款用于 WordPress 的內(nèi)容管理系統(tǒng)，可以從 FrontPress 著手。

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

作為一名產(chǎn)品經(jīng)理，有幸逃過UI “五彩斑斕的黑”這樣的千古難題，也不像開發(fā)一樣面臨“什么是最好的語言”這樣的靈魂拷問，但世事無完美，不信抬頭看，蒼天饒過誰。

需求，正是這樣的終極存在，他是產(chǎn)品經(jīng)理存在的意義，也是眾多套路的根源。無論是文能提筆寫文檔、武能調(diào)試查異常的老司機(jī)，還是熟讀《夢的解析》、倒背需求層次論的學(xué)院派，和需求打交道的日子也難免“被套路”。

面對千變?nèi)f化的需求，也許很難抽象出一套普適的方法論，不妨一起來看看需求分析過程中的那些常見套路，或許能有一些值得借鑒和思考。

1. 披著需求外衣的解決方案

從交互細(xì)節(jié)優(yōu)化到業(yè)務(wù)流程調(diào)整，我們總會(huì)遇到這樣一些需求：描述簡單明了、細(xì)節(jié)清晰，幾乎稍作整理就可以形成PRD、開發(fā)實(shí)施：

• “輸入框需要加長一點(diǎn)，保證輸入內(nèi)容完整可見”
• “工單需要支持批量分配，勾選后自動(dòng)顯示可分配對象列表”
• “用戶注冊推送新手任務(wù)提醒，引導(dǎo)完善資料，必填項(xiàng)有XXX……”

好的設(shè)計(jì)往往需要好的內(nèi)容作為基礎(chǔ)支撐。無論是內(nèi)容還是設(shè)計(jì)，想要讓兩者最大化的搭配，往往是需要進(jìn)行調(diào)整和優(yōu)化才行。

當(dāng)你的內(nèi)容需要遷移到移動(dòng)端上的時(shí)候，要怎么讓內(nèi)容和用戶體驗(yàn)無縫地配合起來呢？設(shè)計(jì)師要基于小屏幕的交互來思考整個(gè)設(shè)計(jì)和優(yōu)化的策略，而今天的文章，就為你分享7個(gè)設(shè)計(jì)技巧。

1、每屏完成一項(xiàng)任務(wù)

為什么？

我們有這樣的焦慮，其實(shí)是因?yàn)槲覀儗换ブR的整個(gè)體系無法預(yù)估（事實(shí)上設(shè)計(jì)的高度非標(biāo)準(zhǔn)性也令我們無法感知整個(gè)知識體系的邊界，事實(shí)上它本身也沒邊界），所以導(dǎo)致我們常常不夠安心。

事實(shí)上，知識學(xué)習(xí)本身就有一條學(xué)習(xí)曲線：剛開始是成長期，隨后就是平穩(wěn)期，然后就進(jìn)入瓶頸期，需要學(xué)得更深，否則只會(huì)一直停滯。越到瓶頸期，越不知道要學(xué)什么。