藍(lán)藍(lán)注：這篇文章寫的非常具體，對(duì)于一個(gè)公司的初級(jí)和中級(jí)網(wǎng)站，比較實(shí)用，可參照。

一、感官體驗(yàn)：呈現(xiàn)給用戶視聽上的體驗(yàn)，強(qiáng)調(diào)舒適性

1. 設(shè)計(jì)風(fēng)格：符合目標(biāo)客戶的審美習(xí)慣，并具有一定的引導(dǎo)性。

網(wǎng)站在設(shè)計(jì)之前，必須明確目標(biāo)客戶群體，并針對(duì)目標(biāo)客戶的審美喜好，進(jìn)行分析，從而確定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。

2. 網(wǎng)站LOGO：確保logo的保護(hù)空間，確保品牌的清晰展示而又不占據(jù)過分空間。

3. 頁面速度：正常情況下,盡量確保頁面在5秒內(nèi)打開。如果是大 型門戶網(wǎng)站，必須考慮南北互通問題，進(jìn)行必要的壓力測(cè)試。

4. 頁面布局：重點(diǎn)突出，主次分明，圖文并茂。與企業(yè)的營銷目標(biāo)相結(jié)合，將目標(biāo)客戶最感興趣的，最具有銷售力的信息放置在最重要的位置。

5. 頁面色彩：與品牌整體形象相統(tǒng)一，主色調(diào)+輔助色不超過三種顏色。以恰當(dāng)?shù)纳拭鞫群土炼龋_保瀏覽者的瀏覽舒適度。

6. 動(dòng)畫效果：與主畫面相協(xié)調(diào)，打開速度快，動(dòng)畫效果節(jié)奏適中，不干擾主畫面瀏覽。

7. 頁面導(dǎo)航：導(dǎo)航條清晰明了、突出，層級(jí)分明。

8. 頁面大小：適合多數(shù)瀏覽器瀏覽(以15寸及17寸顯示器為主)。

9. 圖片展示：比例協(xié)調(diào)、不變形，圖片清晰。圖片排列既不過于密集，也不會(huì)過于疏遠(yuǎn)。

10. 圖標(biāo)使用：簡(jiǎn)潔、明了、易懂、準(zhǔn)確，與頁面整體風(fēng)格統(tǒng)一。

11. 廣告位：避免干擾視線，廣告圖片符合整體風(fēng)格，避免喧賓奪主。

“蘋果是否做用戶研究？”

這個(gè)頗具爭(zhēng)議的問題，黃峰給出自己與蘋果用戶體驗(yàn)布道師Mark Kawano溝通的結(jié)果。蘋果撤掉了專門的用戶研究團(tuán)隊(duì)，但其職能被設(shè)計(jì)師團(tuán)隊(duì)所消化與分擔(dān)。真正專業(yè)的用戶體驗(yàn)設(shè)計(jì)師，對(duì)于基礎(chǔ)的用戶研究已具備執(zhí)行與分析的能力。大規(guī)模的定量研究由內(nèi)部或外部其他專業(yè)團(tuán)隊(duì)來完成。

“在產(chǎn)品創(chuàng)新過程中，誰該主導(dǎo)產(chǎn)品的設(shè)計(jì)？PM or UX？”

