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