本文重點梳理以下七大問題：一、令人眼花繚亂的專業術語；二、交互和視覺如何分工；三、工作的流程；四、視覺類UI的自學；五、交互設計需要掌握的知識；六、今天設計什么；七、設計師的薪資
經常有人問我新手如何自學交互設計，我之前也錄過一個視頻給大家，沒想到放到網上后點擊率很高，看來對新人是的確有幫助的。所以今天再次針對這個問題做闡述，修正了第一版的一些內容，也更具有針對性。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本組件基于element-ui 的圖標庫（星星圖標）
第一步：
vue + webpack + element-ui 框架
第二步：
創建Rate.vue文件，實現雙向綁定分數
第三部：
使用組件
在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> <!--顯示用戶自定義內容-->
</div>
</template>
props: {
size: { //父組件傳值設置字體大小
type: String,
default: '16px'
},
value: { //綁定value，與$emit實現雙向綁定
type:Number,
default:0
}
},
data() {
return {
star: this.value, // 初始化
style: {
fontSize: this.size //通過prop傳值設置星星字體大小
}
}
},
methods: {
changeRate(s) {
this.star = s //更新當前星星數量
this.$emit('input', s); //將當前星星數量s與v-model綁定
}
}
demo演示
隨著時間的發展，現在基本上人手一部手機的低頭族。做為前端開發的程序猿，在開發移動端web應用的時候，對面一堆各色尺寸不一樣的屏幕，就有點淡淡的憂傷。
以上是2018年二月份的友盟數據，可在這里查看詳情
很明顯我們所要實現的就是在上述如此之多的屏幕,都能實現UI大大出的視覺圖上的效果。而要實現這樣的效果主要有兩個難點
各屏幕適配各屏幕的適配，有兩種方案，flexible + rem 與 vw。這三個單詞是什么意思，看著很眼熟，但是這兩個方案居然是什么呢,請允許我細細道來。
flexible + rem顯而易見,該方案是由rem 以及 flexible組成的。rem （font size of the root element）相對于根元素(即html元素)font-size計算值的倍數,flexible 即 flexible.js, 手淘團隊提供的一個為該方案屏幕適配而寫的一個庫,主要實現的功能就是，根據屏幕的寬度給 html 元素設置一個合適的 font-size 值。
怎么樣看的不是很懂是吧。讓我來用一個頁面場景再復述一遍。
正常情況下，我們的UI大大會以iphone6的尺寸為標準，做一套視覺效果圖，并在上面進行標注，給到我們的標注圖，如下所示
拿到這個圖 我們該如何下手呢
到這里為止是不是就結束了呢 ? 很遺憾的告訴你并不是。為什么 html 元素的 font-size 要設置為 37.5px呢？現在這個界面在iphone6上能完美顯示了，在iphone5s,iphone6p能完美顯示嗎？（iphone6, iphone6s, iphone7. iphone8屏幕沒有發生變化，本文直接用iphone6代替了。）上面的兩個問題 我們還有沒解決，這個時候就輪到flexible登場了。只需要像如下引入就可實現用js來自動根據屏幕寬度設置 html元素的font-size的值。
<script src=";引申一下在上述過程中，你會發現，UI給到我們的一般是px標注的圖，我們將其轉化為rem，這個過程其實會花費很大的計算時間。做為一個合格的程序員，我們應該把這種機械性無腦的操作交給計算機來實現。我使用的是PostCss的插件 postcss-px2rem,這個插件能讓我們在寫代碼時候直接寫px，在構建的時候自動將我們所寫的px轉換為rem，大大提升了我們的開發效率。
vw這個vw的方案，相當而言還比較新。vw 即（viewport width）可視窗口的寬度。之所以把這個方案放在后面來說，是因為viewport在去年（2017年）的時候存在不少的兼容性問題，各個瀏覽器的支持并不是很好。但是來到了2018年這個時間點，viewport單位意見得到了眾多瀏覽器的支持（80.45%）。
可以在這里查看。
接下來就讓我們來正式了解下這個方案吧。vw既然是一個尺寸單位，那它的寬度等于多少呢？等于1%整個屏幕的寬度。舉個例子，再次以iphone6手機為例，100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到這里為止是不是就結束了呢? 是的就是這么簡單。
引申一下跟之前一樣的痛點，我們仍然需要花費大量不必要的計算時間去把標注圖中的px轉換為vw，有沒有類似于postcss-px2rem的工具呢？很榮幸能再次站在巨人的肩膀上，已經有大神寫了了類似的PostCss插件 postcss-px-to-viewport
1px問題移動端的屏幕不僅僅分辨率有差異，其實還有Retina屏的問題。正常情況下，我們代碼里的1px在屏幕上就應該顯示一個像素點，但是在Retina屏下則不僅僅是一個像素點。再次拿iphone6為例，其dpr(device pixel ratio)設備像素比為2，css中一個1x1的點，其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px，在iPhone6 Plus下甚至會顯示成3px。
這樣的話，我們就會發現在有些手機上1px明顯跟另外的一些手機的1px粗細不一樣。其實大多數的小公司不會扣這樣的一個細節，比如說我們公司不會。(^__^) 嘻嘻……
但是作為一個有追求的前端工程師，我們應該盡量的把事情做的完美一點，（ps.像大公司看齊，在大公司這個細節問題其實是不容忽視的，為了自己以后的發展前途，我們有必要把這個細節完善掉的。）
這個問題的解決方案有很多，個人覺得最簡單方面的還是大漠大大的一種解決方案。使用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）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
設備
iPhone5
iPhone6
iPhone6p
我們直接用拿到iphone6的標注圖，直接寫rpx就好。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
想一個問題吧，如果有人給你發了一條微信，你沒有回復 ta，原因是什么？
原因會有很多種，但是幾乎每一種原因都可以對應到更深的層次。比如給你發消息的人對你而言不重要，是因為缺乏了回復的動機；沒時間回復是因為缺乏了回復的能力；關閉了提醒是缺乏了回復的觸發因素……
動機，能力，觸發三大要素，是讓用戶產生行為必不可少的三大條件，在行為模型里也十分重要。
最早在 Norman 的《設計心理學》了解到關于行動的幾個步驟，他將行動拆分為目標，執行，評估三大階段，每一階段又分為幾個步驟，簡單畫了邏輯圖 ：
但是很多時候會發現，用戶不一定會按我們所設想的方式去使用我們的產品，特別是注冊，購買等能提升轉化率的行為……我在查詢了一些關于心理學方面的內容后，發現了用戶不進行這些行為，其實都是有可以解釋的依據的，并且我們還可以利用這些依據來改善我們的產品。
從前面微信的例子，我們可以得知，要想讓用戶產生行為（Behavior），必須具備三個要素：充分的動機（Motive），完成這一行為的能力（Ability），促使人們付諸行動的觸發（Trigger），這三者缺一不可。
于是我們可以得出一個行為模型：B=MAT，我們可以從數學的角度類比出人們產生行為的「臨界點」，可以稱為「行動邊界線」（當然這是我自己瞎取的名字，方便理解），只有用戶跨越了「行動邊界線」，才能實施或者產生某種行為。
所謂觸發，就是促使用戶做出某種舉動的誘因，引發用戶去使用你的產品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶，這個可以稱為「付費型觸發」；
還有一些公關、媒體新聞的正面報道 ，app store 里面排行榜，AppSo 推薦好用應用等不需要付費，但是能夠吸引用戶使用你的產品，這個可以稱為「回饋型觸發」；
還有熟人之間的相互推薦，親朋好友的口碑相傳，這種方式十分常見，也是能夠讓產品大規模獲取用戶的一種方式，我們可以稱為「人際型觸發」。
但是這種方式經常會被惡意利用，比如我們經?？吹降模悍窒鞽X到幾個群即可領取XXX優惠，最后卻發現是騙人的方式，利用這種方式也許可以獲取大批用戶，但是一旦用戶發現被欺騙后就會立即停止使用你的產品，你也會失去用戶的信任。
還有一種是以驅動用戶重復某種行為的方式，用戶主動與產品保持聯系，比如用戶注冊了某個平臺的賬戶，訂閱了它們的內容更新，開啟了消息推送，那么每一次更新推送就很有可能觸發用戶使用你的產品，這種方式可以稱為「自主型觸發」。
以上四種觸發方式，都是來源于外部環境，那么我們可以將其稱為「外部觸發」。
昨晚在 PM CIRCLE 里面看到大家在談論關于痛點、癢點、爽點的問題，也出了系列文章，后來在知乎上也搜了相關大佬的回復。
小小的總結一下：
為什么我會提到「痛點」、「癢點」、「爽點」？是因為我覺得這三者是從內部來觸發用戶采取下一步行動。
Nir Eyal 將情緒觸發分為兩種，一種為負面情緒，一種為正面情緒，兩種情緒皆可觸發用戶采取行動，但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內部觸發的話會更好，這三點通過深入挖掘用戶內在的情感體驗，設計出滿足用戶需求的產品，利用這三點也可以觸發用戶使用你的產品。
可以思考一下，人們為什么要發朋友圈，發微博？為什么要拍照？為什么要刷抖音？為什么朋友圈更新出現小紅點后我就要去點擊看？用戶借助這些產品實現了怎樣的目的？消除了什么樣的煩惱？使用完這些產品后用戶感受如何？等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly，Denis J 有一個觀點就是：當你使用某個產品時所需花費的步驟能被縮減或者是優化時，用戶使用它的頻率就會增加。他在《Something Really New》一書中，歸納了產品創新的三個步驟，簡單畫了下步驟圖：
結合今天的科技變化，我們可以知道，將行為簡單化可以推動產品創新，也只有將行為簡單化，用戶才會具備完成這一行為的能力。
福格總結了簡潔性包含的6個元素，也就是影響任務難易程度的6個要素，簡單總結下：
福格建議，為了增加用戶實施某個行為的可能性，設計人員在設計產品時，應該關注用戶最缺乏什么。
也就是說，要弄清楚是什么原因 阻礙了用戶完成這一活動：是時間不夠嗎？還是缺乏資金？還是完成這一活動太耗體力了？或者是用戶不想動腦筋？或者是這個產品與他們所處的社會環境格格不入？甚至是它太逾越常規，以至讓人難以接受？
我記得我第一份實習，做的一款新聞app，那個時候還不懂交互也不懂產品，我記得在首頁查看新的新聞內容的時候 ，因為數據加載量的原因，每次只能加載一定數量的新聞，所以當時設計的是一個「查看更多」的列表條，用戶每次需要加載更多新聞內容的時候，都需要點擊一次「查看更多」加載大約6條新的新聞，其實現在想想，為什么我們不設計一個自動加載呢？每次用戶上拉的時候，自動加載一部分，這樣能夠讓操作更加便捷，節約時間。
觸發是提醒用戶采取行動，而動機決定用戶是否愿意采取行動，也就是用戶行動時擁有的熱情。在心理學里面，福格博士歸納了驅使用戶采取行動的三大類核心動機：
能夠成為某些人行為動機的東西，未必適用于另外一些人，所以，我們需要知道自己的目標用戶到底需要什么。
舉個例子：比如抖音的一些視頻封面，是一些漂亮的女生封面，而對于大都數男生來說，為了追求快樂，就有了點擊進去看的動機，而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰略導向下的設計價值拓展》線下分享會的時候，其中也講到了關于用戶的7大基本心理特征——七宗罪：憤怒，淫欲，貪婪，懶惰，嫉妒，暴食，驕傲。
我覺得這也是能夠讓用戶產生動機的七大因素 ，比如經常被廣告商拿來利用的俗稱「性賣點」的廣告設計元素 ，利用人性的窺探欲，吸引用戶付諸行動……
當我們知道了用戶采取行動的幾類核心動機后，我們可以通過一些心理學的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關于啟發法等認知偏差對人類行為的影響，比如稀缺效應，首因效應，環境效應，投射效應，近因效應，錨定效應，贈券效應，目標漸進效應等 。
比如很多電商平臺商家會故意將商品庫存降低，當產品數量由多變少的時候，它在用戶心中的價值就會提高，那么用戶購買的動機就會增強，這就是利用了稀缺效應 ；
再比如目標漸進效應，大意是講當用戶認為自己距離目標越來越近時，完成任務的動機會更加強烈。
目標漸進效應讓我突然想到長沙的網紅奶茶——茶顏悅色的集點卡，大概就是積滿6點可以送一杯奶茶，我在第一次買第一杯的時候，他們給了我一張集點卡，上面已集了1個點，意思就是說我再集5個點就可以兌換一杯奶茶了，但是如果換一種方式，它把規則改成集5點可以兌換一杯奶茶，但是我買第一杯的時候，他們給我的卡上是空白的，沒有點，那么你們覺得這兩種方式，哪種方式更能讓用戶產生集點的動機呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
想一個問題吧，如果有人給你發了一條微信，你沒有回復 ta，原因是什么？
原因會有很多種，但是幾乎每一種原因都可以對應到更深的層次。比如給你發消息的人對你而言不重要，是因為缺乏了回復的動機；沒時間回復是因為缺乏了回復的能力；關閉了提醒是缺乏了回復的觸發因素……
動機，能力，觸發三大要素，是讓用戶產生行為必不可少的三大條件，在行為模型里也十分重要。
最早在 Norman 的《設計心理學》了解到關于行動的幾個步驟，他將行動拆分為目標，執行，評估三大階段，每一階段又分為幾個步驟，簡單畫了邏輯圖 ：
但是很多時候會發現，用戶不一定會按我們所設想的方式去使用我們的產品，特別是注冊，購買等能提升轉化率的行為……我在查詢了一些關于心理學方面的內容后，發現了用戶不進行這些行為，其實都是有可以解釋的依據的，并且我們還可以利用這些依據來改善我們的產品。
從前面微信的例子，我們可以得知，要想讓用戶產生行為（Behavior），必須具備三個要素：充分的動機（Motive），完成這一行為的能力（Ability），促使人們付諸行動的觸發（Trigger），這三者缺一不可。
于是我們可以得出一個行為模型：B=MAT，我們可以從數學的角度類比出人們產生行為的「臨界點」，可以稱為「行動邊界線」（當然這是我自己瞎取的名字，方便理解），只有用戶跨越了「行動邊界線」，才能實施或者產生某種行為。
所謂觸發，就是促使用戶做出某種舉動的誘因，引發用戶去使用你的產品。
比如通過在其他平臺廣告推廣等付費方式吸引新用戶，這個可以稱為「付費型觸發」；
還有一些公關、媒體新聞的正面報道 ，app store 里面排行榜，AppSo 推薦好用應用等不需要付費，但是能夠吸引用戶使用你的產品，這個可以稱為「回饋型觸發」；
還有熟人之間的相互推薦，親朋好友的口碑相傳，這種方式十分常見，也是能夠讓產品大規模獲取用戶的一種方式，我們可以稱為「人際型觸發」。
但是這種方式經常會被惡意利用，比如我們經?？吹降模悍窒鞽X到幾個群即可領取XXX優惠，最后卻發現是騙人的方式，利用這種方式也許可以獲取大批用戶，但是一旦用戶發現被欺騙后就會立即停止使用你的產品，你也會失去用戶的信任。
還有一種是以驅動用戶重復某種行為的方式，用戶主動與產品保持聯系，比如用戶注冊了某個平臺的賬戶，訂閱了它們的內容更新，開啟了消息推送，那么每一次更新推送就很有可能觸發用戶使用你的產品，這種方式可以稱為「自主型觸發」。
以上四種觸發方式，都是來源于外部環境，那么我們可以將其稱為「外部觸發」。
昨晚在 PM CIRCLE 里面看到大家在談論關于痛點、癢點、爽點的問題，也出了系列文章，后來在知乎上也搜了相關大佬的回復。
小小的總結一下：
為什么我會提到「痛點」、「癢點」、「爽點」？是因為我覺得這三者是從內部來觸發用戶采取下一步行動。
Nir Eyal 將情緒觸發分為兩種，一種為負面情緒，一種為正面情緒，兩種情緒皆可觸發用戶采取行動，但是我覺得如果利用「痛點」、「癢點」、「爽點」來分析內部觸發的話會更好，這三點通過深入挖掘用戶內在的情感體驗，設計出滿足用戶需求的產品，利用這三點也可以觸發用戶使用你的產品。
可以思考一下，人們為什么要發朋友圈，發微博？為什么要拍照？為什么要刷抖音？為什么朋友圈更新出現小紅點后我就要去點擊看？用戶借助這些產品實現了怎樣的目的？消除了什么樣的煩惱？使用完這些產品后用戶感受如何？等等問題。
可以把能力解釋為完成該行為的難易程度
Hauptly，Denis J 有一個觀點就是：當你使用某個產品時所需花費的步驟能被縮減或者是優化時，用戶使用它的頻率就會增加。他在《Something Really New》一書中，歸納了產品創新的三個步驟，簡單畫了下步驟圖：
結合今天的科技變化，我們可以知道，將行為簡單化可以推動產品創新，也只有將行為簡單化，用戶才會具備完成這一行為的能力。
福格總結了簡潔性包含的6個元素，也就是影響任務難易程度的6個要素，簡單總結下：
福格建議，為了增加用戶實施某個行為的可能性，設計人員在設計產品時，應該關注用戶最缺乏什么。
也就是說，要弄清楚是什么原因 阻礙了用戶完成這一活動：是時間不夠嗎？還是缺乏資金？還是完成這一活動太耗體力了？或者是用戶不想動腦筋？或者是這個產品與他們所處的社會環境格格不入？甚至是它太逾越常規，以至讓人難以接受？
我記得我第一份實習，做的一款新聞app，那個時候還不懂交互也不懂產品，我記得在首頁查看新的新聞內容的時候 ，因為數據加載量的原因，每次只能加載一定數量的新聞，所以當時設計的是一個「查看更多」的列表條，用戶每次需要加載更多新聞內容的時候，都需要點擊一次「查看更多」加載大約6條新的新聞，其實現在想想，為什么我們不設計一個自動加載呢？每次用戶上拉的時候，自動加載一部分，這樣能夠讓操作更加便捷，節約時間。
觸發是提醒用戶采取行動，而動機決定用戶是否愿意采取行動，也就是用戶行動時擁有的熱情。在心理學里面，福格博士歸納了驅使用戶采取行動的三大類核心動機：
能夠成為某些人行為動機的東西，未必適用于另外一些人，所以，我們需要知道自己的目標用戶到底需要什么。
舉個例子：比如抖音的一些視頻封面，是一些漂亮的女生封面，而對于大都數男生來說，為了追求快樂，就有了點擊進去看的動機，而這種動機對于另外一些女性用戶就不一定適用。
前幾天在聽 UCDCHINA 上海 大眾點評 DPUX 專場《戰略導向下的設計價值拓展》線下分享會的時候，其中也講到了關于用戶的7大基本心理特征——七宗罪：憤怒，淫欲，貪婪，懶惰，嫉妒，暴食，驕傲。
我覺得這也是能夠讓用戶產生動機的七大因素 ，比如經常被廣告商拿來利用的俗稱「性賣點」的廣告設計元素 ，利用人性的窺探欲，吸引用戶付諸行動……
當我們知道了用戶采取行動的幾類核心動機后，我們可以通過一些心理學的方法來刺激用戶的這些動機。
我在 Nir Eyal 的書中了解到一些關于啟發法等認知偏差對人類行為的影響，比如稀缺效應，首因效應，環境效應，投射效應，近因效應，錨定效應，贈券效應，目標漸進效應等 。
比如很多電商平臺商家會故意將商品庫存降低，當產品數量由多變少的時候，它在用戶心中的價值就會提高，那么用戶購買的動機就會增強，這就是利用了稀缺效應 ；
再比如目標漸進效應，大意是講當用戶認為自己距離目標越來越近時，完成任務的動機會更加強烈。
目標漸進效應讓我突然想到長沙的網紅奶茶——茶顏悅色的集點卡，大概就是積滿6點可以送一杯奶茶，我在第一次買第一杯的時候，他們給了我一張集點卡，上面已集了1個點，意思就是說我再集5個點就可以兌換一杯奶茶了，但是如果換一種方式，它把規則改成集5點可以兌換一杯奶茶，但是我買第一杯的時候，他們給我的卡上是空白的，沒有點，那么你們覺得這兩種方式，哪種方式更能讓用戶產生集點的動機呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
移動端搜索功能設計：3個階段解析搜索流程設計要點
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
這篇文章筆者想和大家聊一聊有關搜索功能的設計，搜索功能是每個內容型APP的核心，它的易用性決定了用戶是否能從APP里快速找到自己想找的內容，那么決定搜索體驗好壞的關鍵點又是什么呢？這里我總結了兩點，“操作的易用性”和“結果的準確性”?？此坪唵蔚膬牲c卻有很多的學問，筆者把搜索的交互流程劃分成三個關鍵階段，“搜索前、搜索中及搜索后”，接下來將從這三個階段逐一分析整個搜索流程中的相關設計。
在不同的APP或者不同的場景下搜索入口有著不同的表現形式，具體的表現形式取決于產品對搜索功能權重的定義，如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現出來的權重就要高些，反之則低些。下圖是常見的搜索功能的入口形式，他們的權重從左到右依次降低，筆者將對他們一一進行分析
如下圖APP Store的搜索形式，搜索放在標簽欄上作為一個獨立的功能模塊，它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面，這樣的搜索入口通常用在搜索場景非常多的內容型APP上，方便用戶在任何時候快速進入搜索頁面。
如下圖是京東app的搜索入口，它將搜索框外漏在nav bar上，這樣的形式有著兩個設計的關鍵點：
關鍵點一：搜索框外漏在頂部導航條上
搜索框直接外漏在導航條上是為了突顯該功能，這一功能往往是用戶在該頁面非常核心的操作任務，類似天貓京東這類電商型app，通常情況下用戶都是帶著明確目的來購買東西的，那么他們采取的最快最直接的方式就是搜索。
關鍵點二：在向上滾動界面時，搜索框一直懸停在頂部
這樣做的場景是這樣的，在用戶滾動頁面尋找內容時，可能并不能找到自己想要的內容，搜索框一直懸停一是為了暗示用戶可以進行搜索，二是為了讓用戶在想搜索時快速觸發搜索
如下圖是微信在聊天頁面和通訊錄頁面的搜索入口，初始化狀態時聊天頁面的搜索框是不出現在用戶的可視范圍內的，當頁面下滑時搜索框才出現，而在通訊錄頁面里搜索框是默認出現在用戶的可視范圍內的。
分析：微信在最近聯系人和通訊錄上搜索框的默認狀態不同，這很好地詮釋了這兩種場景下的搜索功能的權重。最近聯系人頁面上的搜索入口顯得更加隱蔽，因為在這個頁面下用戶產生搜索的場景很少，把其隱藏簡化了界面的元素，提升了界面的美觀性。
如下圖是淘票票的搜索的入口，通過點擊右上角的搜索icon進入搜索頁面：
分析：在界面權重上，這樣的方式相對于以上三種方式來說顯得較弱一點，因為在這樣的場景下用戶使用搜索的概率并不是很高，如果把搜索外漏就會占據更多的屏幕空間，破壞界面的權重等級和美觀性。
總結：依據用戶的需求場景，搜索入口放在不同的位置，如果說在該頁面搜索是一個主要的功能，我們就應該去突顯它，提升它在界面上的權重，反之則減輕它的權重。
搜索中間頁本來應該是一個輕量化的頁面，用戶在這里輸入內容進行搜索即可。但隨著運營需求的擴張，這個頁面逐漸成為了一個運營重災區，多了很多推薦的內容。筆者將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設計。
搜索框內的提示信息通常是提示用戶當下可以搜索什么樣的內容，如下圖bilibi的搜索提示，告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索，這樣的提示信息對用戶也是一種良性的引導，給用戶提供了一個心理預期，同時也對用戶隨意輸入關鍵詞造成無結果的傷害體驗的可能進行了限制。例如一個房產APP，搜索框內提示輸入樓盤或小區名，如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源，這句提示語很好地降低了這樣的風險。
但隨著人們對APP使用的熟悉，用戶在這里的認知負擔基本消除，運營人員逐漸搶占了這塊地方，這句話變成了內容的推薦或者產品的Slogan，這些推薦的內容可以是運營人員手動維護的也可以是依據用戶的購買和行為習慣進行推薦的。如下圖右邊是淘寶的搜索提示，搜索框的文案變成了“紅人最愛潮牌名服”，這就是運營人員在為特定內容進行導流。
在內容型APP中搜索時通常會對內容進行分類搜索，這是為了幫助用戶更地找到相關內容，分類的操作可以發生在搜索前也可以發生在搜索后，如下圖是“淘寶、微信、網易云音樂”搜索分類的方式，筆者將分別對他們進行分析。
淘寶是將搜索分類前置，默認搜索寶貝，點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著，會導致用戶感知太弱。 這樣的方式通常用在用戶大多數情況下只搜索某一分類的內容，如淘寶這樣，用戶大部分的搜索場景都是在尋找寶貝。
微信默認搜索所有內容，將分類通過通過三個很顯著的入口放在搜索框下方，當點擊某一分類時跳轉到該分類的搜索界面，同時搜索框的文案以及搜索界面的內容發生相應變化，提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時，它的缺點在于，從界面表現形式來看，這三個分類更像是三個功能的入口，他們與搜索框聯系得不是很緊密，很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經測試3個從未使用過該功能的用戶，他們都認為點擊朋友圈后就是進入朋友圈，點擊文章后就是顯示所有文章。
網易云音樂是將搜索分類進行后置了，在下文關于搜索結果的展示我會分析它的優劣勢。
搜索歷史記住用戶的足跡，方便用戶快速向以前搜索過的內容進行轉換。設計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區分開來，在位置上，盡量讓搜索歷史靠近搜索框（如下圖），因為從認知心理學上來講，越靠近搜索框的內容越能表示它是搜索歷史。在表現形式上，搜索歷史和搜索推薦盡量采用不同的表現形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史
這里的搜索推薦通常有三種來源：
它存在的目的主要有兩個：
建議：
受移動端操控方式的限制，在輸入內容時存在兩個明顯的痛點：“修改內容”和“輸入速度”。
關于修改內容：當用戶想更改語句中一部分文字時，將光標移動到想要更改的地方是一件很難的事，點擊操作真的很令人發狂，通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互，當用戶按住鍵盤左右滑動時就能移動光標（如下圖）。
關于輸入速度：很早之前偶然間發現了UC瀏覽器在輸入文字時的一個交互功能，如下圖所示，當輸入文字后，用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續輸入文字。這樣的需求場景在很常見，比如我想搜索“交互設計師的前景”，當我輸入交互二字后就會有“交互設計”的搜索建議，點擊搜索建議后面的箭頭將這個詞直接加入搜索框，然后就出現了“交互設計師的前景”的搜索建議，點擊搜索建議后進入搜索結果的頁面，這個過程中我少打了很多字，對我的搜索速度有很大的提升。
當用戶輸入內容后，搜索框下面出現了眾多的搜索建議，這些搜索建議是為了幫助用戶快速向目標進行轉化，如下圖是京東的搜索建議，當我輸入畫框后，一系列畫框的搜索建議就出來了，它還有一個亮點就是在此提供了細化篩選條件，畫框后面緊跟了“長方形、實木、正方形”等關鍵的篩選條件，為用戶省去了到結果頁進行篩選的步驟。
搜索結果是搜索過程中最關鍵的點，結果的準確性確定了用戶體驗的好壞，筆者將從“搜索結果的形式、搜索結果的操作、搜索結果的分類、搜索結果的排序”等方面來對搜索結果進行分析。
搜索結果一般分為兩種，一種是所見即所得，用戶輸入內容后出現在搜索框下面的搜索建議就是搜索結果，這種搜索通常出現在一些輕量化的APP中，因為搜索建議對應的就是唯一的搜索結果，如下圖微信的搜索一樣。
第二種形式就是一個關鍵詞對應了多個搜索建議，每個搜索建議又對應了多個搜索結果，當用戶點擊搜索后進入了一個專門的搜索結果頁，如下圖京東的搜索一樣。
依據用戶的需求目的，在搜索結果的列表上我們可以外漏用戶大部分情況下會采取的操作，比如說視頻類網站，用戶搜索到某一內容后，最常采取的操作就是播放，我們就可以把播放按鈕外漏，縮短用戶的操作路徑（如下圖愛奇藝的搜索結果頁）
通常的分類方式是TAB切和卡片，以下是微信和網易云音樂的分類。
這兩種方式有各自的應用場景，TAB切主要應用在搜索結果有固定的幾種分類，并且通常的情況下搜索結果都有很多的內容，如上圖的網易云音樂，每一個分類都有很多的搜索結果，如果它采用卡片式的瀑布流布局，用戶需要不停往下翻才能看到第二種分類的內容?？ㄆ街饕\用在搜索結果的內容不多，如微信這樣的情況，每一類結果并不是很多，卡片式的瀑布流布局能讓用戶快速定位到自己想要的內容，如果這里用TAB切就很尷尬了，因為每一類的內容都很少或者很多類里根本沒有內容，這樣的用戶感受就不好了。
搜索結果的排序是一個比較復雜的工作，里面涉及了很多的算法邏輯，筆者對這塊也不是很清楚，但是一般的垂直內容型APP并沒有這么復雜的算法在里面，就是按照搜索的關鍵字去一一匹配。
如下圖是說我在QQ閱讀輸入一個“男”字，然后就給我建議第一個字是“男”的所有可能的結果，當第一個字匹配完后就匹配第二個字，這樣以此類推。他們的整體順序就是按照匹配關鍵字的先后進行排列的，其實在排序中還牽涉了很多的算法，比如說它可能會摻雜一些“熱度、人氣、人為意圖、語義”等因素的權重，這里不展開贅述了。
以上就是筆者對搜索功能的介紹和思考，希望能對大家有所幫助。
本文由 @不知名設計師 原創發布于人人都是產品經理。未經許可，禁止轉載。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
幾個月之前，我曾經在一篇文章中說過 Magic 和 Operator 這樣的應用將會成為下一個重大突破。
它們的獨特之處在于，它們沒有采用傳統的 UI（用戶界面）作為交互方式。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
摘要: 什么是ATL(與COM的關系，及MFC與COM的關系)自從1993年Microsoft首次公布了COM技術以后，Windows平臺上的開發模式發生了巨大的變化，以COM為基礎的一系列軟件組件化技術將Windows編程帶入了組件化時代。廣大的開發人員在為COM帶來的軟件組件化趨勢歡欣鼓舞的同時，對于COM開發技術的難度和煩瑣的細節也感到極其的不便。COM編程一度被視為一種高不可攀的技術，令人望而卻步
什么是ATL (與COM的關系，及MFC與COM的關系)
自從1993年Microsoft首次公布了COM技術以后，Windows平臺上的開發模式發生了巨大的變化，以COM為基礎的一系列軟件組件化技術將Windows編程帶入了組件化時代。廣大的開發人員在為COM帶來的軟件組件化趨勢歡欣鼓舞的同時，對于COM開發技術的難度和煩瑣的細節也感到極其的不便。COM編程一度被視為一種高不可攀的技術，令人望而卻步。開發人員希望能夠有一種方便快捷的COM開發工具，提高開發效率，更好地利用這項技術。
針對這種情況，Microsoft公司在推出COMSDK以后，為簡化COM編程，提高開發效率，采取了許多方案，特別是在MFC（MicrosoftFoundationClass）中加入了對COM和OLE的支持。但是隨著Internet的發展，分布式的組件技術要求COM組件能夠在網絡上傳輸，而又盡量節約寶貴的網絡帶寬資源。采用MFC開發的COM組件由于種種限制不能很好地滿足這種需求，因此Microsoft在1995年又推出了一種全新的COM開發工具ATL。
ATL是ActiveX Template Library的縮寫，它是一套C++模板庫。使用ATL能夠快速地開發出、簡潔的代碼（Effectiveand Slimcode），同時對COM組件的開發提供最大限度的代碼自動生成以及可視化支持。為了方便使用，從MicrosoftVisual C++ 5.0版本開始，Microsoft把ATL集成到VisualC++開發環境中。1998年9月推出的Visual Studio 6.0 集成了ATL3.0版本。目前，ATL已經成為Microsoft標準開發工具中的一個重要成員，日益受到C++開發人員的重視。
ATL究竟給開發人員帶來了什么樣的益處呢？這還要先從ATL產生以前的COM開發方式說起。
在ATL產生以前，開發COM組件的方法主要有兩種：一是使用COMSDK直接開發COM組件，另一種方式是通過MFC提供的COM支持來實現。
直接使用COMSDK開發COM組件是最基本也是最靈活的方式。通過使用Microsoft提供的開發包，我們可以直接編寫COM程序。但是，這種開發方式的難度和工作量都很大，一方面，要求開發者對于COM的技術原理具有比較深入的了解（雖然對技術本身的深刻理解對使用任何一種工具都是非常有益的，但對于COM這樣一整套復雜的技術而言，在短時間內完全掌握是很難的），另一方面，直接使用COMSDK要求開發人員自己去實現COM應用的每一個細節，完成大量的重復性工作。這樣做的結果是，不僅降低了工作效率，同時也使開發人員不得不把許多精力投入到與應用需求本身無關的技術細節中。雖然這種開發方式對于某些特殊的應用很有必要，但這種編程方式并不符合組件化程序設計方法所倡導的可重用性，因此，直接采用COMSDK不是一種理想的開發方式。
使用MFC提供的COM支持開發COM應用可以說在使用COMSDK基礎上提高了自動化程度，縮短了開發時間。MFC采用面向對象的方式將COM的基本功能封裝在若干MFC的C++類中，開發者通過繼承這些類得到COM支持功能。為了使派生類方便地獲得COM對象的各種特性，MFC中有許多預定義宏，這些宏的功能主要是實現COM接口的定義和對象的注冊等通常在COM對象中要用到的功能。開發者可以使用這些宏來定制COM對象的特性。
另外，在MFC中還提供對Automation 和 ActiveXControl的支持，對于這兩個方面，VisualC++也提供了相應的AppWizard和ClassWizard支持，這種可視化的工具更加方便了COM應用的開發。
MFC對COM和OLE的支持確實比手工編寫COM程序有了很大的進步。但是MFC對COM的支持是不夠完善和徹底的，例如對COM接口定義的IDL語言，MFC并沒有任何支持，此外對于近些年來COM和ActiveX技術的新發展MFC也沒有提供靈活的支持。這是由MFC設計的基本出發點決定的。MFC被設計成對Windows平臺編程開發的面向對象的封裝，自然要涉及Windows編程的方方面面，COM作為Windows平臺編程開發的一個部分也得到MFC的支持，但是MFC對COM的支持是以其全局目標為出發點的，因此對COM的支持必然要服從其全局目標。從這個方面而言，MFC對COM的支持不能很好的滿足開發者的要求。
隨著Internet技術的發展，Microsoft將ActiveX技術作為其網絡戰略的一個重要組成部分大力推廣，然而使用MFC開發的ActiveXControl，代碼冗余量大（所謂的“肥代碼 FatCode”），而且必須要依賴于MFC的運行時刻庫才能正確地運行。雖然MFC的運行時刻庫只有部分功能與COM有關，但是由于MFC的繼承實現的本質，ActiveXControl必須背負運行時刻庫這個沉重的包袱。如果采用靜態連接MFC運行時刻庫的方式，這將使ActiveXControl代碼過于龐大，在網絡上傳輸時將占據寶貴的網絡帶寬資源；如果采用動態連接MFC運行時刻庫的方式，這將要求瀏覽器一方必須具備MFC的運行時刻庫支持?？傊甅FC對COM技術的支持在網絡應用的環境下也顯得很不靈活。
解決上述COM開發方法中的問題正是ATL的基本目標。
首先ATL的基本目標就是使COM應用開發盡可能地自動化，這個基本目標就決定了ATL只面向COM開發提供支持。目標的明確使ATL對COM技術的支持達到淋漓盡致的地步。對COM開發的任何一個環節和過程，ATL都提供支持，并將與COM開發相關的眾多工具集成到一個統一的編程環境中。對于COM/ActiveX的各種應用，ATL也都提供了完善的Wizard支持。所有這些都極大地方便了開發者的使用，使開發者能夠把注意力集中在與應用本身相關的邏輯上。
其次，ATL因其采用了特定的基本實現技術，擺脫了大量冗余代碼，使用ATL開發出來的COM應用的代碼簡練，即所謂的“SlimCode”。ATL在實現上盡可能采用優化技術，甚至在其內部提供了所有C/C++開發的程序所必須具有的C啟動代碼的替代部分。同時ATL產生的代碼在運行時不需要依賴于類似MFC程序所需要的龐大的代碼模塊，包含在最終模塊中的功能是用戶認為最基本和最必須的。這些措施使采用ATL開發的COM組件(包括ActiveXControl)可以在網絡環境下實現應用的分布式組件結構。
第三，ATL的各個版本對Microsoft的基于COM的各種新的組件技術如MTS、ASP等都有很好的支持，ATL對新技術的反應速度大大快于MFC。ATL已經成為Microsoft支持COM應用開發的主要開發工具，因此COM技術方面的新進展在很短的時間內都會在ATL中得到反映。這使開發者使用ATL進行COM編程可以得到直接使用COMSDK編程同樣的靈活性和強大的功能。
本文的目的就是希望在有限的篇幅中能夠使讀者對ATL的使用和基本原理有一個初步的了解，為廣大的COM開發人員更好地使用ATL開發起到拋磚引玉的作用。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
出處：https://www.cnblogs.com/pengdai
二、S單一職責SRP
1、定義
2、原則分析
3、優點
4、例子
三、O開放封閉原則OCP
1、定義
2、原則分析
3、例子
四、L里氏替換原則LSP
1、定義
2、原則分析
里氏代換原則是實現開閉原則的重要方式之一，由于使用基類對象的地方都可以使用子類對象，因此在程序中盡量使用基類類型來對對象進行定義，而在運行時再確定其子類類型，用子類對象來替換父類對象。
五、I接口隔離法則
1、定義
2、原則分析：
六、D依賴倒置原則DIP
1、定義
2、原則分析
3、例子1
[img]https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ ... rFZQ/640?wx_fmt=png[/img]
七、合成/聚合復用原則
1、定義
2、原則分析
八、迪米特法則
1、定義
2、法則分析
5、例子
九、Q&A1、面向對象設計其他原則？
2、你能解釋一下里氏替換原則嗎?
3、什么情況下會違反迪米特法則？為什么會有這個問題？
4、給我一個符合開閉原則的設計模式的例子？
5、什么時候使用享元模式（蠅量模式）？
藍藍設計的小編 http://www.syprn.cn