黃峰認(rèn)為PM和UX本為一家，需要緊密協(xié)作。PM是一個(gè)非固定崗位，也是一種qualification，即無論是研發(fā)、設(shè)計(jì)亦或項(xiàng)目管理，在滿足條件的情況下都可以成為某個(gè)產(chǎn)品的產(chǎn)品經(jīng)理。同時(shí)黃峰也直言，目前多數(shù)企業(yè)的多數(shù)PM實(shí)質(zhì)上并非產(chǎn)品經(jīng)理（Product Manager）,  更多的是項(xiàng)目經(jīng)理（Project Manager）。真正的產(chǎn)品經(jīng)理（Product Manager）是需要為產(chǎn)品的Vision, Strategy, Roadmap, 市場(chǎng)反饋監(jiān)測(cè)與產(chǎn)品調(diào)整等負(fù)責(zé)，這才是真正的UX頂尖人才的終極目標(biāo)。黃峰以電影行業(yè)為例子，生動(dòng)闡述了UX在產(chǎn)品/服務(wù)創(chuàng)新領(lǐng)域的定位和價(jià)值與電影中的導(dǎo)演與其他專業(yè)的關(guān)系有幾分相似。在他看來，理想中的產(chǎn)品經(jīng)理更需要全面的UX能力，我們當(dāng)下不必拘泥于某個(gè)歷史留下的title, 關(guān)鍵還是看實(shí)際的工作內(nèi)容和定位。

動(dòng)畫新手有的時(shí)候會(huì)天馬行空想到一些奇怪的效果，可能會(huì)不符合整體設(shè)計(jì)風(fēng)格，可能會(huì)違反現(xiàn)實(shí)物理規(guī)律，有自己的想法，還要和產(chǎn)品設(shè)計(jì)確認(rèn)。比如這個(gè)頁面：

今天我們來聊聊如何理性的進(jìn)行設(shè)計(jì)，談?wù)?/span>產(chǎn)品經(jīng)理和設(shè)計(jì)師在工作的過程中怎么樣把幾何學(xué)融入到作品中。幾何設(shè)計(jì)學(xué)的由來設(shè)計(jì)本來就是一種理性的科學(xué)門類，審美因人而異，只有言之有理的設(shè)計(jì)才能說服別人，運(yùn)用幾何學(xué)的手法就是設(shè)計(jì)師的利器之一，科學(xué)的設(shè)計(jì)并不會(huì)限制你的創(chuàng)意，它只會(huì)幫助你的作品成為精品的必要手段之一。

從古至今，人類從自然界中得到過無數(shù)的啟示，其中就包含黃金分割。這個(gè)從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。

說今天是一個(gè)體驗(yàn)為王的時(shí)代，一點(diǎn)也不過分。





做大眾消費(fèi)品的人可能已經(jīng)感覺到，今天消費(fèi)者的話語權(quán)越來越強(qiáng)，如果你的產(chǎn)品做得好，不久就會(huì)口口相傳；如果你的產(chǎn)品做得爛，不久就會(huì)罵聲一片。所有這一切在過去是不可想象的。但今天，每個(gè)人都可以發(fā)布信息，每個(gè)人的聲音即使弱小，也總能被別人聽到。在互聯(lián)網(wǎng)時(shí)代，產(chǎn)品是否能夠成功，用戶體驗(yàn)越來越變成一個(gè)關(guān)鍵，用戶買了你的產(chǎn)品，并非是與你結(jié)束了交易。恰恰相反，當(dāng)用戶拿起你的產(chǎn)品，使用你的產(chǎn)品的時(shí)候，用戶體驗(yàn)之旅才真正開始，而用戶的體驗(yàn)之旅是否愉快，將直接影響到你的口碑，影響到你的銷售。

極客公園創(chuàng)始人張鵬與錘子科技「產(chǎn)品經(jīng)理兼 CEO」羅永浩進(jìn)行了一次深入的訪談。在這場(chǎng)接近三個(gè)小時(shí)的訪談中，我們有很長的時(shí)間是在討論 Smartisan OS 中的各種產(chǎn)品細(xì)節(jié)和用戶體驗(yàn)。我們發(fā)現(xiàn)老羅熟知每一個(gè)產(chǎn)品細(xì)節(jié)的來龍去脈，一個(gè)產(chǎn)品決定背后有怎樣的考慮、經(jīng)歷了怎樣的取舍、未來會(huì)怎樣進(jìn)一步優(yōu)化、有哪些突出優(yōu)點(diǎn)、還存在哪些遺憾，他都可以對(duì)你娓娓道來。

