如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一個產(chǎn)品最后出來的樣子，是各種妥協(xié)的結(jié)果。
互聯(lián)網(wǎng)產(chǎn)品和平面類型的設(shè)計工作最大的區(qū)別，可能是在于工種的細(xì)分上。之前做平面相關(guān)的工作（品牌，視覺，電商），自己一個人可能就充當(dāng)了基本上除了印刷以外的所有主要工作，既要和客戶溝通，了解用戶需求和想法以及存在的問題，又要思考和制定設(shè)計方案，向客戶展示設(shè)計提案，又要執(zhí)行獲得認(rèn)可的設(shè)計提案，保證設(shè)計成果符合客戶預(yù)期并落地，如果是最后要交付印刷品，可能還要跟進印刷的過程，保證印刷物料的質(zhì)量。好像一個人把所有的活都要干了。
但是互聯(lián)網(wǎng)產(chǎn)品不太一樣，首先最大的問題是如何讓方案落地的過程，這個工作一般來說沒有辦法一個人干（除非是牛到精通前端后端和客戶端的各種開發(fā)語言的全棧設(shè)計師），因為會涉及到程序開發(fā)，有一些設(shè)計師，就算你厲害了，你能把產(chǎn)品交互和 UI 都搞定，然后你還會（web端）前端開發(fā)語言或者客戶端開發(fā)語言，但是你還是需要一個能寫后臺的工程師，所以，正常情況下，互聯(lián)網(wǎng)產(chǎn)品的開發(fā)，是環(huán)環(huán)相扣的，至少都需要兩到三個人來配合工作。這還是比較小型的產(chǎn)品，如果是復(fù)雜的產(chǎn)品，那每個環(huán)節(jié)都必須細(xì)分出來，而且可能每個環(huán)節(jié)都不止一個人，產(chǎn)品，交互，UI，前端，客戶端，后臺，因為每個環(huán)節(jié)的工作量都太大了！
△ 圖源：Nick Taylor
既然有這么多的分工，那必然會導(dǎo)致不同的工作崗位看問題的點都是不一樣的。舉個例子：經(jīng)常會聽到開發(fā)說，明明用 A 就可以，為什么非要用 B？一開始的時候，其實我真的不太理解，但是后來慢慢熟悉了開發(fā)的工作之后（尤其是自己開始學(xué)習(xí)一些代碼知識之后）慢慢理解了，其實開發(fā)在實現(xiàn)我們的設(shè)計的時候，最關(guān)注的是功能的實現(xiàn)，而功能就是各種交互的集合，一個頁面上，如果交互不變，功能不變，只是改一些視覺上的樣式，這是相對來說簡單的，如果牽扯到交互的調(diào)整和修改，那個工作量可能就成倍增加，所謂牽一發(fā)而動全身。所以我們在設(shè)計的時候，更要注意模塊和組件的一致性和可復(fù)用性，這樣不僅可以提高我們的設(shè)計質(zhì)量，也可以有效的減少開發(fā)的工作量，提高開發(fā)的效率。
同時，開發(fā)在實現(xiàn)的第一個版本的產(chǎn)品中一般很多時候視覺上會有各種各樣的問題，開發(fā)人員在開發(fā)過程中，為了提率，不太在意還原 UI 的細(xì)節(jié)，比如這個間距是多少，那個間隔是幾個像素，所以最后產(chǎn)品上線前都會有 UI走查的環(huán)節(jié)，在這個過程中就是要一點一點地改進產(chǎn)品UI 實現(xiàn)中不符合設(shè)計稿的地方，這個時候才是我們設(shè)計師關(guān)注所謂的每一個像素的時候，在那之前，還是先關(guān)注功能和流程的實現(xiàn)吧。
其實不僅僅是因為每個崗位的職能不同會導(dǎo)致很多不同的意見，有時候也可能是因為每個人的審美或者是性格的問題，也會產(chǎn)生不少的摩擦，所以，學(xué)會妥協(xié)，在妥協(xié)中堅持是團隊合作中的一門大學(xué)問。
以攻為守，讓自己從更全面的視角去思考 UI 的工作。
△ 圖源：Nick Taylor
一個 UI設(shè)計師的未來在哪里？有時候我會思考這樣的問題，有可能是因為我已經(jīng)30了。這一兩年，危機感很重，每次看到非科班群里各種90后、95后的年輕設(shè)計師，心生羨慕的同時也充滿了莫名的壓力。
這半年多因為自己團隊中沒有專門的交互設(shè)計師，所以我就同時肩負(fù)了大部分交互設(shè)計的工作。一開始做交互設(shè)計的東西，其實自己的認(rèn)識還是很淺薄的，雖然平時自己也看很多用戶體驗，設(shè)計心理學(xué)、交互設(shè)計等等的書籍，但是真的上手干活，還是會經(jīng)常一頭霧水，因為交互設(shè)計太需要縝密的邏輯思維了。市場上常見的 app 的標(biāo)準(zhǔn)化的交互設(shè)計因為都有競品參考，還是相對來說簡單的，在我看來比較難的是工具型的產(chǎn)品和 CMS（內(nèi)容管理系統(tǒng)后臺），尤其是 CMS 的交互設(shè)計，如果設(shè)計不好，分分鐘讓用的人感覺要崩潰。交互設(shè)計是一門很深的學(xué)問，也是 UI設(shè)計師必須去了解和熟知的，它絕不是簡單的頁面之間的跳轉(zhuǎn)，也不僅是酷炫的動效，它是能讓產(chǎn)品的使用體驗得到質(zhì)的飛躍的關(guān)鍵。
如果把一個產(chǎn)品比作一個人，那產(chǎn)品本身的方向是這個人的靈魂和思想，交互是這個人的舉止和修養(yǎng)，而 UI 是一個人外形和穿衣品味以及整體氣質(zhì)，優(yōu)秀的人，三者缺一不可，三者是共生的關(guān)系。
在我看來。成為一個產(chǎn)品設(shè)計師，了解產(chǎn)品思維，熟悉交互設(shè)計，精通視覺設(shè)計，這樣的設(shè)計師覺得才是以后互聯(lián)網(wǎng)設(shè)計師的標(biāo)配。高配是什么？我覺得至少是全棧設(shè)計師吧。這就像平面設(shè)計領(lǐng)域，不懂印刷各種工藝和材質(zhì)的，都稱不上好的平面設(shè)計師。好的建筑設(shè)計師，也得懂很多建筑學(xué)和建筑材料的知識。
我在這半年的實際工作中，雖然第一個產(chǎn)品的概念定義和原型我沒有參加討論（我去的時候已經(jīng)定下來了），但是我還是嘗試去思考這個產(chǎn)品到底意義在哪里，目標(biāo)用戶是哪些人，解決了目標(biāo)用戶的什么需求，他們的使用場景有哪些。我一直都認(rèn)為互聯(lián)網(wǎng)產(chǎn)品的設(shè)計工作始終更是貫穿著設(shè)計思維，只是每個具體的分工的側(cè)重點不同，你可以不精于產(chǎn)品需求的整理和篩選，但你是得明白你你所設(shè)計的是為了滿足什么需求，有目標(biāo)和方向才能做出更好的設(shè)計，你連問題都不知道，怎么去解決問題。設(shè)計的工作，終究都是為了解決問題，不了解問題的來龍去脈，便不能梳理出問題的本質(zhì)，更無法做出好的設(shè)計去解決問題。
把自己定位為產(chǎn)品設(shè)計師，稍微多花點心思去思考產(chǎn)品，去學(xué)習(xí)交互，別讓自己的眼界停留在只畫幾個好看界面，畫幾套特別的圖標(biāo)，不然你早晚要被這個行業(yè)淘汰，不對，是被其他更優(yōu)秀的設(shè)計師淘汰。
很多公司并不真的在意所謂的 UCD。
△ 圖源：Nick Taylor
我相信大部分的設(shè)計師還是在中小型的企業(yè)里工作，這樣的企業(yè)的設(shè)計工作有一個很明顯的特征，就是以主管或者老板的喜好為第一滿足目標(biāo)，所有的設(shè)計方案都會以老板的喜好為基準(zhǔn)參考，只有老板說 ok 才算是 ok。當(dāng)然，我們公司也是，畢竟我們也是一個小型公司，而且老板的個人風(fēng)格特別強烈。所以在做第一款 app 時，僅僅是首屏的視覺方案，都出了不止七八個版本。在進入更加深入的其他頁面的設(shè)計環(huán)節(jié)時，我們也沒有去做什么用戶場景分析或者用戶需求分析之類的工作，都是依照著老板的一些想法去一步一步的實現(xiàn)，當(dāng)然，這并不是一定是錯的，只是大部分公司的設(shè)計工作的現(xiàn)狀，這樣也可能會有好的產(chǎn)品，只是可能性更低而已。很多公司沒有很專業(yè)的設(shè)計團隊，也沒有很專業(yè)的產(chǎn)品經(jīng)理，更沒有很專業(yè)的產(chǎn)品設(shè)計師，做很多設(shè)計決策的時候基本上都是靠拍腦袋，或者依靠個人的生活或者設(shè)計經(jīng)驗，在不知不覺中，就把 UCD 的設(shè)計方法忘在腦后了，UI設(shè)計師只是負(fù)責(zé)機械式美化下每一個元素，做一下視覺風(fēng)格的統(tǒng)一，變成了一個不折不扣的界面美化師。
但我們 UI設(shè)計師不能只是美化一下界面，雖然我們可以沒有專業(yè)的設(shè)計團隊，沒有很厲害的產(chǎn)品經(jīng)理或者交互設(shè)計師，但是我們也要在設(shè)計過程中不斷地提醒自己，要以用戶體驗為中心，用戶在這個界面需要的是什么，什么信息對他來說是最重要的，怎么樣設(shè)計可以減少用戶的瀏覽負(fù)擔(dān)，提高用戶的使用效率，雖然可能我們思考的方向和結(jié)果的不一定對，但是只要去想，才能不斷強化我們自己的這個設(shè)計思維，避免自己產(chǎn)出千篇一律的設(shè)計方案，提高自己的設(shè)計能力。如果能把每一項工作都盡百分之120的努力去完成，那就算你現(xiàn)在是在一個微不足道的小公司，你也一定能成長為一個設(shè)計大牛。
現(xiàn)在作品不好，沒問題，如果一直都不好，那就是你自己真的出了問題。
△ 圖源：Nick Taylor
我以前很羨慕那種設(shè)計師，年紀(jì)輕輕就進大公司，或者20歲不到作品就讓人感覺眼前一亮。對于我這種非科班的，大學(xué)畢業(yè)7年了，認(rèn)真靜下心來干設(shè)計才3年多，似乎還沒開始跑，就已經(jīng)被人甩開一大截了。
看起來似乎很糟糕，但其實真不是，你所經(jīng)歷的一切艱難，如果挺過去了，那就是你人生寶貴的財富。那應(yīng)該怎么做呢？只能不斷努力地去縮小和別人的差距，不對，不是和別人的差距，是和自己對自己期望值的差距。
那么提高審美和眼界就是最基本要做的事情，同時我也認(rèn)為這是作為一個設(shè)計師需要持續(xù)不斷提高的最基本的能力。審美和眼界的提高是需要日積月累的，軟件操作和技法可以短時間內(nèi)突擊學(xué)習(xí)，也可以臨時偷師，但是如果你審美不行，你永遠都不可能做出好的設(shè)計，因為在你的眼里的高級和在高水平設(shè)計師眼里的高級，可能是天差地別。審美和眼界就像是一種設(shè)計師的隱藏屬性，會在你日常的設(shè)計當(dāng)中不自然的流露出來，你不需要去調(diào)動它，它自然而然的就會在你的工作中不斷地幫助你。
但是往往很多設(shè)計師不把這個當(dāng)一回事。其實你只要每天堅持不停地看優(yōu)秀的作品，堅持幾個月或者半年一年的，你的審美肯定都會有質(zhì)的飛躍。以前你覺得設(shè)計很棒的作品，可能你以后看起來就會嗤之以鼻了。
看作品這件事其實很簡單，你只要每天打開 behance，打開首頁推薦的十個作品，花個十幾二十分鐘細(xì)細(xì)看下來，覺得好的就分類收藏一下，以備以后可以用來做設(shè)計的參考。
但是，關(guān)鍵是堅持。
別總看國內(nèi)的設(shè)計網(wǎng)站了，外面的世界更精彩。
為什么要重新學(xué)習(xí)英語？（我就是想萬一以后牛X了，可以混到國際舞臺上，嗯，這個可以有）
一開始決定重拾英語的契機，這還要感謝砂姐組織的翻譯小組。我也只是想試試看，能不能把英語重新?lián)炱饋?。于是?7年2月份開始我給自己定了個目標(biāo)，每個月翻一篇英語的設(shè)計類文章，很慶幸自己堅持下來了。同時在工作中遇到的不少問題，會逼著我去看一些外文的資料，讓我覺得我必須得更努力地把英語撿起來，于是最近幾個月同時也開始背單詞，每天堅持讀英語的設(shè)計文章，跟一開始比，感覺還是很有收獲的，看文章的速度越來越快，閱讀時的語感也越來越好（這個越來越好是相對于自己很糟糕時候的狀態(tài)）。
慢慢地，我感覺，學(xué)好英語，對于一個設(shè)計師的長遠發(fā)展是很有幫助的。
如果你想去了解世界上更多優(yōu)秀設(shè)計師的想法，學(xué)習(xí)他們的經(jīng)驗，那么就得親自去獲取第一手的信息，而不是等著其他人的翻譯，而且很多各種設(shè)計領(lǐng)域的優(yōu)秀的教材和資料都只有英文版本，如果不把英語學(xué)好，自己學(xué)到的不僅僅是很多殘缺不全的二手資料，甚至連學(xué)習(xí)的機會都沒有。把英語學(xué)好，是給自己打開通往更廣闊領(lǐng)域的鑰匙。你的眼界，決定了你成就的上限。
學(xué)習(xí)從來都不是件輕松愉快的事情。
做界面的同學(xué)有沒有遇到過這樣的情況：我明明是設(shè)計成這樣的，為什么開發(fā)出來之后就變成那樣了？
這就是我下定決心想學(xué)習(xí)代碼的導(dǎo)火索。我就想，為什么我不能自己學(xué)習(xí)代碼自己實現(xiàn)自己的設(shè)計么？這不是很厲害么？加上我之前也斷斷續(xù)續(xù)地對前端技術(shù)有過學(xué)習(xí)的念頭，于是一鼓作氣下定決心就開始學(xué)了。
出于想給自己開發(fā)個人網(wǎng)站的初衷，我就選擇了前端的開發(fā)語言作為我的學(xué)習(xí)內(nèi)容。我目前主要學(xué)習(xí)的是 Javascript（html 和 css 已經(jīng)學(xué)了個大概）。
一開始學(xué)習(xí)的時候真的是痛苦不堪，但是在度過了一兩個月的痛苦的煎熬之后，已經(jīng)慢慢地發(fā)現(xiàn)學(xué)習(xí)代碼的樂趣，但同時，發(fā)現(xiàn)這個坑是越來越大，感覺要學(xué)的東西是自己預(yù)想的要多太多了。雖然過程很糾結(jié)也很痛苦（我估計這種痛苦的感覺還會持續(xù)好長時間），學(xué)習(xí)代碼的過程對于提高設(shè)計師的邏輯思維確實很有幫助，因為編程思維和設(shè)計工作的思維相比，更注重邏輯性（設(shè)計工作也很注重邏輯性）。同時，多了解一些編程的知識（編程開發(fā)的語言很多，但是思維方式是類似的）對于理解開發(fā)人員的工作內(nèi)容和工作方式，也會有很大的幫助?；ヂ?lián)網(wǎng)的設(shè)計師，我覺得在學(xué)有余力的情況下，都應(yīng)該多多少少學(xué)習(xí)一些代碼的知識，因為這畢竟也是產(chǎn)品開發(fā)的其中的一個重要環(huán)節(jié)，你不需要擅長，但懂一些，可以讓你更好地和開發(fā)人員進行有效的溝通，知己知彼，減少撕逼。但是不建議設(shè)計工作經(jīng)驗較少的同學(xué)學(xué)習(xí)代碼，畢竟這需要很多的時間去學(xué)習(xí)，不要把自己變成什么都是半桶水，在不影響設(shè)計工作之余可以抽出時間的話讓自己嘗試一下，說不定你也會喜歡上編程這件事。
藍藍設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
設(shè)計師不光要會做軟件設(shè)計，一些造型的表達也是很重要的，今天那就隨我來看看這只蝴蝶是怎么做出來的吧。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
生命周期函數(shù)是指在某一個周期自動執(zhí)行的函數(shù)。
以下是React中的常用的生命周期函數(shù)，按個部分中按照自動執(zhí)行順序列出，這幾個過程可能存在同時進行
consructor()里面初始化Props和State屬性。
componentWillMount()：在組件即將被掛載到頁面的時刻自動執(zhí)行。
render()：將組件掛載到頁面。
componentDidMount()：組件被掛載到頁面之后立即執(zhí)行。
componentWillReceiveProps()：一個組件要從父組件接收參數(shù)， 只要父組件的render()函數(shù)非首次（如果這個組件第一次存在與父組件中不會執(zhí)行，如果已經(jīng)存在于父組件中才會執(zhí)行）執(zhí)行了，子組件的這個生命周期函數(shù)就會被執(zhí)行。如果組件沒有Props屬性則直接跳過
shouldComponentUpdate()：組件更行之前檢查是否需要更新，注意這個函數(shù)要有一個布爾類型返回值，如果返回false，這一部分的生周期 函數(shù)將不會繼續(xù)執(zhí)行，即無論如何組件都不會更新。利用這個生命周期函數(shù)可以強制關(guān)閉不需要更新的子組件來提升渲染性能
componentWillUpdate()：組件更新之前。自動執(zhí)行。但要在shouldComponentUpdate()執(zhí)行并返回true之后執(zhí)行。
render()：將組件更新到頁面。
componentDidUpdate():組件更新完成之后立即執(zhí)行。
componentWillMount()：當(dāng)組件即將被頁面剔除時執(zhí)行。
render()也是生命周期函數(shù)，而constructor()并不是生命周期函數(shù)。
render()函數(shù)，其他的所有生命周期函數(shù)都可以不寫，也不會報錯，但是如果缺少render()函數(shù)程序就會報錯，因為所有的生命周期函數(shù)除了render()函數(shù)都是繼承自React中內(nèi)置的。
componentDidMount()里面。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍藍設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
本文重點梳理以下七大問題：一、令人眼花繚亂的專業(yè)術(shù)語；二、交互和視覺如何分工；三、工作的流程；四、視覺類UI的自學(xué)；五、交互設(shè)計需要掌握的知識；六、今天設(shè)計什么；七、設(shè)計師的薪資
經(jīng)常有人問我新手如何自學(xué)交互設(shè)計，我之前也錄過一個視頻給大家，沒想到放到網(wǎng)上后點擊率很高，看來對新人是的確有幫助的。所以今天再次針對這個問題做闡述，修正了第一版的一些內(nèi)容，也更具有針對性。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
本組件基于element-ui 的圖標(biāo)庫（星星圖標(biāo)）
第一步：
vue + webpack + element-ui 框架
第二步：
創(chuàng)建Rate.vue文件，實現(xiàn)雙向綁定分?jǐn)?shù)
第三部：
使用組件
在app.vue中引入組件
組件
說明
代碼
<Rate v-model='value' size="32px">
<span>{{value}} 分</span>
</Rate>
import Rate from './components/Rate'
<template>
<div class="Rating" :value='value'>
<ul class="Rating-list">
<li v-for="s in 5" @click="changeRate(s)">
<i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
</li>
</ul>
<slot></slot> <!--顯示用戶自定義內(nèi)容-->
</div>
</template>
props: {
size: { //父組件傳值設(shè)置字體大小
type: String,
default: '16px'
},
value: { //綁定value，與$emit實現(xiàn)雙向綁定
type:Number,
default:0
}
},
data() {
return {
star: this.value, // 初始化
style: {
fontSize: this.size //通過prop傳值設(shè)置星星字體大小
}
}
},
methods: {
changeRate(s) {
this.star = s //更新當(dāng)前星星數(shù)量
this.$emit('input', s); //將當(dāng)前星星數(shù)量s與v-model綁定
}
}
demo演示
隨著時間的發(fā)展，現(xiàn)在基本上人手一部手機的低頭族。做為前端開發(fā)的程序猿，在開發(fā)移動端web應(yīng)用的時候，對面一堆各色尺寸不一樣的屏幕，就有點淡淡的憂傷。
以上是2018年二月份的友盟數(shù)據(jù)，可在這里查看詳情
很明顯我們所要實現(xiàn)的就是在上述如此之多的屏幕,都能實現(xiàn)UI大大出的視覺圖上的效果。而要實現(xiàn)這樣的效果主要有兩個難點
各屏幕適配各屏幕的適配，有兩種方案，flexible + rem 與 vw。這三個單詞是什么意思，看著很眼熟，但是這兩個方案居然是什么呢,請允許我細(xì)細(xì)道來。
flexible + rem顯而易見,該方案是由rem 以及 flexible組成的。rem （font size of the root element）相對于根元素(即html元素)font-size計算值的倍數(shù),flexible 即 flexible.js, 手淘團隊提供的一個為該方案屏幕適配而寫的一個庫,主要實現(xiàn)的功能就是，根據(jù)屏幕的寬度給 html 元素設(shè)置一個合適的 font-size 值。
怎么樣看的不是很懂是吧。讓我來用一個頁面場景再復(fù)述一遍。
正常情況下，我們的UI大大會以iphone6的尺寸為標(biāo)準(zhǔn)，做一套視覺效果圖，并在上面進行標(biāo)注，給到我們的標(biāo)注圖，如下所示
拿到這個圖 我們該如何下手呢
到這里為止是不是就結(jié)束了呢 ? 很遺憾的告訴你并不是。為什么 html 元素的 font-size 要設(shè)置為 37.5px呢？現(xiàn)在這個界面在iphone6上能完美顯示了，在iphone5s,iphone6p能完美顯示嗎？（iphone6, iphone6s, iphone7. iphone8屏幕沒有發(fā)生變化，本文直接用iphone6代替了。）上面的兩個問題 我們還有沒解決，這個時候就輪到flexible登場了。只需要像如下引入就可實現(xiàn)用js來自動根據(jù)屏幕寬度設(shè)置 html元素的font-size的值。
<script src=";引申一下在上述過程中，你會發(fā)現(xiàn)，UI給到我們的一般是px標(biāo)注的圖，我們將其轉(zhuǎn)化為rem，這個過程其實會花費很大的計算時間。做為一個合格的程序員，我們應(yīng)該把這種機械性無腦的操作交給計算機來實現(xiàn)。我使用的是PostCss的插件 postcss-px2rem,這個插件能讓我們在寫代碼時候直接寫px，在構(gòu)建的時候自動將我們所寫的px轉(zhuǎn)換為rem，大大提升了我們的開發(fā)效率。
vw這個vw的方案，相當(dāng)而言還比較新。vw 即（viewport width）可視窗口的寬度。之所以把這個方案放在后面來說，是因為viewport在去年（2017年）的時候存在不少的兼容性問題，各個瀏覽器的支持并不是很好。但是來到了2018年這個時間點，viewport單位意見得到了眾多瀏覽器的支持（80.45%）。
可以在這里查看。
接下來就讓我們來正式了解下這個方案吧。vw既然是一個尺寸單位，那它的寬度等于多少呢？等于1%整個屏幕的寬度。舉個例子，再次以iphone6手機為例，100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到這里為止是不是就結(jié)束了呢? 是的就是這么簡單。
引申一下跟之前一樣的痛點，我們?nèi)匀恍枰ㄙM大量不必要的計算時間去把標(biāo)注圖中的px轉(zhuǎn)換為vw，有沒有類似于postcss-px2rem的工具呢？很榮幸能再次站在巨人的肩膀上，已經(jīng)有大神寫了了類似的PostCss插件 postcss-px-to-viewport
1px問題移動端的屏幕不僅僅分辨率有差異，其實還有Retina屏的問題。正常情況下，我們代碼里的1px在屏幕上就應(yīng)該顯示一個像素點，但是在Retina屏下則不僅僅是一個像素點。再次拿iphone6為例，其dpr(device pixel ratio)設(shè)備像素比為2，css中一個1x1的點，其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px，在iPhone6 Plus下甚至?xí)@示成3px。
這樣的話，我們就會發(fā)現(xiàn)在有些手機上1px明顯跟另外的一些手機的1px粗細(xì)不一樣。其實大多數(shù)的小公司不會扣這樣的一個細(xì)節(jié)，比如說我們公司不會。(^__^) 嘻嘻……
但是作為一個有追求的前端工程師，我們應(yīng)該盡量的把事情做的完美一點，（ps.像大公司看齊，在大公司這個細(xì)節(jié)問題其實是不容忽視的，為了自己以后的發(fā)展前途，我們有必要把這個細(xì)節(jié)完善掉的。）
這個問題的解決方案有很多，個人覺得最簡單方面的還是大漠大大的一種解決方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}編譯出來就是
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='其他小程序中的屏幕適配最近在寫小程序，在小程序里，使用的是小程序的那套，跟平時用的vue全家桶以及react全家桶不一樣，并沒有配置webpack，在這種情況下我們使用postcss其實很困難（反正我是搞不出來/(ㄒoㄒ)/~~）
那該怎么辦呢，小程序提供了一個自己的單位, rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
設(shè)備
iPhone5
iPhone6
iPhone6p
我們直接用拿到iphone6的標(biāo)注圖，直接寫rpx就好。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
想一個問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？
原因會有很多種，但是幾乎每一種原因都可以對應(yīng)到更深的層次。比如給你發(fā)消息的人對你而言不重要，是因為缺乏了回復(fù)的動機；沒時間回復(fù)是因為缺乏了回復(fù)的能力；關(guān)閉了提醒是缺乏了回復(fù)的觸發(fā)因素……
動機，能力，觸發(fā)三大要素，是讓用戶產(chǎn)生行為必不可少的三大條件，在行為模型里也十分重要。
最早在 Norman 的《設(shè)計心理學(xué)》了解到關(guān)于行動的幾個步驟，他將行動拆分為目標(biāo)，執(zhí)行，評估三大階段，每一階段又分為幾個步驟，簡單畫了邏輯圖 ：
但是很多時候會發(fā)現(xiàn)，用戶不一定會按我們所設(shè)想的方式去使用我們的產(chǎn)品，特別是注冊，購買等能提升轉(zhuǎn)化率的行為……我在查詢了一些關(guān)于心理學(xué)方面的內(nèi)容后，發(fā)現(xiàn)了用戶不進行這些行為，其實都是有可以解釋的依據(jù)的，并且我們還可以利用這些依據(jù)來改善我們的產(chǎn)品。
從前面微信的例子，我們可以得知，要想讓用戶產(chǎn)生行為（Behavior），必須具備三個要素：充分的動機（Motive），完成這一行為的能力（Ability），促使人們付諸行動的觸發(fā)（Trigger），這三者缺一不可。
于是我們可以得出一個行為模型：B=MAT，我們可以從數(shù)學(xué)的角度類比出人們產(chǎn)生行為的「臨界點」，可以稱為「行動邊界線」（當(dāng)然這是我自己瞎取的名字，方便理解），只有用戶跨越了「行動邊界線」，才能實施或者產(chǎn)生某種行為。
所謂觸發(fā)，就是促使用戶做出某種舉動的誘因，引發(fā)用戶去使用你的產(chǎn)品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶，這個可以稱為「付費型觸發(fā)」；
還有一些公關(guān)、媒體新聞的正面報道 ，app store 里面排行榜，AppSo 推薦好用應(yīng)用等不需要付費，但是能夠吸引用戶使用你的產(chǎn)品，這個可以稱為「回饋型觸發(fā)」；
還有熟人之間的相互推薦，親朋好友的口碑相傳，這種方式十分常見，也是能夠讓產(chǎn)品大規(guī)模獲取用戶的一種方式，我們可以稱為「人際型觸發(fā)」。
但是這種方式經(jīng)常會被惡意利用，比如我們經(jīng)常看到的：分享XX到幾個群即可領(lǐng)取XXX優(yōu)惠，最后卻發(fā)現(xiàn)是騙人的方式，利用這種方式也許可以獲取大批用戶，但是一旦用戶發(fā)現(xiàn)被欺騙后就會立即停止使用你的產(chǎn)品，你也會失去用戶的信任。
還有一種是以驅(qū)動用戶重復(fù)某種行為的方式，用戶主動與產(chǎn)品保持聯(lián)系，比如用戶注冊了某個平臺的賬戶，訂閱了它們的內(nèi)容更新，開啟了消息推送，那么每一次更新推送就很有可能觸發(fā)用戶使用你的產(chǎn)品，這種方式可以稱為「自主型觸發(fā)」。
以上四種觸發(fā)方式，都是來源于外部環(huán)境，那么我們可以將其稱為「外部觸發(fā)」。
昨晚在 PM CIRCLE 里面看到大家在談?wù)撽P(guān)于痛點、癢點、爽點的問題，也出了系列文章，后來在知乎上也搜了相關(guān)大佬的回復(fù)。
小小的總結(jié)一下：
為什么我會提到「痛點」、「癢點」、「爽點」？是因為我覺得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動。
Nir Eyal 將情緒觸發(fā)分為兩種，一種為負(fù)面情緒，一種為正面情緒，兩種情緒皆可觸發(fā)用戶采取行動，但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內(nèi)部觸發(fā)的話會更好，這三點通過深入挖掘用戶內(nèi)在的情感體驗，設(shè)計出滿足用戶需求的產(chǎn)品，利用這三點也可以觸發(fā)用戶使用你的產(chǎn)品。
可以思考一下，人們?yōu)槭裁匆l(fā)朋友圈，發(fā)微博？為什么要拍照？為什么要刷抖音？為什么朋友圈更新出現(xiàn)小紅點后我就要去點擊看？用戶借助這些產(chǎn)品實現(xiàn)了怎樣的目的？消除了什么樣的煩惱？使用完這些產(chǎn)品后用戶感受如何？等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly，Denis J 有一個觀點就是：當(dāng)你使用某個產(chǎn)品時所需花費的步驟能被縮減或者是優(yōu)化時，用戶使用它的頻率就會增加。他在《Something Really New》一書中，歸納了產(chǎn)品創(chuàng)新的三個步驟，簡單畫了下步驟圖：
結(jié)合今天的科技變化，我們可以知道，將行為簡單化可以推動產(chǎn)品創(chuàng)新，也只有將行為簡單化，用戶才會具備完成這一行為的能力。
福格總結(jié)了簡潔性包含的6個元素，也就是影響任務(wù)難易程度的6個要素，簡單總結(jié)下：
福格建議，為了增加用戶實施某個行為的可能性，設(shè)計人員在設(shè)計產(chǎn)品時，應(yīng)該關(guān)注用戶最缺乏什么。
也就是說，要弄清楚是什么原因 阻礙了用戶完成這一活動：是時間不夠嗎？還是缺乏資金？還是完成這一活動太耗體力了？或者是用戶不想動腦筋？或者是這個產(chǎn)品與他們所處的社會環(huán)境格格不入？甚至是它太逾越常規(guī)，以至讓人難以接受？
我記得我第一份實習(xí)，做的一款新聞app，那個時候還不懂交互也不懂產(chǎn)品，我記得在首頁查看新的新聞內(nèi)容的時候 ，因為數(shù)據(jù)加載量的原因，每次只能加載一定數(shù)量的新聞，所以當(dāng)時設(shè)計的是一個「查看更多」的列表條，用戶每次需要加載更多新聞內(nèi)容的時候，都需要點擊一次「查看更多」加載大約6條新的新聞，其實現(xiàn)在想想，為什么我們不設(shè)計一個自動加載呢？每次用戶上拉的時候，自動加載一部分，這樣能夠讓操作更加便捷，節(jié)約時間。
觸發(fā)是提醒用戶采取行動，而動機決定用戶是否愿意采取行動，也就是用戶行動時擁有的熱情。在心理學(xué)里面，福格博士歸納了驅(qū)使用戶采取行動的三大類核心動機：
能夠成為某些人行為動機的東西，未必適用于另外一些人，所以，我們需要知道自己的目標(biāo)用戶到底需要什么。
舉個例子：比如抖音的一些視頻封面，是一些漂亮的女生封面，而對于大都數(shù)男生來說，為了追求快樂，就有了點擊進去看的動機，而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰(zhàn)略導(dǎo)向下的設(shè)計價值拓展》線下分享會的時候，其中也講到了關(guān)于用戶的7大基本心理特征——七宗罪：憤怒，淫欲，貪婪，懶惰，嫉妒，暴食，驕傲。
我覺得這也是能夠讓用戶產(chǎn)生動機的七大因素 ，比如經(jīng)常被廣告商拿來利用的俗稱「性賣點」的廣告設(shè)計元素 ，利用人性的窺探欲，吸引用戶付諸行動……
當(dāng)我們知道了用戶采取行動的幾類核心動機后，我們可以通過一些心理學(xué)的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關(guān)于啟發(fā)法等認(rèn)知偏差對人類行為的影響，比如稀缺效應(yīng)，首因效應(yīng)，環(huán)境效應(yīng)，投射效應(yīng)，近因效應(yīng)，錨定效應(yīng)，贈券效應(yīng)，目標(biāo)漸進效應(yīng)等 。
比如很多電商平臺商家會故意將商品庫存降低，當(dāng)產(chǎn)品數(shù)量由多變少的時候，它在用戶心中的價值就會提高，那么用戶購買的動機就會增強，這就是利用了稀缺效應(yīng) ；
再比如目標(biāo)漸進效應(yīng)，大意是講當(dāng)用戶認(rèn)為自己距離目標(biāo)越來越近時，完成任務(wù)的動機會更加強烈。
目標(biāo)漸進效應(yīng)讓我突然想到長沙的網(wǎng)紅奶茶——茶顏悅色的集點卡，大概就是積滿6點可以送一杯奶茶，我在第一次買第一杯的時候，他們給了我一張集點卡，上面已集了1個點，意思就是說我再集5個點就可以兌換一杯奶茶了，但是如果換一種方式，它把規(guī)則改成集5點可以兌換一杯奶茶，但是我買第一杯的時候，他們給我的卡上是空白的，沒有點，那么你們覺得這兩種方式，哪種方式更能讓用戶產(chǎn)生集點的動機呢？
藍藍設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
想一個問題吧，如果有人給你發(fā)了一條微信，你沒有回復(fù) ta，原因是什么？
原因會有很多種，但是幾乎每一種原因都可以對應(yīng)到更深的層次。比如給你發(fā)消息的人對你而言不重要，是因為缺乏了回復(fù)的動機；沒時間回復(fù)是因為缺乏了回復(fù)的能力；關(guān)閉了提醒是缺乏了回復(fù)的觸發(fā)因素……
動機，能力，觸發(fā)三大要素，是讓用戶產(chǎn)生行為必不可少的三大條件，在行為模型里也十分重要。
最早在 Norman 的《設(shè)計心理學(xué)》了解到關(guān)于行動的幾個步驟，他將行動拆分為目標(biāo)，執(zhí)行，評估三大階段，每一階段又分為幾個步驟，簡單畫了邏輯圖 ：
但是很多時候會發(fā)現(xiàn)，用戶不一定會按我們所設(shè)想的方式去使用我們的產(chǎn)品，特別是注冊，購買等能提升轉(zhuǎn)化率的行為……我在查詢了一些關(guān)于心理學(xué)方面的內(nèi)容后，發(fā)現(xiàn)了用戶不進行這些行為，其實都是有可以解釋的依據(jù)的，并且我們還可以利用這些依據(jù)來改善我們的產(chǎn)品。
從前面微信的例子，我們可以得知，要想讓用戶產(chǎn)生行為（Behavior），必須具備三個要素：充分的動機（Motive），完成這一行為的能力（Ability），促使人們付諸行動的觸發(fā)（Trigger），這三者缺一不可。
于是我們可以得出一個行為模型：B=MAT，我們可以從數(shù)學(xué)的角度類比出人們產(chǎn)生行為的「臨界點」，可以稱為「行動邊界線」（當(dāng)然這是我自己瞎取的名字，方便理解），只有用戶跨越了「行動邊界線」，才能實施或者產(chǎn)生某種行為。
所謂觸發(fā)，就是促使用戶做出某種舉動的誘因，引發(fā)用戶去使用你的產(chǎn)品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶，這個可以稱為「付費型觸發(fā)」；
還有一些公關(guān)、媒體新聞的正面報道 ，app store 里面排行榜，AppSo 推薦好用應(yīng)用等不需要付費，但是能夠吸引用戶使用你的產(chǎn)品，這個可以稱為「回饋型觸發(fā)」；
還有熟人之間的相互推薦，親朋好友的口碑相傳，這種方式十分常見，也是能夠讓產(chǎn)品大規(guī)模獲取用戶的一種方式，我們可以稱為「人際型觸發(fā)」。
但是這種方式經(jīng)常會被惡意利用，比如我們經(jīng)?？吹降模悍窒鞽X到幾個群即可領(lǐng)取XXX優(yōu)惠，最后卻發(fā)現(xiàn)是騙人的方式，利用這種方式也許可以獲取大批用戶，但是一旦用戶發(fā)現(xiàn)被欺騙后就會立即停止使用你的產(chǎn)品，你也會失去用戶的信任。
還有一種是以驅(qū)動用戶重復(fù)某種行為的方式，用戶主動與產(chǎn)品保持聯(lián)系，比如用戶注冊了某個平臺的賬戶，訂閱了它們的內(nèi)容更新，開啟了消息推送，那么每一次更新推送就很有可能觸發(fā)用戶使用你的產(chǎn)品，這種方式可以稱為「自主型觸發(fā)」。
以上四種觸發(fā)方式，都是來源于外部環(huán)境，那么我們可以將其稱為「外部觸發(fā)」。
昨晚在 PM CIRCLE 里面看到大家在談?wù)撽P(guān)于痛點、癢點、爽點的問題，也出了系列文章，后來在知乎上也搜了相關(guān)大佬的回復(fù)。
小小的總結(jié)一下：
為什么我會提到「痛點」、「癢點」、「爽點」？是因為我覺得這三者是從內(nèi)部來觸發(fā)用戶采取下一步行動。
Nir Eyal 將情緒觸發(fā)分為兩種，一種為負(fù)面情緒，一種為正面情緒，兩種情緒皆可觸發(fā)用戶采取行動，但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內(nèi)部觸發(fā)的話會更好，這三點通過深入挖掘用戶內(nèi)在的情感體驗，設(shè)計出滿足用戶需求的產(chǎn)品，利用這三點也可以觸發(fā)用戶使用你的產(chǎn)品。
可以思考一下，人們?yōu)槭裁匆l(fā)朋友圈，發(fā)微博？為什么要拍照？為什么要刷抖音？為什么朋友圈更新出現(xiàn)小紅點后我就要去點擊看？用戶借助這些產(chǎn)品實現(xiàn)了怎樣的目的？消除了什么樣的煩惱？使用完這些產(chǎn)品后用戶感受如何？等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly，Denis J 有一個觀點就是：當(dāng)你使用某個產(chǎn)品時所需花費的步驟能被縮減或者是優(yōu)化時，用戶使用它的頻率就會增加。他在《Something Really New》一書中，歸納了產(chǎn)品創(chuàng)新的三個步驟，簡單畫了下步驟圖：
結(jié)合今天的科技變化，我們可以知道，將行為簡單化可以推動產(chǎn)品創(chuàng)新，也只有將行為簡單化，用戶才會具備完成這一行為的能力。
福格總結(jié)了簡潔性包含的6個元素，也就是影響任務(wù)難易程度的6個要素，簡單總結(jié)下：
福格建議，為了增加用戶實施某個行為的可能性，設(shè)計人員在設(shè)計產(chǎn)品時，應(yīng)該關(guān)注用戶最缺乏什么。
也就是說，要弄清楚是什么原因 阻礙了用戶完成這一活動：是時間不夠嗎？還是缺乏資金？還是完成這一活動太耗體力了？或者是用戶不想動腦筋？或者是這個產(chǎn)品與他們所處的社會環(huán)境格格不入？甚至是它太逾越常規(guī)，以至讓人難以接受？
我記得我第一份實習(xí)，做的一款新聞app，那個時候還不懂交互也不懂產(chǎn)品，我記得在首頁查看新的新聞內(nèi)容的時候 ，因為數(shù)據(jù)加載量的原因，每次只能加載一定數(shù)量的新聞，所以當(dāng)時設(shè)計的是一個「查看更多」的列表條，用戶每次需要加載更多新聞內(nèi)容的時候，都需要點擊一次「查看更多」加載大約6條新的新聞，其實現(xiàn)在想想，為什么我們不設(shè)計一個自動加載呢？每次用戶上拉的時候，自動加載一部分，這樣能夠讓操作更加便捷，節(jié)約時間。
觸發(fā)是提醒用戶采取行動，而動機決定用戶是否愿意采取行動，也就是用戶行動時擁有的熱情。在心理學(xué)里面，福格博士歸納了驅(qū)使用戶采取行動的三大類核心動機：
能夠成為某些人行為動機的東西，未必適用于另外一些人，所以，我們需要知道自己的目標(biāo)用戶到底需要什么。
舉個例子：比如抖音的一些視頻封面，是一些漂亮的女生封面，而對于大都數(shù)男生來說，為了追求快樂，就有了點擊進去看的動機，而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰(zhàn)略導(dǎo)向下的設(shè)計價值拓展》線下分享會的時候，其中也講到了關(guān)于用戶的7大基本心理特征——七宗罪：憤怒，淫欲，貪婪，懶惰，嫉妒，暴食，驕傲。
我覺得這也是能夠讓用戶產(chǎn)生動機的七大因素 ，比如經(jīng)常被廣告商拿來利用的俗稱「性賣點」的廣告設(shè)計元素 ，利用人性的窺探欲，吸引用戶付諸行動……
當(dāng)我們知道了用戶采取行動的幾類核心動機后，我們可以通過一些心理學(xué)的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關(guān)于啟發(fā)法等認(rèn)知偏差對人類行為的影響，比如稀缺效應(yīng)，首因效應(yīng)，環(huán)境效應(yīng)，投射效應(yīng)，近因效應(yīng)，錨定效應(yīng)，贈券效應(yīng)，目標(biāo)漸進效應(yīng)等 。
比如很多電商平臺商家會故意將商品庫存降低，當(dāng)產(chǎn)品數(shù)量由多變少的時候，它在用戶心中的價值就會提高，那么用戶購買的動機就會增強，這就是利用了稀缺效應(yīng) ；
再比如目標(biāo)漸進效應(yīng)，大意是講當(dāng)用戶認(rèn)為自己距離目標(biāo)越來越近時，完成任務(wù)的動機會更加強烈。
目標(biāo)漸進效應(yīng)讓我突然想到長沙的網(wǎng)紅奶茶——茶顏悅色的集點卡，大概就是積滿6點可以送一杯奶茶，我在第一次買第一杯的時候，他們給了我一張集點卡，上面已集了1個點，意思就是說我再集5個點就可以兌換一杯奶茶了，但是如果換一種方式，它把規(guī)則改成集5點可以兌換一杯奶茶，但是我買第一杯的時候，他們給我的卡上是空白的，沒有點，那么你們覺得這兩種方式，哪種方式更能讓用戶產(chǎn)生集點的動機呢？
藍藍設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
移動端搜索功能設(shè)計：3個階段解析搜索流程設(shè)計要點
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
這篇文章筆者想和大家聊一聊有關(guān)搜索功能的設(shè)計，搜索功能是每個內(nèi)容型APP的核心，它的易用性決定了用戶是否能從APP里快速找到自己想找的內(nèi)容，那么決定搜索體驗好壞的關(guān)鍵點又是什么呢？這里我總結(jié)了兩點，“操作的易用性”和“結(jié)果的準(zhǔn)確性”?？此坪唵蔚膬牲c卻有很多的學(xué)問，筆者把搜索的交互流程劃分成三個關(guān)鍵階段，“搜索前、搜索中及搜索后”，接下來將從這三個階段逐一分析整個搜索流程中的相關(guān)設(shè)計。
在不同的APP或者不同的場景下搜索入口有著不同的表現(xiàn)形式，具體的表現(xiàn)形式取決于產(chǎn)品對搜索功能權(quán)重的定義，如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來的權(quán)重就要高些，反之則低些。下圖是常見的搜索功能的入口形式，他們的權(quán)重從左到右依次降低，筆者將對他們一一進行分析
如下圖APP Store的搜索形式，搜索放在標(biāo)簽欄上作為一個獨立的功能模塊，它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面，這樣的搜索入口通常用在搜索場景非常多的內(nèi)容型APP上，方便用戶在任何時候快速進入搜索頁面。
如下圖是京東app的搜索入口，它將搜索框外漏在nav bar上，這樣的形式有著兩個設(shè)計的關(guān)鍵點：
關(guān)鍵點一：搜索框外漏在頂部導(dǎo)航條上
搜索框直接外漏在導(dǎo)航條上是為了突顯該功能，這一功能往往是用戶在該頁面非常核心的操作任務(wù)，類似天貓京東這類電商型app，通常情況下用戶都是帶著明確目的來購買東西的，那么他們采取的最快最直接的方式就是搜索。
關(guān)鍵點二：在向上滾動界面時，搜索框一直懸停在頂部
這樣做的場景是這樣的，在用戶滾動頁面尋找內(nèi)容時，可能并不能找到自己想要的內(nèi)容，搜索框一直懸停一是為了暗示用戶可以進行搜索，二是為了讓用戶在想搜索時快速觸發(fā)搜索
如下圖是微信在聊天頁面和通訊錄頁面的搜索入口，初始化狀態(tài)時聊天頁面的搜索框是不出現(xiàn)在用戶的可視范圍內(nèi)的，當(dāng)頁面下滑時搜索框才出現(xiàn)，而在通訊錄頁面里搜索框是默認(rèn)出現(xiàn)在用戶的可視范圍內(nèi)的。
分析：微信在最近聯(lián)系人和通訊錄上搜索框的默認(rèn)狀態(tài)不同，這很好地詮釋了這兩種場景下的搜索功能的權(quán)重。最近聯(lián)系人頁面上的搜索入口顯得更加隱蔽，因為在這個頁面下用戶產(chǎn)生搜索的場景很少，把其隱藏簡化了界面的元素，提升了界面的美觀性。
如下圖是淘票票的搜索的入口，通過點擊右上角的搜索icon進入搜索頁面：
分析：在界面權(quán)重上，這樣的方式相對于以上三種方式來說顯得較弱一點，因為在這樣的場景下用戶使用搜索的概率并不是很高，如果把搜索外漏就會占據(jù)更多的屏幕空間，破壞界面的權(quán)重等級和美觀性。
總結(jié)：依據(jù)用戶的需求場景，搜索入口放在不同的位置，如果說在該頁面搜索是一個主要的功能，我們就應(yīng)該去突顯它，提升它在界面上的權(quán)重，反之則減輕它的權(quán)重。
搜索中間頁本來應(yīng)該是一個輕量化的頁面，用戶在這里輸入內(nèi)容進行搜索即可。但隨著運營需求的擴張，這個頁面逐漸成為了一個運營重災(zāi)區(qū)，多了很多推薦的內(nèi)容。筆者將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設(shè)計。
搜索框內(nèi)的提示信息通常是提示用戶當(dāng)下可以搜索什么樣的內(nèi)容，如下圖bilibi的搜索提示，告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索，這樣的提示信息對用戶也是一種良性的引導(dǎo)，給用戶提供了一個心理預(yù)期，同時也對用戶隨意輸入關(guān)鍵詞造成無結(jié)果的傷害體驗的可能進行了限制。例如一個房產(chǎn)APP，搜索框內(nèi)提示輸入樓盤或小區(qū)名，如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源，這句提示語很好地降低了這樣的風(fēng)險。
但隨著人們對APP使用的熟悉，用戶在這里的認(rèn)知負(fù)擔(dān)基本消除，運營人員逐漸搶占了這塊地方，這句話變成了內(nèi)容的推薦或者產(chǎn)品的Slogan，這些推薦的內(nèi)容可以是運營人員手動維護的也可以是依據(jù)用戶的購買和行為習(xí)慣進行推薦的。如下圖右邊是淘寶的搜索提示，搜索框的文案變成了“紅人最愛潮牌名服”，這就是運營人員在為特定內(nèi)容進行導(dǎo)流。
在內(nèi)容型APP中搜索時通常會對內(nèi)容進行分類搜索，這是為了幫助用戶更地找到相關(guān)內(nèi)容，分類的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后，如下圖是“淘寶、微信、網(wǎng)易云音樂”搜索分類的方式，筆者將分別對他們進行分析。
淘寶是將搜索分類前置，默認(rèn)搜索寶貝，點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著，會導(dǎo)致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類的內(nèi)容，如淘寶這樣，用戶大部分的搜索場景都是在尋找寶貝。
微信默認(rèn)搜索所有內(nèi)容，將分類通過通過三個很顯著的入口放在搜索框下方，當(dāng)點擊某一分類時跳轉(zhuǎn)到該分類的搜索界面，同時搜索框的文案以及搜索界面的內(nèi)容發(fā)生相應(yīng)變化，提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時，它的缺點在于，從界面表現(xiàn)形式來看，這三個分類更像是三個功能的入口，他們與搜索框聯(lián)系得不是很緊密，很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經(jīng)測試3個從未使用過該功能的用戶，他們都認(rèn)為點擊朋友圈后就是進入朋友圈，點擊文章后就是顯示所有文章。
網(wǎng)易云音樂是將搜索分類進行后置了，在下文關(guān)于搜索結(jié)果的展示我會分析它的優(yōu)劣勢。
搜索歷史記住用戶的足跡，方便用戶快速向以前搜索過的內(nèi)容進行轉(zhuǎn)換。設(shè)計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區(qū)分開來，在位置上，盡量讓搜索歷史靠近搜索框（如下圖），因為從認(rèn)知心理學(xué)上來講，越靠近搜索框的內(nèi)容越能表示它是搜索歷史。在表現(xiàn)形式上，搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史
這里的搜索推薦通常有三種來源：
它存在的目的主要有兩個：
建議：
受移動端操控方式的限制，在輸入內(nèi)容時存在兩個明顯的痛點：“修改內(nèi)容”和“輸入速度”。
關(guān)于修改內(nèi)容：當(dāng)用戶想更改語句中一部分文字時，將光標(biāo)移動到想要更改的地方是一件很難的事，點擊操作真的很令人發(fā)狂，通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互，當(dāng)用戶按住鍵盤左右滑動時就能移動光標(biāo)（如下圖）。
關(guān)于輸入速度：很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時的一個交互功能，如下圖所示，當(dāng)輸入文字后，用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續(xù)輸入文字。這樣的需求場景在很常見，比如我想搜索“交互設(shè)計師的前景”，當(dāng)我輸入交互二字后就會有“交互設(shè)計”的搜索建議，點擊搜索建議后面的箭頭將這個詞直接加入搜索框，然后就出現(xiàn)了“交互設(shè)計師的前景”的搜索建議，點擊搜索建議后進入搜索結(jié)果的頁面，這個過程中我少打了很多字，對我的搜索速度有很大的提升。
當(dāng)用戶輸入內(nèi)容后，搜索框下面出現(xiàn)了眾多的搜索建議，這些搜索建議是為了幫助用戶快速向目標(biāo)進行轉(zhuǎn)化，如下圖是京東的搜索建議，當(dāng)我輸入畫框后，一系列畫框的搜索建議就出來了，它還有一個亮點就是在此提供了細(xì)化篩選條件，畫框后面緊跟了“長方形、實木、正方形”等關(guān)鍵的篩選條件，為用戶省去了到結(jié)果頁進行篩選的步驟。
搜索結(jié)果是搜索過程中最關(guān)鍵的點，結(jié)果的準(zhǔn)確性確定了用戶體驗的好壞，筆者將從“搜索結(jié)果的形式、搜索結(jié)果的操作、搜索結(jié)果的分類、搜索結(jié)果的排序”等方面來對搜索結(jié)果進行分析。
搜索結(jié)果一般分為兩種，一種是所見即所得，用戶輸入內(nèi)容后出現(xiàn)在搜索框下面的搜索建議就是搜索結(jié)果，這種搜索通常出現(xiàn)在一些輕量化的APP中，因為搜索建議對應(yīng)的就是唯一的搜索結(jié)果，如下圖微信的搜索一樣。
第二種形式就是一個關(guān)鍵詞對應(yīng)了多個搜索建議，每個搜索建議又對應(yīng)了多個搜索結(jié)果，當(dāng)用戶點擊搜索后進入了一個專門的搜索結(jié)果頁，如下圖京東的搜索一樣。
依據(jù)用戶的需求目的，在搜索結(jié)果的列表上我們可以外漏用戶大部分情況下會采取的操作，比如說視頻類網(wǎng)站，用戶搜索到某一內(nèi)容后，最常采取的操作就是播放，我們就可以把播放按鈕外漏，縮短用戶的操作路徑（如下圖愛奇藝的搜索結(jié)果頁）
通常的分類方式是TAB切和卡片，以下是微信和網(wǎng)易云音樂的分類。
這兩種方式有各自的應(yīng)用場景，TAB切主要應(yīng)用在搜索結(jié)果有固定的幾種分類，并且通常的情況下搜索結(jié)果都有很多的內(nèi)容，如上圖的網(wǎng)易云音樂，每一個分類都有很多的搜索結(jié)果，如果它采用卡片式的瀑布流布局，用戶需要不停往下翻才能看到第二種分類的內(nèi)容?？ㄆ街饕\用在搜索結(jié)果的內(nèi)容不多，如微信這樣的情況，每一類結(jié)果并不是很多，卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容，如果這里用TAB切就很尷尬了，因為每一類的內(nèi)容都很少或者很多類里根本沒有內(nèi)容，這樣的用戶感受就不好了。
搜索結(jié)果的排序是一個比較復(fù)雜的工作，里面涉及了很多的算法邏輯，筆者對這塊也不是很清楚，但是一般的垂直內(nèi)容型APP并沒有這么復(fù)雜的算法在里面，就是按照搜索的關(guān)鍵字去一一匹配。
如下圖是說我在QQ閱讀輸入一個“男”字，然后就給我建議第一個字是“男”的所有可能的結(jié)果，當(dāng)?shù)谝粋€字匹配完后就匹配第二個字，這樣以此類推。他們的整體順序就是按照匹配關(guān)鍵字的先后進行排列的，其實在排序中還牽涉了很多的算法，比如說它可能會摻雜一些“熱度、人氣、人為意圖、語義”等因素的權(quán)重，這里不展開贅述了。
以上就是筆者對搜索功能的介紹和思考，希望能對大家有所幫助。
本文由 @不知名設(shè)計師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
藍藍設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.88yangsc.com
<object id="5jqgf"></object>