如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
把項目放在wampserver的www目錄下，啟動wampserver，并且瀏覽器打開后手動修改url為localhost
index.js=》getData():
ajax.js以及index。js對它的調用:
ajax的參數：method、data、url都是字符串
index.js =》getData（）=》調用ajax
ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/getPics.php', addDom, 'cpage=' + num, true)
并且url是localhost下——localhost/web/ajax/waterfall2/src/js/getPics.php
不是直接圖片資源地址
圖片資源地址寫在php中，只管調用就行
data：
ajax調用是data是這樣的=》'cpage=' + num
測試用的data.txt：
一個數組里有很多對象，每個對象都是一張圖片的全部信息，每條信息都是json.stringify格式
所以測試用ajax的callback這樣寫：
function addDom(data) {
console.log(JSON.parse(data));
}
這個data不是自己定義的，是xhr.responseText，是接口的數據
這個data是callback的參數
回調函數的data參數和使用方法：
xhr.onreadystatechange = function() {
////////狀態改變
if(xhr.readyState == 4) {
if(xhr.status == 200) {
callback(xhr.responseText);
////////滿足兩個條件時,callback才獲取數據成功，才能用數據做些什么
}else {
console.log('error');
}
}
}
ajax（）中callback是參數，而callback的定義和對數據的操作通常在ajax（）調用之后
例如:
(1)
ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/data.txt', addDom, 'cpage=2', true);
function addDom(data) {
console.log(JSON.parse(data));
}
如此簡單明了
(2)
function getData() {
// if(!flag) {
// flag = true;
// ajax('GET', 'http://localhost/web/ajax/waterfall2/src/js/getPics.php', addDom, 'cpage=' + num, true)
// num++;
// }
// }
// getData();
// function addDom(data) {
……
}
回來…………
ajax中的data在本例中是字符串'cpage=' + num 或者 'cpage=2'這種
get中作用:
xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
post中作用:
xhr.send(data);
話說回來…………
都是獲取數據，data.txt和getPics.php區別:
一個只有第2頁的地址，一個是動態獲取很多頁數據
反正就那么傳吧
而ajax
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
前面介紹了Vue中組件的創建方式和data及methods屬性，本文我們來做一個Vue組件的切換案例，效果如下:
這個效果相信大家都能搞定，本文希望通過這個案例來加深下組件的使用，
Vue 組件切換案例
基礎頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
一、通過v-if控制實現
首先我們通過前面介紹的v-if標簽來實現下這種效果
1.創建組件
創建我們需要的兩個全局組件，并通過標簽使用。
<div id="app">
<login></login>
<register ></register>
</div>
<script>
// 創建登錄的組件
Vue.component("login",{
template: "<h3>這是一個登錄LOGIN組件</h3>"
})
// 創建注冊的組件
Vue.component("register",{
template: "<h3>這是一個注冊組件</h3>"
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
2.控制顯示
添加鏈接標簽，通過 v-if 和 v-else 標簽來控制顯示和隱藏，如下
效果
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登錄</a>
<a href="" @click.prevent="flag=false">注冊</a>
<!--注意： v-if v-else-if v-else 使用^_^ -->
<login v-if="flag"></login>
<register v-else></register>
</div>
<script>
// 創建登錄的組件
Vue.component("login",{
template: "<h3>這是一個登錄LOGIN組件</h3>"
})
// 創建注冊的組件
Vue.component("register",{
template: "<h3>這是一個注冊組件</h3>"
})
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {}
})
</script>
</body>
</html>
二、通過component標簽來實現
除了上面介紹的這種方式以外我們還可以通過Vue組件中給我們提供的一個component標簽來實現
Vue提供了 component 來展示對應名稱的組件，component 是一個占位符, :is 屬性,可以用來指定要展示的組件的名稱
效果
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">注冊</a>
<component :is="comName"></component>
</div>
<script>
// 創建登錄的組件
Vue.component("login",{
template: "<h3>這是一個登錄LOGIN組件</h3>"
})
// 創建注冊的組件
Vue.component("register",{
template: "<h3>這是一個注冊組件</h3>"
})
var vm = new Vue({
el: "#app",
data: {
comName: "login"
},
methods: {
}
})
</script>
</body>
</html>
35
36
37
38
39
組件切換-動畫
前面我們介紹了 動畫 的使用，那么剛好我們可以在切換的時候把動畫效果給加上。
添加動畫樣式:
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px) ;
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
組件包裹 標簽
效果
我們發現動畫切換的時候兩個是一塊執行的，這時我們可以在 transition 標簽添加一個 mode屬性 來設置動畫的模式
搞定~
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們常說：設計就是在向用戶傳遞信息，在設計的日常工作中，傳遞信息的方式大多都是圖文相結合的形式，而文字作為信息傳遞中最直觀的表現形式，對于整體而言是至關重要的一環。很多設計師一味強調追求圖具有吸引力，而忽略了文字的重要性，最終導致圖文無法結合、虎頭蛇尾。說到文案吸引力，最佳的表現位置就是標題字，所以本期就和大家一起分析、總結一些比較實用的標題文字的處理方式，提升對讀者的吸引力。在文字排版中，想要提升標題文字的吸引力，就要與其他非標題性文字形成視覺上的反差、對比，進而讓標題文字在整體排版中更加吸引用戶眼球。這里說的第一個比較實用的處理手法就是切割文字筆畫，即：以標題文字的筆畫為切入點，在不影響其辨識度的前提下，通過一些特殊的處理手法，提升視覺比重。
切割文字筆畫也可以理解為將文字的筆畫分離字體的本身，然后再以文字筆畫為切入點，進行處理，常用的筆畫處理方式：變色、模糊、刪除、陰影，下面我們逐一來看。
1. 分離筆畫 – 變色處理
顧名思義就是有意將分離的字體筆畫進行變色處理，提升標題文字本身字體上的變化強度，從而提升標題對于用戶的吸引力。舉例說明：
上圖中，這兩種標題形式在設計工作中都是可取的，只是對比而言，案例 1 給人的感覺更加平緩，屬于比較常見、中規中矩。而案例 2 則更加新穎，在視覺上變化更強烈（主要體現在文字筆畫與筆畫之間），更加吸引用戶眼球，也起到了提升作品設計感的作用。
2. 分離筆畫 – 模糊處理
同樣的理解方式，就是將分離的字體筆畫進行模糊化處理，目的是通過筆畫與筆畫之間的虛實對比，營造出視覺上的前后關系，從而提升標題文字在整體文案中的視覺注意力。
上圖案例中通過對比我們發現：案例 4 相較于案例 3 更吸引人，原因在于其筆畫之間的虛實結合使得字體本身就形成了一定的反差感，形式上的多變造就了文字更吸引人，同時如果感覺文字筆畫之間的變化強度不夠，可以結合變色+模糊的處理形式，比如：
這樣給人的感覺就更加強烈、也更誘人，但是這種筆畫之間的變化多了，也就意味著掌握的難度提升了，一定要避免過多的效果導致出現凌亂的現象。
3. 分離筆畫 – 陰影處理
可以理解為將文字筆畫分開來看，通過添加陰影的方式，營造視覺上筆畫的前后關系，從而增強其整體的視覺變化，舉例說明：
上圖中，案例 8 就是通過給文字筆畫添加陰影的形式，使得筆畫與筆畫之間在視覺上形成了很明顯的前后遮擋關系，將原本平面的文字變得更立體，也更易于吸引用戶眼球。這種處理手法在平時工作中也很實用，只需要理清楚筆畫的前后邏輯關系，通過畫筆涂抹的方式慢慢調整即可。
4. 分離筆畫 – 刪除處理
刪除筆畫的處理形式相對來說在工作中運用較少，因為一旦處理不恰當，很容易影響字體本身的辨識度，適得其反，舉例說明：
如上圖所示，刪除了一些筆畫，給用戶留下一些想象的空間，也是比較新穎的處理方式，比較適合一些平面海報標題的設計。
這種刪除字體筆畫的處理形式雖然很新穎，但是應用的局限性較大，屬于比較難把控的一種。
注意：將文字筆畫單獨拆分出來進行處理的手法，一定不要過于追求變化強烈，否則很容易導致標題文字非但沒有起到吸引用戶的作用，反而最基本的辨識度都會被破壞，一定要把握好度。
在日常工作中，通過給標題文字添加輔助元素，從而突出標題的處理手法是非常實用的，這里所說的輔助元素可以分為很多種，比如：圖形、肌理、光效等等，目的都是借助輔助元素與標題文字的相互結合，讓文案標題的視覺形象更鮮明、更吸引用戶。
添加圖形是屬于比較直觀且應用廣泛的一種處理方式，而這里的圖形一般情況下會和標題文字在屬性上有所反差，這樣有利于最終效果的呈現更加明顯，舉例說明：
如上圖所示，標題文字通過添加下劃線、邊框、形狀等等輔助圖形元素，較常規標題而言，其視覺變化更加強烈，整體豐富度提升了很多。但是這種輔助元素不能添加太多，否則很容易出現亂的現象，要讓這些添加的元素與標題形成相輔相成的關系。
上圖的設計案例，通過對比我們發現，右側案例視覺更豐富，且標題文字添加下劃線后，其在畫面整體的視覺形象更加鮮明、更吸引用戶眼球。
現實生活中一個物品如果置身于某一個環境內，它自身就會受到周圍環境的影響，而如果我們假定環境，將標題文字看做物品，那么我們就可以給予標題文字在環境中的光影，比如：投影、倒影、發光、環境色等等，這樣就間接地增強了標題文字的視覺變化，從而起到吸引用戶眼球的作用。
如上圖所示，把文字當做處于環境中的物體，通過投影、倒影、陰影的方式體現其環境，在視覺上有了更深的層次變化，也能起到強調、加深印象的作用。這種營造環境感的處理形式在平時工作中也很實用。
再說下發光的處理手法，這種形式大多用在暗色調的畫面中，將文字看做一個發光體，即受周圍環境的影響又影響著周圍環境，舉例說明：
上圖中雖然說左右兩種表現形式文字都比較清晰、明了，但是就視覺感受而言，右側將文字作為發光體與周圍環境相輔相成、融為一體的處理形式更容易吸引用戶眼球，而且更加新穎、有創意。這種表現形式在一些電商海報中也很常見，比如：
發光的效果給人的感受很舒服，打破了常規的單純平面編排文字的現象，將文字場景化，使其更誘人。
還有一些在平時工作比較實用的，只不過或多或少在之前文章中都有提過，這里以補充說明的形式展開。
1. 標題文字 – 關鍵詞變色
說到關鍵詞變色算是比較常用的一種，就是將原本標題文字中一些關鍵詞進行變色處理，目的是增加標題文字的視覺變化強度。
通過將案例中「免息」一詞變色處理，使得標題在視覺感受上更加明顯、有吸引力，而且給人的感覺也很舒服，這種處理手法是非常實用的，不妨多試試。
2. 標題文字 – 描邊
描邊文字在平時工作中用到的相對少一些，這種處理手法也間接地起到了打破常規的作用，當我們一直按照某一些常規形式工作時，偶爾做一些改變也許會得到意想不到的效果。
3. 標題文字 – 與主體遮擋
文字與主體營造遮擋關系也是在日常工作中很實用的一種，就是將主體與文字相互穿插排放，通過必要位置的陰影進行加深體現。雖然元素并不多，但是最終呈現的視覺效果卻很舒服、有吸引力。
這種主體與標題穿插表現的形式使得兩者更加整體，對于畫面而言，主體和標題都起到了很好的強調作用。
文章中提到了一些比較實用的提升標題文字吸引力的處理手法，但是需要注意不能過于追求效果而忽略了設計的本質，要根據需求選擇恰當的方式，不管何種形式，都要保證文字本身的識別性。文章中提到的并非全部，主要還是為大家提供一個可以參考的方向，要學會舉一反三、大膽嘗試。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
彈窗在設計中運用的非常廣泛，基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊，所以就想總結分享一下。設計師都會使用彈窗，但對于彈窗背后的分類及運用可能還不是特別了解，在寫這篇文章之前，我查看了很多應用及資料，所以下面會有大量的案例，相信大家看完可以對彈窗的認識更明確，做設計規范的時候也能有自己的想法。
現在的彈窗分為兩種，一種是模態彈窗（重提示），一種是非模態彈窗（輕提示）。
常見的模態彈窗：Dialog/Alert、Actionbar、Popover/Popup
常見的非模態彈窗：Toast/Hud、Tips、Snackbar
一、模態彈窗
Dialog/Alert 對話框
對話框是我們常用的彈窗，安卓開發語言是Dialog，iOS開發語言Alert，它通常出現在頁面的中間，對話框/警示框的類別非常多，對用戶的干擾比較大。前面之所以說模態彈窗是一種重提示，是因為它需要用戶主動觸發選擇才可以繼續當前的操作。
① 信息-選擇確定
特點：這類彈窗通常是一些系統功能的授權、版本更新、消息通知、重要提示等，通常只有1～3個主按鈕，只需要用戶進行簡單的選擇。
下圖舉例分析：
iOS詢問是否刪除APP，就屬于重要提示彈窗，它一般會用在像刪除、確認提交...一些比較重要的功能操作中。
小紅書的這個是否允許使用網絡彈窗，大家一定在許多APP中都見過，這屬于一個系統自帶的授權彈窗。
馬蜂窩與天貓的消息提醒彈窗，一個屬于初次使用APP時，系統自帶的彈窗，一個屬于使用后期APP為了推送消息，主動提示你開啟消息通知。
有錢花和愛奇藝的版本升級彈窗，都屬于偏運營類的彈窗，這一類的彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。
② 信息-輸入勾選
特點：這類彈窗通常是輸入一些比較少的信息或者勾選信息，常用于備注輸入、規格選擇、分組選擇等，通常只有確定和取消兩個按鈕。
下圖舉例分析：
微博對于已關注人的分組及備注，都屬于信息輸入及勾選類彈窗，操作通常都比較簡單。
③ 信息-傳達展示
特點：這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗，主要是吸引用戶點擊及參加活動，這類運營彈窗通常會設計的比較吸引人，造型各異，會突出領取、查看等大按鈕，弱化關閉按鈕。
下圖舉例分析：
拼多多和餓了么這類的紅包優惠彈窗，就不多說了，大家都懂，它們最主要的目的就是吸引用戶點擊，提升購買率。
美團的變黃送好禮彈窗，屬于一次比較大的品牌升級，它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設計都非常清晰，視覺感很強。
支付寶的這個猜世界杯贏螞蟻積分的彈窗，屬于活動彈窗，它的整體設計非常貼合主題。
Actionbar操作欄
Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出，它的操作及信息會比對話框類型的彈窗更多更復雜。這種當前頁面的下拉彈窗好處就是，可以讓用戶清楚的感知當前的操作，比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。
① Action Views操作視圖
特點：這類視圖彈窗通常占屏比較多，以文字、圖標等形式展示各種功能，也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出，不太強調歸屬，大多出現在購買、支付、分享等場景。
下圖舉例分析：
百度云盤的這個+號擴展彈窗比較特殊，它也可以說是浮層，占滿整個屏幕，它最吸引人的還是它的小動效。
京東購買時的彈窗和支付寶付款時的彈窗，都是比較典型的，在各種電商產品及付款頁面用的非常多。
轉轉這個的鍵盤與輸入為一體的彈窗，設計的非常人性化，讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。
網易云音樂的分享彈窗就是典型的以文字與圖標來展示功能的。
微信讀書的底部閱讀設置彈窗，比較特殊，為了使用戶沉浸閱讀，它是比較隱藏的，而且非常輕量化。
② Action Sheets 操作列表
特點：操作列表相對于操作視圖，它更單一。主要是以文字展示功能按鈕，重要敏感的功能操作一般會用主題顏色或紅色顯示，主要運用在一些日?？丶?、功能選擇、刪除、保存等場景。
下圖舉例分析：
Keep的選擇日期，屬于iOS原生控件，非常常見。
淘寶的選擇地址彈窗，整個展示的非常清晰全面，而且用戶每選擇一項，就會有相應的顯示。
支付寶和天貓超市的兩種列表彈窗，就不多說了，簡單的功能選擇都會采用這種。
③ 抽屜式彈窗
特點：這種抽屜式彈窗一般從左右兩邊彈出，經常運用在一些導航擴展和目錄展示中，它能承載比較多的信息，基本上都是用來放一些不太常用的功能。
下圖舉例分析：
微信讀書及一些其他閱讀類產品，由于目錄很長，而且一般是從上到下瀏覽的，所以基本都采用了這種抽屜式彈窗。
小紅書的這個抽屜式彈窗，以圖標和文字的形式展示了一些不是很常用的功能，為我的頁面節約了不少空間。
Popover/Popup 浮層
Popover是ios的開發語言，popup是安卓的開發語言，浮層是指，用戶點擊某個功能后浮出一個臨時氣泡對其作出補充，它通常會伴隨著半透明的遮罩或者投影襯底，用戶需要點擊功能區域操作，或者點擊空白處取消，才能進入下一步操作。它與上面操作欄的最大區別就在于，它更強調歸屬，可以出現在頁面的任何地方，而操作欄一般只出現在底部，不強調歸屬。
① 指向浮層
特點：這類的浮層一般伴隨有小三角指向，強調歸屬。氣泡里面的功能通常以單一的文字或文字與圖標結合的形式來展示，主要運用在頂部加號補充、復制、分享轉發等場景。
下圖舉例分析：
支付寶和美團的頂部加號補充浮層，展示形式是差不多的，只是UI樣式不一樣，一個是白色氣泡黑色半透明遮罩，一個是深灰色氣泡。
微信讀書和微信的選擇文字氣泡，在文字復制中很常見，通常會與其他轉發收藏小功能一起出現。
② 導航篩選浮層
特點：所謂導航篩選，自然是與導航分不開的，再加上浮層是比較強調歸屬的，所以它通常會與導航連在一起，一般出現在頂部。
下圖舉例分析：
美團的導航篩選，因為選項及開關很多，所以它的底部會有兩個主按鈕，一個完成，一個重置。
餓了么的這個只有一個功能選項，所以它一般是直接選擇就收起浮層了。
③ 引導浮層
特點：引導浮層的作用就是引導用戶更好的使用產品及交互，降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候，一般只會出現一次，點擊空白位置或我知道了浮層就會消失。
下圖舉例分析：
QQ音樂與微醫的引導浮層都是用戶首次進入應用時，給出的功能搬家提醒浮層。
二、非模態彈窗
Toast/Hud 提示框
Hud是ios的控件名詞，Toast是安卓的控件名詞，它們都屬于一種輕提示，給予用戶及時反饋，讓用戶知道自己當前所處的狀態。
Hud一般只出現在屏幕的中央，以毛玻璃的樣式表現，內容展示比較富豐富。
Toast可以出現在屏幕任意位置，通常以黑色半透明的小框來表現，內容一般是純文字提示或者文字與圖標結合提示。
① 狀態提示
特點：狀態提示的Toast，它們一般都是反饋用戶當前操作的狀態，只出現1到2秒就會自動消失，場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。
下圖舉例分析：
移動的屬于操作遇阻提示。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud。
微信的清除緩存屬于正在操作狀態。
② 按鍵提示
特點：按鍵Toast提示與狀態提示不同，它們一般自動出現或者點擊觸發才會出現，用于對功能點的補充說明，讓用戶對功能有更深的了解。
下圖舉例分析：
螞蟻森林里點擊樹木就會出現相關信息，當然它也會自動出現，點擊其他區域也會自動消失。
知乎的消息標簽不僅有小紅點提示，還會在上方自動出現數字提示。
Snackbar
Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉，它沒有Toast那么輕量，設置出現的時間會比Toast長，而且可以點擊按鈕進行交互。
下圖舉例分析：
UC瀏覽器的Snackbar，是在提示用戶上滑，來查看更多內容，它需要滑動或者超時才能關閉。
京東的Snackbar，是在為用戶推薦商品，提示用戶點擊箭頭來查看喜歡的商品，它比UC瀏覽器多了一個關閉的按鈕。
Tips提示
Tips與Snackbar最主要的區別就是：Tips它是內嵌在頁面上的，而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失，一般用于需要用戶感知到的通知信息，或者植入廣告。
下圖舉例分析：
百度云盤在下載視頻時，就會出現一個Tips的提示，讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告，但它抓住了用戶的場景及心理，觀看廣告的幾率大大提升。
愛奇藝的Tips提示就屬于重要通知提示了，提示用戶VIP即將到期，續費可優惠，它們都有一個主按鈕及關閉按鈕，需要用戶主動觸發提示才會消失。
規范總結
目前的彈窗樣式非常多，你能想到的，你想不到的基本都可以技術實現。但這同時也帶來一個問題，那就是“不規范”。以上提到的彈窗種類，你只需要選擇符合你產品要求的幾個類型，最好不要在一個產品中運用多個同種類型的彈窗，否則后期會很難規范及組件化，當然運營廣告類彈窗可以另當別論。
差不多就寫完了...大家覺得有幫助的話，記得點在看和轉發～
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在電子商務界，你的網站設計就是一張在線名片。它能幫助你從擁擠不堪的海量信息中脫穎而出，同時也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的，幾乎80%的人都會選擇離開你的網站。
這就是為什么在構建和設計網站時，永遠不要低估用戶滿意度帶來的影響。
接下來要講的是如何設計一個無可挑剔的、以用戶為中心的網站，來使你的網站轉化率飛速上漲。
如果不能引導用戶完成最終購買，那么設計再精美的網站都是毫無意義的。用戶沒有選擇在你這里購買的一個主要原因是復雜的網站導航。記住，用戶不希望無休止的點擊和滑動鼠標后才能找到他們想要的產品。如果他們發現自己正將時間浪費在不必要的操作上，就會棄你而去，到你的競爭對手那里。
這也是你想要阻止發生的事情。
人們常說不能以貌取人，但我們卻一直都在這么做。在電商的世界中，你的主頁就是顏值。
研究表明，只需0.05秒，一個用戶就能判斷出你的網站是否能夠滿足他們的需求。而且，如果你不能讓他們相信你的網站是可靠的、安全的或足夠有價值的，他們就會在眨眼之間拋棄你的網站。
那么，一個令人驚艷的主頁包含哪些要素呢?
主頁是用來吸引用戶并與他們建立關系的。但當你想把一位訪客變成付費用戶時，體現產品詳情頁重要價值的時刻就到了。它們需要為用戶深度展示你的產品，激發他們的興趣，并讓他們產生點擊“立即購買”按鈕的欲望。那么，讓我們來一起看看產品詳情頁中最重要的元素都有哪些吧。
如果有用戶不確定是否要從你這里購買產品，那他很可能會在深思熟慮前就離開你的網站。你需要向他們證明這是一個錯誤的選擇，而這正是“常見問題“的切入點。
創建一個頁面去回答用戶最常問的問題，會讓用戶感到高興，將他們的購買焦慮降到，也能夠更快引導他們完成購買。這就是為什么，你需要積極地構建FAQ頁面，提供可操作和有用的技巧，甚至通過截圖和圖片的形式來讓答案容易被更多人理解。
一個可靠的FAQ頁面還可以提升SEO（搜索引擎排名優化），特別是在語音搜索SEO和本地化SEO盛行的時代。數據顯示，22%的搜索者會使用語音搜索在網上查找本地企業。因此，綜合考慮電商SEO實踐與本地化SEO服務，對你的電商網站至關重要。
這就是FAQ頁發揮首要作用的地方。也就是說，在不損害用戶體驗的情況下，它使你有機會針對搜索時高頻出現，及具有地區特征的關鍵詞，來優化FAQ頁面的問題和答案。此外，這也有助于提升你的網站在語音搜索中的排名，因為谷歌經常使用FAQ頁面作為語音搜索結果。
你已經通過種種努力讓令人驚艷的主頁贏得了用戶的信任，用產品詳情頁頁的優質文案提升了他們對產品的興趣，現在是時候激發他們去完成最后的購買流程了。你千萬不能搞砸了這個關鍵環節，因為購買流程是購物流程閉環的最后一步。
對于電商而言，用戶體驗至關重要。她會為你積累忠實的老用戶，激勵新訪客轉換為付費用戶，并有助于他們向親朋好友傳播關于你的正面口碑。Jeff Bezos對此有很好的詮釋：
“如果你的確建立了很好的體驗，用戶就會口口相傳?？诒牧α渴菬o比強大的。”
我希望以上的這些秘訣將可以成為你的堅實基礎，助力你在在電商領域取得成功。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.競品分析的定義
從專業的角度來講，競品分析是通過系統的分析方法去全面了解市場上位于前列的競爭對手的產品，能夠讓設計師快速了解自家產品所處的位置，從而來針對性的改進自身產品的一個方法。簡而言之，就是要站在巨人的肩膀上去思考，以競品分析的形式去學習其他優秀的產品，從而解決自身產品所存在的問題。
2.為什么要去做競品分析
做一件事情之前一定要思考做這件事的價值和意義，只有你明白其重要和必要性，你才會知道該怎樣去做這件事情，而不是一提起競品分析就找一大堆專業框架和術語然后去填內容，這樣雖然產出了很多，但是關鍵性的內容點其實還是不清楚。
說直白點，你需要通過這篇競品分析去解決你工作或者創作中遇到的什么問題，帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況：
因此我們要學會根據自己的不同需求，去制定不同的競品分析方案，讓分析的內容更聚焦。作為UI設計師來講，通過競品分析為自己的設計方案提供科學的理論依據，為自己贏得話語權，能夠更好地科學產出內容。
3. 如何尋找競品：
競品的選擇非常重要，如果找到錯誤的競品，那么你所分析的一切結論可能都引向了一個錯誤的方向。從而讓自己的努力都白費。那么怎樣才能找到合適的競品呢？分為以下三類情況
A.核心服務與目標用戶相同的產品（直接競品）：
這一點是廣大設計師都能想到的范疇，也稱為直接競品。即提供的核心服務、市場目標方向、客戶群體等與我們的產品基本一致，產品功能和用戶需求相似度極高的產品 。往往是通過業務關鍵詞就能直接搜索到的競品，比如音樂類產品，那么直接在應用商店，或者通過專業網站（易觀千帆等）搜索關鍵詞“音樂”即可搜索出排行前列的競品。
B.目標人群不同，但功能模塊和服務接近的產品（間接競品）：
這類競品可以找起來并不那么直接，可以通過對應功能去逆推擁有此功能的產品，并進行相關搜索。
如果想不到，可以通過“人人都是產品經理” “36氪“等關于產品資訊的網站進行查詢，甚至可以通過百度指數來進行發散思維，看一下跟你關鍵功能相接近的都有哪些。比如你研究外賣產品，除去餓了么和美團等直接競品，你還可以在分析用戶下單和購買流程中，去分析淘寶和京東等購物產品，也能得到一定的幫助。
C.目標人群和服務都不同，但交互或者視覺有可以參考的產品（關聯競品）：
這里所選擇的產品，定位和領域可以都完全不同，但是你要從這款產品中得到啟發，從而讓你的產品能夠擁有其他競品不同的特點或者功能模塊。有一個很典型也熟知的的案例，就是衛龍辣條的設計案例，在衛龍推出之前，可以說是沒人會想到辣條會和高端扯上關系，但是衛龍就是借鑒與其領域完全不同的蘋果設計去做，從而在包裝上獨樹一幟，從而吸引人們注意取得成功。因此通過不同領域跨行業的產品有時候也可以找到不錯的思維方向。
4.如何進行商業分析：
進行商業分析，這里只提及到三個基本選項：商業背景、產品盈利模式以及用戶人群。通過這三個基本要素，你能對所研究的競品有一個大概的了解。當然深入了解還需要其他平臺（官網網站、36Kr等)來查閱更多的相關性資料，下列是對QQ音樂商業背景的簡要分析。
5. 如何進行交互分析：
我們在做交互分析時，我們需要進行必要的兩點分析：用戶路徑和交互維度。
用戶路徑：指用戶從某個開始行為事件直到結束事件的行為路徑，即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說，我們看看排行前列的競品是怎么做的。通過相應的體驗和對比分析，我們就可以找出這其中符合我們產品性質的最優解，從而提高我們的登錄注冊效率。
交互維度：交互維度和用戶路徑有所區別。這一層需要弄清楚產品的核心路徑，從而能夠更好的解析產品各個層面的邏輯關系，這就需要我們以用戶的角度去逐個體驗，整體聯系，隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細節，怎樣分享的，怎樣展示的，比如音樂軟件進行截屏后和點擊喜歡按鈕后的反饋是怎樣的。
6. 如何進行視覺設計：
在進行視覺分析時，有一點需要注意，如果你需要詳細分析某一模塊，請用手機尺寸截圖后拿到設計軟件中進行測量，不要光靠眼睛觀察，很多時候的小細節我們只有在手動測量后才能感受到，比如控件的尺寸大小，間距的大小，以及顏色的取值，都需要精準測量后才能得出靠譜的結論。
怎樣進行視覺分析呢，我比較推薦從一個app 視覺語言最基本的五個維度去分析，即“形色字構質”
最近以音樂APP進行了一次競品分析，以QQ音樂APP來舉例進行分析（當然競品分析并不能只分析一個，而應該根據你需要的功能找多個競品進行對比分析，才能看到更多的維度，這里只拿一個舉例）：
6.1 圖形元素的分析
首先我們以形進行分析，形即圖形元素，具體來講即LOGO和圖標。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標整理歸納如下：
可以看到整體的圖標色調更加清新，造型設計更加圓潤，未選中狀態的線形圖標則采用4px的描邊，粗線形描邊讓整體界面風格顯得更加穩重的同時對用戶的干擾也較小。新版的圖標界面讓界面保持穩重的同時又富有活力。
6.2 色彩體系的分析
其次則是對色這一類別進行分析，顏色其實是對于品牌調性有很大的影響，比如一想起QQ音樂就知道主色是綠，一想起網易云音樂就知道主色是紅，對用戶的記憶點更深刻。通過截屏測量進行分析，得出整體的顏色如下（由于手機屏幕的色差原因，不可避免會有些許誤差）
從局部來看，分析顏色最重要的一點就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色，觀察成熟的產品是怎樣用顏色（和字重）去區分層級關系的。
可以看到，用主色和三種輔色即可區分界面的整個層級關系，由此思考我們在制作自己的界面時也避免用太多的顏色，造成界面太過花哨。（顏色的具體色值可能有些許誤差，更重要的是看顏色層級關系）
6.3 字體體系的分析
接下來是字的分析，字即字體體系，可具體到字體和字號。設計中字體一般來講是蘋方，字號則根據設計師的定義來進行相應的規范。通過頁面的測量分析，可以拿到其具體的字號大小層級分析。（以下定義基于750的設計尺寸）
對于單個界面的分析，個人覺得要帶有思考的眼光去看待，比如在首頁中字號其實分配過多，像“更多”這種按鈕就不應該再分一個字號，字號太多整體就顯得有一點點亂了。雖然大廠的設計能在一定程度上給予我們參考，但并不是說他的每一個設計都是正確的，我們要學會用審視的眼光去看待出現在身邊的設計。
6.4 界面構成分析
界面構成即界面的元素大小以及他們的布局，例如有時候我們不知道一個標準的搜索框的長寬具體多少才是合適的，這就需要我們去分析其他成熟的商業產品，通過測量來知道具體的數值，從而督促自己進行正確的設計。這里選取了一個默認的首頁進行分析。
將一個頁面用右邊的形式進行原型化，去掉干擾可以把結構看得更清楚。間距之類的也可以通過軟件進行測量?？梢钥吹絈Q9.0版本的去線化設計，利用大間距來區分各個模塊，去掉了其他的干擾元素，整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統一的圓角化設計也讓整體設計符合流行趨勢，顯得更活潑。
6.5 質感與風格分析
關于界面的質感則是不同于扁平化的一個設計，即有的頁面在你看來細節會更豐富，層級會更深。界面質感通過漸變，疊加，透明度等不同方式來呈現，比如在QQ音樂中的會員界面卡片，則體現了微質感：
上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質感，讓整個界面顯得更精致。當然，疊加的圖案都是與內容相關的，不能為了疊加而疊加。包括下方的權益圖標，也采用了漸變的方式來讓整個圖標顯得更精致和有質感。我們再處理質感的時候也可以用這種方式來進行。
以上通過“形色字構質”來分析是屬于單個分析，相當于去拆解一個成熟產品中的每一個細節點，從而去學習和吸收。我們還要學會進行對比分析。把單獨某一個功能模塊拎出來，通過不同類型的對比從而歸納出這一類的設計方法和樣式，進而總結相應規律。
比如某一天你需要設計一個歌單列表，你此時就需要分析所有TOP排行的歌單列表，看看分別都有什么，從而總結歸納出結構來，再進行分類。
通過分析提煉，形成以下結論并進行相應的概念風格展示設計：
這樣，我們最后制作出來的方案才能涵蓋比較全的解決方案，從而能夠更好的助力設計產出。上圖的產出可能稍顯簡陋，但只是做一個簡單的示例，真正的產出應該更加有細節和落地，也要結合自己的工作需求做相應調整。
7.關注競品的版本迭代和用戶評價：
關注版本更迭，閱讀競品版本更新的詳細說明，你可以從中得出版解決了什么問題，提升了哪些體驗，添加了哪些功能，融合了什么流行的設計趨勢。產品迭代就是團隊通過用戶需求對某個產品不斷完善的一個過程。迭代對于一個產品來說是至關重要的，一個產品如果不想被對手超越，就必須不斷的對版本進行更新迭代。
除了關注具體的內容，你還可以觀察版本更新的提示信息，例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你，從而讓你更加情愿去更新，提升新版的使用率。
用戶評價則更不用說，產品的最終服務對象就是用戶，用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價，吸收好的建議，屏蔽無腦的意見，從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網站（https://appbot.co/）去查詢。
總結
以上的篇幅較長，看下來可能會有一些累，那么此篇文章提及到的點在這里回顧一次：
1.競品分析的定義-站在巨人的肩膀上去學習；
2.為什么做-基于自己的目的去進行對應的競品分析，分析的最終目的是解決自己在設計過程中遇到的問題；
3.競品分析分為三個層面：視覺分析、交互分析以及商業分析；
4.怎樣進行商業分析（商業背景、盈利模式、用戶人群）；
5.怎樣進行交互分析 （用戶路徑、核心路徑、交互細節）；
6.怎樣進行視覺分析 （從“形色字構質”五個維度去分析以及如何對比分析應用）；
7.競品的迭代和用戶評價的重要性。
自己有一個小習慣，看完每一篇文章，總會告訴自己一定要在腦海里回顧一遍，思考一下這一篇文章到底有什么觀點是自己之前沒有想到的，哪怕只有一點是沒觸及到的知識盲區，那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
藍藍設計的小編 http://www.skdbbs.com