在這次訪談中，羅永浩詳細(xì)地闡述了自己對(duì)產(chǎn)品經(jīng)理職責(zé)、素養(yǎng)、原則和重要性的看法，并輔以清晰明確的案例分析。極客公園對(duì)這些觀點(diǎn)整理如下：

「交互體驗(yàn)問題，其實(shí)都是微妙的心理和生理問題」

實(shí)際上，羅永浩的產(chǎn)品經(jīng)理生涯要遠(yuǎn)長于錘子科技僅僅兩年出頭的歷史。對(duì)用戶心理的重視和揣摩，是老羅一直以來極為注重的東西。發(fā)現(xiàn)用戶潛在的心理需求并加以滿足的過程，貫穿了老羅的整個(gè)創(chuàng)業(yè)史。

從創(chuàng)辦英語培訓(xùn)學(xué)校開始，老羅就經(jīng)常在各種公開場(chǎng)合強(qiáng)調(diào)讀懂用戶心理的重要性，他樂于推薦相關(guān)書籍和分享自己的實(shí)踐經(jīng)驗(yàn)。「一塊錢聽八次課」的傳播策略，和「給廁所隔間加裝門板和鎖」的人性化關(guān)懷，至今仍被人反復(fù)提起。老羅對(duì)用戶需求的準(zhǔn)確定位和對(duì)用戶體驗(yàn)的創(chuàng)造性改進(jìn)，從那個(gè)時(shí)候就已經(jīng)成為廣泛傳播的大眾話題。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.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ù)

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

來源：莫貝網(wǎng)

所以，本文章會(huì)通過三個(gè)真實(shí)但抽象的例子說明工作中『放按鈕』是怎么做的。真實(shí)說的是案例來源于實(shí)戰(zhàn)，抽象就是提煉出思維但講的場(chǎng)景都是虛擬的，免得透露機(jī)密。有趣的是，三個(gè)按理都和時(shí)間、時(shí)效有關(guān)。

案例一

虛擬場(chǎng)景：某訂單頁面，商品訂單以卡片的形式羅列，每個(gè)卡片下方有若干操作按鈕，如支付、取消、投訴等。根據(jù)規(guī)則，投訴按鈕必須在訂單產(chǎn)生2天后才可使用。

現(xiàn)狀：目前產(chǎn)品線上的設(shè)計(jì)方案是，幾個(gè)按鈕同時(shí)呈現(xiàn)可點(diǎn)擊狀態(tài)，當(dāng)投訴按鈕處于可用時(shí)間段內(nèi)時(shí)，點(diǎn)擊就會(huì)去往一個(gè)投訴頁面填寫投訴申請(qǐng)；當(dāng)目前處于不可投訴時(shí)間段內(nèi)，投訴按鈕點(diǎn)擊后彈窗提醒用戶：還有 XXX 時(shí)間才可發(fā)起投訴。

目標(biāo)：提出這個(gè)案例時(shí)，我們希望讓這個(gè)操作過程更加自然，不要讓用戶點(diǎn)擊了之后才告訴用戶這個(gè)功能不可用，而不要脫離用戶的交互期望（如果按鈕可用，交互期望就應(yīng)該是實(shí)現(xiàn)相應(yīng)的功能）。

設(shè)計(jì)過程：

最開始考慮這個(gè)案例時(shí)，我的第一反應(yīng)就是如果一個(gè)按鈕當(dāng)前是不可用的，就應(yīng)該隱藏起來，這個(gè)場(chǎng)景按鈕還是挺擠的，明明不能用的東西為什么要放在界面中吸引視線呢？

但是很明顯，這個(gè)第一感覺有嚴(yán)重的硬傷。首先，對(duì)于一個(gè)按鈕或功能，告訴用戶這個(gè)東西不可用，和不告訴用戶有這個(gè)功能，是完全兩碼事。尤其是一個(gè)存在可用/不可用兩種狀態(tài)的按鈕，在特定時(shí)間將其隱藏的風(fēng)險(xiǎn)非常大——你不知道這個(gè)功能的被需要度多高。

于是，我們?nèi)ゲ殚喠艘幌聰?shù)據(jù)和之前的設(shè)計(jì)方案。首先得出的結(jié)論是，這個(gè)按鈕的點(diǎn)擊率不低（超過10%的用戶，而且這個(gè)頁面的總 pv 非常高），其次，以前有嘗試過把這個(gè)按鈕直接在不可用時(shí)隱藏的設(shè)計(jì)，但是立刻引來了大量的客服投訴——用戶找不到投訴入口在哪里了。

所以，似乎數(shù)據(jù)和歷史方案幫助我們排除了第一種做法，也就是直接隱藏按鈕。那在不可用期間把按鈕置灰怎么樣？

置灰的好處在于，用戶一眼就能看到這個(gè)功能的存在，同時(shí)又能知道這個(gè)功能暫時(shí)是不可用的。但是問題也來了，怎么知道這個(gè)按鈕什么時(shí)候可點(diǎn)什么時(shí)候不可點(diǎn)？一個(gè)解決方案是在置灰的按鈕中加上文案提醒，另一個(gè)是點(diǎn)擊置灰的按鈕后給出文案提示，但是前者似乎沒有足夠的空間進(jìn)行展示了，而后者看起來不錯(cuò)……但是好像又回到了原點(diǎn)？（后來還討論過一些更復(fù)雜的方案，比如最后半天置灰，更早的時(shí)候隱藏等，但我們并無法判斷用戶對(duì)時(shí)間點(diǎn)的真實(shí)感受和期待。）

所以最終的結(jié)論就是，由于當(dāng)前的線上形式并沒有什么致命的問題，也沒有收到太多關(guān)于體驗(yàn)方面的投訴，而考慮到開發(fā)成本、設(shè)計(jì)成本和迭代周期，還是選擇保持線上的樣式不變。

感覺走了一圈走回原地？在實(shí)際工作中經(jīng)常遇到這樣的情況，設(shè)計(jì)師通過本能和直覺判斷某些內(nèi)容的體驗(yàn)可能不是最佳的，但經(jīng)過資料搜集、自我批判、成本評(píng)估后發(fā)現(xiàn)，似乎保持現(xiàn)狀是最好的做法。

總結(jié)：這個(gè)案例告訴我們，設(shè)計(jì)時(shí)不要總想著找茬，第一反應(yīng)往往可能漏過了諸多細(xì)節(jié)，思考清楚再做行動(dòng)。

案例二

虛擬場(chǎng)景：對(duì)商家或商品進(jìn)行投訴之后，需要用戶選擇投訴原因，如態(tài)度不好、價(jià)格變動(dòng)、缺貨等。其中，在某些特殊時(shí)間段內(nèi)，如該商品本身就是秒殺商品，用戶發(fā)起投訴時(shí)則不能選擇『缺貨』原因。

現(xiàn)狀：線上目前沒有這個(gè)功能，即所有的投訴原因都是可選的，選擇組件使用的是 picker，大概如下圖的樣式（最常見的就是選擇時(shí)間啦）。

目標(biāo)：對(duì)于『缺貨』這個(gè)投訴原因進(jìn)行交互處理，令其在特定時(shí)間段內(nèi)（商品秒殺階段）無法選擇，并給用戶相關(guān)提醒。

設(shè)計(jì)過程：

乍一看和案例一非常相似，但其實(shí)差別還是挺大的。案例一屬于設(shè)計(jì)師自 發(fā)嘗試對(duì)體驗(yàn)改進(jìn)，而案例二確實(shí)明確的業(yè)務(wù)需求，需要把沒有的功能融入到現(xiàn)有方案中。拿到這個(gè)需求時(shí)，首先看到大概會(huì)涉及兩個(gè)頁面可以用來設(shè)計(jì)，分別是投 訴頁面和投訴原因選擇頁（這兩個(gè)通常不會(huì)直接在一起，但是后者有可能以彈層的形式出現(xiàn)，當(dāng)然也可能新開頁面），于是閃過幾種可能的處理方案。

方案一，在投訴頁面提前進(jìn)行文案披露，告訴用戶『缺貨』原因不可選，同時(shí)進(jìn)入原因選擇頁時(shí)將『缺貨』選項(xiàng)置灰；

方案二，原因選擇頁的『缺貨』按鈕正常可選，選擇后通過彈窗提醒用戶該原因不可用，并恢復(fù)默認(rèn)待選原因狀態(tài)；

方案三，僅設(shè)計(jì)原因選擇頁，在『缺貨』選項(xiàng)內(nèi)提供文案如『暫不可選』，并且置灰該選項(xiàng)。

詳細(xì)了解需求背景之后，方案三首先被排除了。原因很簡(jiǎn)單，本身置灰就已經(jīng)表示不可選了，『暫不可選』文案所表達(dá)的內(nèi)容太少，既沒有展示出不可選的原因，也沒有告訴用戶什么時(shí)候恢復(fù)該投訴選項(xiàng)。同時(shí)，我們得知反饋的文案會(huì)比較長，大約有十幾個(gè)漢字，按鈕本身的空間有限，并且直接在原因字段內(nèi)拼接『暫不可選』也會(huì)有點(diǎn)技術(shù)成本。

方案二在流程上是順暢的，但是和案例一中提到的類似，我們一般希望用戶在操作之前就能預(yù)期到交互的結(jié)果，而不是讓可選的按鈕點(diǎn)擊后出現(xiàn)提醒再告訴用戶不可選。

同時(shí)考慮方案一，對(duì)于按鈕置灰有一個(gè)問題需要考慮，可以看到無線端使用的是這種滾輪式的選擇組件，其本身置灰能不能做是要打個(gè)問號(hào)的，事實(shí)上和開發(fā)溝通之后發(fā)現(xiàn)確實(shí)無法實(shí)現(xiàn)。最后，綜合考慮下，還是采用了方案二。

總結(jié)：通過案例二可以看到，設(shè)計(jì)中常常會(huì)有一個(gè)最優(yōu)解，但又總會(huì)因?yàn)榧夹g(shù)成本、其他業(yè)務(wù)原因的影響去妥協(xié)，最后得到的方案也許不是交互上最佳的，但確實(shí)整體效率最高的。這也說明了，新人不要輕易對(duì)其他產(chǎn)品做體驗(yàn)分析，因?yàn)槟悴]有這些真實(shí)限制，所得出的結(jié)論也是空中樓閣。

案例三

虛擬場(chǎng)景：某些操作是有時(shí)效的，比如某個(gè)商品限量銷售，如果還沒有到付款的時(shí)間節(jié)點(diǎn)，付款功能是不可用的，那么付款按鈕能否優(yōu)化處理。

現(xiàn)狀：當(dāng)商品不在支付時(shí)間段內(nèi)，付款按鈕隱藏。

目標(biāo)：不要讓用戶找不到付款按鈕，令操作更加順暢，可見性更強(qiáng)。

設(shè)計(jì)過程：

和案例一一樣，這也是一個(gè)設(shè)計(jì)師自發(fā)想要改善體驗(yàn)的過程，正好有其他業(yè)務(wù)需要對(duì)這些頁面進(jìn)行改造，能否把這個(gè)按鈕隱藏的過程優(yōu)化呢？原因相信大家都能理解，把不可用的功能藏起來，總歸不是最好的做法。

仔細(xì)查看線上的樣式我們發(fā)現(xiàn)，這個(gè)案例和案例一還不太一樣。最重要的一點(diǎn)是，付款的時(shí)間是有倒計(jì)時(shí)的，也就是說即便付款按鈕本身是隱藏起來的，但其附近依然有文案提醒現(xiàn)在不在支付時(shí)間內(nèi)，所以用戶不太容易迷惑。

比較簡(jiǎn)單的解決辦法就是，把支付按鈕暴露出來，并且置灰。看來今天三個(gè)案例都和置灰杠上了。經(jīng)過交互小組和產(chǎn)品小組的討論，都一致覺得把不可用的支付按鈕置灰更加合適，并且線上已有文案提醒說明，用戶也更容易理解。

但是這個(gè)案例最后的結(jié)論有些出乎意料，首先，因?yàn)榫€上所有類似業(yè)務(wù)都采用了隱藏不可支付按鈕的做法，所以如果這類交易要改，其他全都要改（時(shí)間成本）；其次，這個(gè)按鈕組件在早期開發(fā)過程中，并沒有設(shè)計(jì)、開發(fā) disable 的狀態(tài)，也就是沒有置灰的樣式，如果要做，需要重新設(shè)計(jì)和開發(fā)（開發(fā)成本）；最后，線上這個(gè)隱藏的樣式已經(jīng)存在很長時(shí)間了，用戶大部分都其已經(jīng)習(xí)慣，并且沒有發(fā)生普遍的反饋表示認(rèn)知困難（用戶理解成本）。所以，結(jié)論還是保持線上的樣式。

總結(jié)：有時(shí)候設(shè)計(jì)是對(duì)的，所有人都認(rèn)可，但是依然會(huì)有各種因素前來制約。尤其在較大的產(chǎn)品團(tuán)隊(duì)，業(yè)務(wù)節(jié)奏快、需求多、上線緊，這類優(yōu)化體驗(yàn)的工作常 常優(yōu)先級(jí)不夠高。與此同時(shí)，很多朋友可能會(huì)說一個(gè)按鈕而已，加一個(gè) disable 的樣式又有何難？然而很多團(tuán)隊(duì)的流程規(guī)則導(dǎo)致業(yè)務(wù)工作是一條線，組件優(yōu)化新增樣式又是另一條線，想要一步把兩件事都做了并沒有想象中的容易。

怎么樣，簡(jiǎn)單的三個(gè)按鈕，是不是讓你有些暈了？交互設(shè)計(jì)的難點(diǎn)常常就在于體驗(yàn)、產(chǎn)品、開發(fā)各個(gè)內(nèi)容的協(xié)調(diào)，相互妥協(xié)，最后達(dá)到一個(gè)平衡的狀態(tài)。由小見大，小按鈕我們能應(yīng)付了，慢慢就可以面對(duì)大問題啦。

今天我們來聊聊如何理性的進(jìn)行設(shè)計(jì)，談?wù)?/span>產(chǎn)品經(jīng)理和設(shè)計(jì)師在工作的過程中怎么樣把幾何學(xué)融入到作品中。幾何設(shè)計(jì)學(xué)的由來設(shè)計(jì)本來就是一種理性的科學(xué)門類，審美因人而異，只有言之有理的設(shè)計(jì)才能說服別人，運(yùn)用幾何學(xué)的手法就是設(shè)計(jì)師的利器之一，科學(xué)的設(shè)計(jì)并不會(huì)限制你的創(chuàng)意，它只會(huì)幫助你的作品成為精品的必要手段之一。

從古至今，人類從自然界中得到過無數(shù)的啟示，其中就包含黃金分割。這個(gè)從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。

從0開始設(shè)計(jì)一款A(yù)PP產(chǎn)品架構(gòu)時(shí)，我們?cè)谙胧裁矗?

不妨來看看微信產(chǎn)品架構(gòu)的背后，或許你會(huì)有自己的答案。

對(duì)于第1個(gè)問題我是這樣考慮的。首先確定產(chǎn)品的用戶群和使用場(chǎng)景，這里的用戶群是產(chǎn)品中實(shí)際存在的、互斥的幾個(gè)群體，分類方法很多，以產(chǎn)品自身特征來確定，也可以在前期用研的基礎(chǔ)上來確定。基于此思路就產(chǎn)生下面的一個(gè)思維圖: