最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網(wǎng)上看了很多，都說APP能喚起微信，手機網(wǎng)頁實現(xiàn)不了。也找了很多都不能直接喚起微信。
總結(jié)出來一個可以直接喚起微信的。適應(yīng)手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉(zhuǎn)發(fā)的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發(fā)朋友圈分享</button>
-
<button data-mshare="2">點擊觸發(fā)發(fā)送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發(fā)微信分享到朋友圈或發(fā)送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統(tǒng)信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應(yīng)的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據(jù)不同版本 加載對應(yīng)的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調(diào)函數(shù)
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關(guān)于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數(shù)
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數(shù)
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預(yù)加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
事件冒泡概念：當元素觸發(fā)了事件的時候，會依次向上觸發(fā)所有元素的相同事件。
事件冒泡的行為演示
<!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>
<style>
#a{
background: pink;
width: 400px;
height: 400px;
}
#b{
background: green;
width: 300px;
height: 300px;
}
#c{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="a">
我是a
<div id="b">
我是b
<div id="c">我是c</div>
</div>
</div>
<script>
var a = document.querySelector('#a')
var b = document.querySelector('#b')
var c = document.querySelector('#c')
a.onclick = fn1;
b.onclick = fn2;
c.onclick = fn3;
function fn1(){
alert('a來了')
}
function fn2(){
alert('b來了')
}
function fn3(){
alert('c來了')
}
</script>
</body>
</html>
上面這段代碼一共有三個事件,三個div都分別綁定了單擊事件。在頁面中當單擊c會連續(xù)彈出3個提示框。這就是事件冒泡引起的現(xiàn)象。事件冒 泡的過程是：c --> b --> a 。c冒泡到b冒泡到a。
冒泡的阻止
方法：
1.event.stopPropagation(); 是事件對象Event的一個方法，作用是阻止目標元素事件冒泡到父級元素 2.event.cancelBubble = true; IE瀏覽器的方法
<!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>
<style>
#a{
background: pink;
width: 400px;
height: 400px;
}
#b{
background: green;
width: 300px;
height: 300px;
}
#c{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="a">
我是a
<div id="b">
我是b
<div id="c">我是c</div>
</div>
</div>
<script>
var a = document.querySelector('#a')
var b = document.querySelector('#b')
var c = document.querySelector('#c')
a.onclick = fn;
b.onclick = fn;
c.onclick = fn;
function fn(event){
var e = window.event || event;
// 事件冒泡的阻止
if(e.stopPropagation){
e.stopPropagation(); // 通用寫法
}else{
e.cancelBubble = true; // 阻止IE
}
var str = this.innerHTML;
alert(str)
}
</script>
</body>
</html>
我們在這里將要談的是有關(guān)文字的標記，包括字體大小、顏色、字型...等變化，適當?shù)膽?yīng)用可以增加頁面的美觀！
常用字體標記
<Hn>...</Hn> 標題 ，設(shè)定標題字體大小， n = 1 ( 大 ) ~ 6 ( 小 ) 會自動跳下一行。通常用在如章節(jié)、段落等標題上。
如 : <H2> 標題 </H2>
標題
如 : <H3 ALIGN = CENTER> 標題 </H3> ( 標題置中 )
標題
<B>...</B> 粗體字 。
如 : <B> 粗體字 </B>
粗體字
<I>...</I> 斜體字 。
如 : <I> 斜體字 </I>
斜體字
<U>...</U> 加底線 。
如 : <U> 加底線 </U>
加底線
<DEL>...</DEL> 橫線 ( 表示刪除 )。
如 : <DEL> 橫線 </DEL>
橫線
<TT>...</TT> 打字體 ( 固定寬度文字 )。
如 : <TT> 打字體 </TT>
打字體
<SUP>...</SUP> 上標字 。
如 : 字體 <SUP> 上標字 </SUP>
字體 上標字
<SUB>...</SUB> 下標字 。
如 : 字體 <SUB> 下標字 </SUB>
字體 下標字
<!...> 注解 ( 不會顯示在瀏覽器上 )，可以多行。
如 : <! 更新日期 : 2000/1/1>
設(shè)定字體大小、顏色、字型
有關(guān)設(shè)定文字的方法共有以下幾種 :
1.設(shè)定HTML文件主體文字顏色。<BODY>...</BODY>標記。
如 : <BODY TEXT=RED>...</BODY> 或
<BODY TEXT=#FF0000>...</BODY>
2.設(shè)定基本字體大小、顏色、字型。<BASEFONT>...</BASEFONT>標記。
3.設(shè)定字體大小、顏色、字型。<FONT>...</FONT>標記。
<BASEFONT>...</BASEFONT> 設(shè)定基本字體 ，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <BASEFONT SIZE=4> 基本字體大小為 4 </BASEFONT>
基本字體大小為 4
如 : <BASEFONT COLOR =#FF0000> 設(shè)定顏色 </BASEFONT>
設(shè)定顏色
如 : <BASEFONT FACE = 標楷體 , 細明體 > 設(shè)定字型 </BASEFONT>
設(shè)定字型
<BIG>...</BIG> 基本字體加大 。
如 : <BASEFONT SIZE=4> 基本字體大小為 4，</BASEFONT>
<BIG> 加大為 5 </BIG>
基本字體大小為 4， 加大為 5
<SMALL>...</SMALL> 基本字體減小 。
如 : <BASEFONT SIZE=4> 基本字體大小為 4，</BASEFONT>
<SMALL> 減小為 3 </SMALL>
基本字體大小為 4， 減小為 3
<FONT>...</FONT> 設(shè)定字體大小、顏色、字型 ，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <FONT SIZE=4> 字體大小為 4 </FONT>
字體大小為 4
如 : <BASEFONT SIZE=4> 基本字體大小為 4
<FONT SIZE= 1> 1字體大小為 5 </FONT>
<FONT SIZE=-2> -2字體大小為 2 </FONT>...</BASEFONT>
基本字體大小為 4
1字體大小為 5
-2字體大小為 2
如 : <FONT COLOR =#FF0000> 設(shè)定顏色 </FONT>
設(shè)定顏色
如 : <FONT FACE = 標楷體 , 細明體 > 設(shè)定字型 </FONT>
設(shè)定字型
新建一個前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。
日?！边^坑“記錄
只記錄方法不說原理。。。
步驟：
ECharts下載
引入echarts.js
注意：這里好像只能用echarts.js,其它的不行，英文后面配置的時候要改東西(ps:我也不太不清楚)
修改echarts.js
打開echarts.js，在文件大概開始處添加如下代碼
window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
如圖：
在文件內(nèi)容末尾添加如下代碼：
exports.parseGeoJson = parseGeoJson;
return exports;
如圖：
layui添加配置并使用
ok了，和網(wǎng)上其它的相比，我這個應(yīng)該是最簡單的配置了。
在B端的UI設(shè)計過程中經(jīng)常要接觸到大量的表單設(shè)計，且要展示海量數(shù)據(jù)，因此如何展示更清晰且讓用戶使用起來更便捷是設(shè)計師主要需要考慮的。結(jié)合自己在實際工作中遇到的列表類型總結(jié)了 web 表格設(shè)計的常用基礎(chǔ)列表模式，并進行匯總以便后續(xù)使用。
一、基礎(chǔ)型列表
web列表中的基礎(chǔ)表格樣式，通常用于橫向表格的縱列數(shù)據(jù)較少時，使頁面不需要滑動條也可以展示完全。操作項一般置于頁面最右側(cè)，便于用戶瀏覽完全后進行操作。
二、 帶有進度條的列表
用于查看數(shù)據(jù)完成進度，通常與網(wǎng)格型列表搭配使用，方便數(shù)據(jù)的直觀對比，進度條用不同顏色進行區(qū)分，降低用戶認知負荷。
三、可進行選擇、排序、篩選、表頭分組且?guī)в袃鼋Y(jié)列的復(fù)合型表格
由于業(yè)務(wù)場景的復(fù)雜性，在B端系統(tǒng)中通常一個表格會涉及到大量復(fù)雜的操作，這就需要將多種樣式疊加應(yīng)用提高使用效率，防止用戶產(chǎn)生疑惑。此圖中用戶既會進行單選或者批量選擇，也有可能會對數(shù)據(jù)進行排序、篩選查看，對于專業(yè)術(shù)語或用戶不常見的名詞應(yīng)給予一定的幫助說明。另外由于指標列選項過多，屏幕無法展示完全，還需要將重要列凍結(jié)，其他列增加滑動條來展示。
四、用于小計及總計的表格
小計行可能會出現(xiàn)一頁多行的情況，用特殊顏色隔開，方便用戶快速識別不同部分；總計行一般出現(xiàn)于頁面最末端，通常只有一行，文字加粗顯示。
五、行凍結(jié)、帶有角標的可編輯表格
點擊帶有角標的表格可直接進行編輯更改數(shù)值；
整行凍結(jié)：當用戶向上滾動查看或者翻頁時，凍結(jié)的行依然懸浮顯示于頁面頂部。
六、主從型列表-可展開表格
表格默認收起狀態(tài)，因為 B 端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認展開多個主從關(guān)系表格對服務(wù)器的性能損耗較大。因此設(shè)定只有當用戶點擊下轉(zhuǎn)箭頭，此表格單獨展開。
七、雙排文字表格
適用于一屏以內(nèi)文字內(nèi)容較多且不需要完全展示時的解決方案。
我們都遇到過這樣頭痛的問題，當列表字段太多，一屏無法完全展示，這時應(yīng)該怎么做？當用戶需要鼠標頻繁去滑動橫向滾動條查看一屏以外的信息時，易導(dǎo)致操作成本和對屏幕展示信息的記憶成本提高，而產(chǎn)品的易用性降低。因此提供了除增加滾動條外的另一條解決方案，使用雙排文字表格，可節(jié)省列表空間，部分內(nèi)容省略表示，鼠標hover時展示全部內(nèi)容。
總結(jié)：
1.關(guān)于對齊方式：隨著工作范圍的深入展開，發(fā)現(xiàn)之前做表格時對對齊方式并未做過多深入研究，導(dǎo)致不同項目的對齊方式并不一致，因此總結(jié)出一套方法：文本信息左對齊，因為現(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常的心智；數(shù)據(jù)信息右對齊，更加方便數(shù)字大小的直觀對比；內(nèi)容一樣居中對齊，視覺上更均衡；表頭與信息內(nèi)容對齊方式一致，給用戶視覺上的統(tǒng)一感，降低視覺噪音。
2.當設(shè)計師把設(shè)計稿交給開發(fā)時，雖然已經(jīng)標好注、切好圖同時也包括交互注釋，但是不代表開發(fā)能把界面表達的跟設(shè)計稿完全一樣，甚至?xí)泻艽笃睢Ｎ覀冊谠O(shè)計的時候會考慮到字體大小、是否加粗、對齊方式等設(shè)計層級，但前端在開發(fā)時可能并不會注意到這些細節(jié)，因此需要保持與前端的良好溝通，包括出具走查文檔及當面溝通，更能提高工作的質(zhì)量和效率。
3.由于B端系統(tǒng)的復(fù)雜性，常需要不同的表單樣式結(jié)合使用，因此還需設(shè)計時根據(jù)業(yè)務(wù)場景靈活運用。
文章來源：站酷 作者：小魔女4376
導(dǎo)航菜單對于用戶的使用來說尤為重要，本文是我從實際工作出發(fā)，結(jié)合自身產(chǎn)品和過去經(jīng)驗對于導(dǎo)航進行的一次全面總結(jié)。
在任意一個 B 端后臺系統(tǒng)中，導(dǎo)航菜單都是不可或缺的一部分，每個導(dǎo)航菜單都有其固定位置，通常這個位置是不可撼動的。所以說：導(dǎo)航菜單是 B 端產(chǎn)品層級重要的交互控件。
對于 B 端產(chǎn)品的用戶而言，他們使用導(dǎo)航菜單的目的性很強。
到后臺主要是對具體功能進行操作，導(dǎo)航菜單在功能的引導(dǎo)中發(fā)揮了巨大作用。因此，其主要的功能就是對 B 端產(chǎn)品進行分發(fā)、引導(dǎo)；幫助用戶在復(fù)雜的后臺頁面中，尋找出自己真正想要的功能。
導(dǎo)航菜單建議最多不要超過 9 個，最少不要低于 5 個。
原則解釋：1956 年喬治米勒對短時記憶能力進行的定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有 7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。
在生活中我們經(jīng)常會把一長串的數(shù)字分成 7 個左右的數(shù)組來記憶，這樣會使難度降低很多，米勒稱這種單位為「組塊」。
是不是通過分組記憶以后，自己能記住的更多？這就是 7±2 原則的分組。
通過上面 7±2 原則描述我們明確到：在導(dǎo)航菜單當中，超過 9 個會給用戶查找時帶來困難，低于 5 個說明導(dǎo)航菜單的分發(fā)效率不夠。
有人會說，在實際業(yè)務(wù)中，不會有那么理想，如果需要超過 9 個時，應(yīng)該怎么辦？
超過 9 個時，一定要對菜單進行分組，因為導(dǎo)航過多，用戶尋找會十分迷茫，通過分組的方式，能夠?qū)Σ藛芜M行再次分類，提高查找效率。
舉個例子：
比如在微盟、有贊、小鵝通的導(dǎo)航設(shè)計當中，微盟、小鵝通有很大不足，我們來一一拆解。
導(dǎo)航菜單隱藏超過兩級時，代表著產(chǎn)品在用戶的使用規(guī)劃中，沒有深入思考整個用戶體驗
導(dǎo)航菜單層級越多，用戶體驗就會越差，你會發(fā)現(xiàn)一些擁有三級導(dǎo)航的菜單，都會通過設(shè)計優(yōu)化來實現(xiàn)隱藏導(dǎo)航的合并，從而減少用戶操作負擔。
比如有贊就是一個典型例子，在有贊零售的導(dǎo)航菜單中其實是有三個層級，但是通過交互層面的優(yōu)化，將二、三級菜單直接展示出來，形成一個整體，提升了用戶體驗避免用戶層層尋找。
同時在交互上，采用懸停+點擊結(jié)合的形式，用戶既可以通過懸停鼠標進行快捷操作。同時又可以通過點擊，確定跳轉(zhuǎn)查看該一級導(dǎo)航下的菜單，能夠提高用戶的操作效率。
作為導(dǎo)航來說，其操作本身并不多，但是設(shè)計上，點擊與懸停（hover）之間，還是存在很大差距。
這里想要說明這兩個操作本身而言，并沒有對與錯，但是適用場景的不同，導(dǎo)致在設(shè)計屬性上存在著較大差異。
鼠標懸停操作
鼠標在懸停時觸發(fā)的操作時間太短暫，會給用戶帶來很強烈的挫敗感，同時在懸停選擇下一級菜單時，鼠標移動懸停也同樣會造成這樣的結(jié)果。因此在設(shè)計時，對鼠標懸停時的操作要格外留意。通常在懸停操作當中，只適用于只有一個菜單層級的菜單選項，這樣用戶在操作時更加方便。
鼠標點擊操作
鼠標點擊操作多發(fā)生于多級導(dǎo)航進行操作，同時鼠標點擊的形式，會給用戶正向的反饋，用戶點擊后明確知道菜單欄不會隱藏，因此在兩個操作之間進行選擇操作時一定要多加思考。
導(dǎo)航菜單廣度和深度的區(qū)別：
深廣度平衡幫助用戶進行快速選擇，能夠?qū)φ麄€產(chǎn)品架構(gòu)有著第一眼的認識。
當菜單廣度過大，我們也能夠通過設(shè)計的方法來優(yōu)化導(dǎo)航菜單。
我舉一個比較具有代表性的例子：騰訊云。
騰訊云目前擁有大概 100+ 個云產(chǎn)品，他們都分布在導(dǎo)航菜單上，因此在導(dǎo)航設(shè)計上，它采取一種新的模式：全部菜單導(dǎo)航、搜索菜單、自定義導(dǎo)航。
在全部菜單中，展示了騰訊云 100+ 個云產(chǎn)品項目，通過搜索進行篩選得到用戶想要的菜單。同時在導(dǎo)航欄上，支持用戶去自定義 5 個菜單選項，也因此用戶將常用的菜單添加至此，更方便用戶去尋找。這樣在滿足業(yè)務(wù)的前提下，通過一些個性的設(shè)計，使 100+個菜單也能夠塞得進整個導(dǎo)航中。
當面臨菜單深度過深時，通常需要從以下幾個方面去考慮。
與產(chǎn)品經(jīng)理溝通是否到位
這里主要是想通過與產(chǎn)品經(jīng)理的溝通，了解到菜單的架構(gòu)設(shè)計的原因，以及能否為你的設(shè)計進行一次重新的梳理，尋找一些值得優(yōu)化的點。
建議在尋找產(chǎn)品經(jīng)理之間，自己能夠通過一些思維導(dǎo)圖的軟件將自己產(chǎn)品的菜單目錄全部羅列出來，能夠先多思考，為下面的溝通節(jié)約時間、提率。
用戶體驗地圖的繪制
在一個 B 端產(chǎn)品中，用戶的目的雖然復(fù)雜，但是研究用戶每一步操作，還是會查找出一些規(guī)律，我們可以從這些規(guī)律中做些文章。
比如我們之前在一個醫(yī)療系統(tǒng)中，根據(jù)角色的不同，將醫(yī)療角色分為：前臺、咨詢師、醫(yī)生、老板這四種角色，每個角色所關(guān)心的點都會有所不同。
老板最關(guān)心每個門店目前的情況數(shù)據(jù)，比如門店營業(yè)額、門店待客數(shù)、每個醫(yī)生的治療量以及治療最少的醫(yī)生。這些都代表著他不同場景下使用的習(xí)慣。
將這些情況分析以后，提煉出核心的需求點。
然后繪制完成他們的用戶地圖后，根據(jù)角色，明確每一個角色的日常操作有哪些，從而確定我們所有菜單所展示的位置以及整個菜單的層級關(guān)系。
我將常見的導(dǎo)航區(qū)分進行總結(jié)，分為以下三種形式。
1. 顏色區(qū)分
顏色區(qū)分作為最直接最有效的一種形式，這種形式也是后臺頁面最初的狀態(tài)，我通常會用顏色區(qū)分和移動端頂部狀態(tài)欄的演變史做對比，就其功能而言他們都有很多相似的點。
微信在 2018 年 12 月份時，發(fā)布微信 7.0，將頂部導(dǎo)航由黑色轉(zhuǎn)變?yōu)榘咨?，引得大家爭論不休，而?jīng)過時間不斷洗禮，大家也逐漸接受了這個事情，漸漸忘去。
延伸閱讀：
2019 年也有類似的事情發(fā)生，有幾個產(chǎn)品的 WEB 端進行了一系列的大改，YouTube、Twitch、Twitter 都進行了重新設(shè)計，他們也不約而同的將塊面去除，去掉多余的灰色，通過留白和空間將頁面拉開。
這是否是下一個 WEB 端所要追尋的趨勢，我還不得而知。
如果 WEB 端都有此改變，那么 B 端產(chǎn)品還會遠嗎？
說回 B 端設(shè)計，顏色上的區(qū)分和移動端類似，更多體現(xiàn)在導(dǎo)航層和內(nèi)容層之間的區(qū)別，因為從本質(zhì)上講，這兩個本身就屬于不同的業(yè)務(wù)模塊，通過顏色的區(qū)分，是最為直接，最簡單的一種方式。
這種形式常見于很多復(fù)雜系統(tǒng)，例如：飛書。
左側(cè)導(dǎo)航為深色，能夠讓用戶獲得更沉浸的體驗，因為屏幕邊緣都為深色，用戶在使用時能夠真正做到有區(qū)分。
2. 投影區(qū)分
在現(xiàn)如今的移動端產(chǎn)品，投影大行其道，彌散投影，高級投影隨處可見，也逐漸影響更多 WEB 端的產(chǎn)品使用投影，增加自身產(chǎn)品 Z 軸空間。
Z 軸空間給導(dǎo)航帶來了縱深感，同時也能夠在功能層級上，通過分層設(shè)計，使頁面層級關(guān)系明確，引導(dǎo)用戶使用導(dǎo)航。
Material Design 設(shè)計的出現(xiàn)，正是 Z 軸空間的鼻祖，在我們的屏幕中開辟了第三個設(shè)計維度，在 Z 軸上展示增加了更多的交互形式。在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直于屏幕的軸，我們通過引入 Z 軸在交互設(shè)計中呈現(xiàn)三維的物理空間感，使頁面內(nèi)容能夠得到有效區(qū)分。
比如 Teambiton 在頁面中運用投影，強化了頁面層級的關(guān)系：
3. 分割線區(qū)分
分割線針對導(dǎo)航功能性不高，同時要滿足很高設(shè)計感的產(chǎn)品。
分割線太深，頁面十分割裂，分割線太淺，頁面劃分又不明確，因此需要設(shè)計師對分割線的把控十分合理。
分割線在 Dribbble 上見到過很多，通過簡單的線條加上空間的分割，將導(dǎo)航區(qū)與內(nèi)容區(qū)分開，形成很好的視覺感受。如果你是剛開始嘗試做導(dǎo)航，不太建議嘗試這種形式，因為對于頁面空間的把控要十分苛刻。
B 端產(chǎn)品易操作性中，導(dǎo)航可配置操作算得上是一個重要的點。其中最主要是通過配置操作實現(xiàn)導(dǎo)航易用性的提升，而如何讓菜單可配置，通常的做法有兩種。
1. 我的菜單
如果你的產(chǎn)品是針對多數(shù)角色不同的用戶進行設(shè)計，那么在導(dǎo)航設(shè)計時，可以考慮增加一個菜單選項：我的菜單，對于菜單進行標簽處理。
設(shè)置一個我的菜單，將用戶常用的菜單進行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過這樣的自定義，用戶在常用的菜單下，能夠通過我的菜單進行快速跳轉(zhuǎn)。
舉個例子：在印象筆記當中，其快捷方式就是可以將用戶想要的模塊放置在此，可以快速跳轉(zhuǎn)。
2. 角色配置
如果你的產(chǎn)品是為特定幾類角色進行服務(wù)，那么在導(dǎo)航設(shè)計時，可以考慮根據(jù)用戶角色的不同，給用戶不同的導(dǎo)航展示。
通過角色的篩選，對復(fù)雜導(dǎo)航進行簡化，同時管理員可以根據(jù)自身公司的業(yè)務(wù)不同，給用戶配置出不同的角色權(quán)限予以滿足用戶的導(dǎo)航需求，這樣在設(shè)計層面上能夠減少很多不必要的麻煩。
側(cè)邊導(dǎo)航是國內(nèi)的 B 端產(chǎn)品當中最為常見的。
將菜單欄放置在左側(cè)，頁面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。
因為側(cè)邊導(dǎo)航在國內(nèi)產(chǎn)品中最為常見，因此把它優(yōu)先提出來講，國內(nèi)廠商對于側(cè)邊欄導(dǎo)航尤為偏愛，在很多人心目中，感覺就只有側(cè)邊導(dǎo)航和其他導(dǎo)航兩種導(dǎo)航形式，也就造成了在 B 端產(chǎn)品的發(fā)展也逐漸趨同。不過現(xiàn)階段大家對于 B 端產(chǎn)品的重視，在設(shè)計上也開始多元化。話不多說，我們先來看看側(cè)邊導(dǎo)航的優(yōu)點有哪些。
優(yōu)點
缺點
線上產(chǎn)品：我們拿有贊零售進行舉例，他就是一個典型例子。
菜單欄+功能菜單共有 15 個，然后通過導(dǎo)航的間隔將菜單進行分組，最多一個導(dǎo)航菜單共 9 個，滿足 7±2 原則。
同時可以看到，有贊在使用三級導(dǎo)航時，通過右側(cè)面積統(tǒng)一展示二、三級導(dǎo)航，方便了用戶導(dǎo)航展示的同時，優(yōu)化了用戶的使用體驗。
為什么國內(nèi)B端產(chǎn)品大多數(shù)是側(cè)邊導(dǎo)航？
我在我的設(shè)計剪貼板中有回答過這一個問題，直接分享給大家。
頂部導(dǎo)航在國外的產(chǎn)品當中，算是較為常見的。
將菜單欄放置在頂部，頁面布局上基本為上下結(jié)構(gòu)，將導(dǎo)航菜單放置上方固定。
頂部導(dǎo)航早期出現(xiàn)于各類門戶網(wǎng)站，比如企業(yè)官網(wǎng)，各種咨詢類的網(wǎng)站經(jīng)常會采取這樣的導(dǎo)航形式。說回 B 端產(chǎn)品中，頂部導(dǎo)航通常在 B 端產(chǎn)品中也是十分常見的，其中以國外產(chǎn)品最為集中，比如國外 CRM 三劍客：salesforces、hubspot、zoho 都是采取的頂部導(dǎo)航的形式。
優(yōu)點
缺點
線上產(chǎn)品：
△ salesforce
銷售 CRM 傳奇人物，千億美元估值，每年營收百億美元，無疑是 B 端產(chǎn)品當中的一個標桿。
如果你是做 CRM，或者是 B 端產(chǎn)品，必看的一個競品。
salesforce 采取的就是一個頂部導(dǎo)航，只是不同的是，salesforce 的頂部導(dǎo)航更多是將頁頭的功能進行合并疊加，雖然 salesforce 的交互方式不算優(yōu)秀，但是因為其業(yè)務(wù)線不斷龐大，這樣才能支撐其整條業(yè)務(wù)線。就因為這樣的問題，需要設(shè)計師在設(shè)計時，要考慮到整個系統(tǒng)的一個擴展性問題。做 B 端產(chǎn)品的交互設(shè)計有點類似后端同學(xué)寫代碼，我們現(xiàn)在設(shè)計的這個交互最少要滿足未來一到兩年公司的已規(guī)劃好的產(chǎn)品的擴展問題。
△ hubspot
Hubspot 采取就是頂部菜單，二級菜單下拉展示，同時 Hubspot 是按照角色去劃分頂部菜單，能夠給用戶減輕認知負擔，更好的被用戶所使用。同時在一些設(shè)計小細節(jié)上，比如頂部的主題色，既可以提升品牌感，同時在適當時可以作為進度進行一個展示，使用戶能夠更加深入地感知到其設(shè)計。
在 B 端產(chǎn)品中，感覺混合導(dǎo)航也是一個后起之秀。
它的頁面布局為頂部和側(cè)邊，簡單來講，就是將頂部導(dǎo)航與側(cè)邊導(dǎo)航進行結(jié)合。通常將一級導(dǎo)航菜單放置頂部，通過一級菜單的點擊后，展示側(cè)邊的二、三級菜單。在一些擁有復(fù)雜的邏輯關(guān)系，菜單之間關(guān)系分明的產(chǎn)品中，混合導(dǎo)航也越來越被大眾所接受。在很多復(fù)雜的系統(tǒng)當中，混合導(dǎo)航真的是很不錯的一個選擇，我們來看看他的優(yōu)缺點
優(yōu)點
缺點
線上產(chǎn)品
云產(chǎn)品其實就是一個很好的例子，比如阿里云，他們因為自身產(chǎn)品線眾多，對于導(dǎo)航的設(shè)計也是以復(fù)雜著稱，多數(shù)情況下，面對這種復(fù)雜的導(dǎo)航時都會采取混合導(dǎo)航。他們能夠通過混合導(dǎo)航，使用戶對于導(dǎo)航每一個功能模塊都有一個深刻的認識。
金蝶-星空定位就以 Paas 進行定制銷售，分析過他的產(chǎn)品你就會了解到，他一共有 100+ 個菜單，同時算是金蝶的王牌產(chǎn)品，因此對于此類產(chǎn)品，應(yīng)該著重去了解，也因此，對于每一個模塊，都是通過大標題+小標題的形式進行設(shè)計，使用戶在使用時能夠明確知道自己想要什么。
現(xiàn)在各大復(fù)雜的產(chǎn)品都會采取混合導(dǎo)航，這樣對于產(chǎn)品的架構(gòu)以及各類菜單層級的分析也會起到很大的幫助。
平臺類導(dǎo)航是我們團隊內(nèi)部自己的取名，給他的定義通常是擁有很多模塊，比如 Teambition、明道云，擁有很多個模塊，通過一個統(tǒng)一的平臺進行內(nèi)容的分發(fā)，比如移動端的釘釘、企業(yè)微信、紛享銷客都采用同樣的方式，但在 WEB 端當中，平臺導(dǎo)航通常伴隨著其他導(dǎo)航同時出現(xiàn)。
比如最近很火的明道云，就是使用了平臺導(dǎo)航，他們將自己的產(chǎn)品分別陳列在頁面的核心區(qū)域，通過對于工作臺的設(shè)計，形成對頁面的展示，同時形成一個平臺類的導(dǎo)航，于此相對應(yīng)的還有釘釘后臺管理頁面，以及企業(yè)微信后臺管理頁面，他們都是通過一個個平臺類的模塊對導(dǎo)航進行分發(fā)的。
文章來源：優(yōu)設(shè)
奔馳法（SCAMPER）是能夠幫助我們拓寬解決問題的思路檢查列表。在解決問題的過程中，如果感到束手無策，可以嘗試從列表中顯示的方向重新思考問題，從而打開解決問題的思路。你將通過本文熟練掌握其運用方法。
SCAMPER 是七個英文短語的縮寫，同時也代表著七個解決問題的方向，這七個方向是：
SCAMPER 法的具體實踐步驟：
麥當勞家喻戶曉的知名度得益于極具傳奇色彩的麥當勞創(chuàng)始人雷·克羅克先進的經(jīng)營理念。畢竟麥當勞的出現(xiàn)讓人們的生活模式發(fā)生了翻天覆地的變化。時至今日，我們?nèi)匀豢梢詮柠湲攧诘纳虡I(yè)戰(zhàn)略中識別出 SCAMPER 法的蹤跡：
替代
這里需要考慮的總體問題是：何物可被「取代」？
尋找當前選項的替代選項。這些替代選項可以是人，物或方案等一切等同于現(xiàn)有選項的東西。例如產(chǎn)品的替代材料，服務(wù)的替代方案以及后備人員等。
思考清單：
整合
這里需要考慮的總體問題是：可與何物合并而成為一體？
將現(xiàn)有產(chǎn)品和別的產(chǎn)品或系統(tǒng)結(jié)合在一起使用，或者能否與其它產(chǎn)品合并而成為一個整體？
思考清單：
調(diào)整
這里需要考慮的總體問題是：原物是否有需要調(diào)整的地方？找出所有可以調(diào)整的選項。
思考清單：
修改
這里需要考慮的總體問題是：可否改變原物的某些特質(zhì)，如意義、顏色、聲音、形式等？修改現(xiàn)有的所有或部分選項，重新組合出新產(chǎn)品。
思考清單：
另用
這里需要考慮的總體問題是：可有其它非傳統(tǒng)的用途？不斷尋找現(xiàn)有產(chǎn)品的新用途，將現(xiàn)有產(chǎn)品推廣到新地方。
思考清單：
消除
這里需要考慮的總體問題是：可否將原物變小？濃縮？或省略某些部分？使其變得更完備、更精致？消除不必要的選項，減少不需要的功能。
思考清單：
逆反
這里需要考慮的總體問題是：可否重組或重新安排原物的排序？或把相對的位置對調(diào)？重組或重新安排選項的順序，或把選項的位置對調(diào)。
思考清單：
這個檢查列表最早是為頭腦風(fēng)暴設(shè)計的，旨在激活參與人員思路，起到發(fā)散思維的作用。心理學(xué)家羅伯特·艾伯爾總結(jié)了這些列表并做出最終的解釋。目前奔馳法主要用在產(chǎn)品改造和服務(wù)升級的過程中，但它對普通問題的解決也有幫助作用。
文章來源：優(yōu)設(shè) 作者：陸小鳳不傳奇
在日常的設(shè)計工作中，版式即一個畫面的骨架，也是視覺傳達的重要組成部分，版式整體的活躍程度也能起到改變畫面基調(diào)的作用，這也就是為什么很多作品看似很「簡單」，但卻不失設(shè)計感的原因。如何把原本比較中規(guī)中矩的版式結(jié)構(gòu)通過設(shè)計手法將其差異化、提升設(shè)計感、增強活躍度，這樣做的目的是為了打破墨守成規(guī)的形式，提升用戶停留時間，以及畫面的趣味性，所以本期就和大家一起總結(jié)一些常用增強版式活躍度、提升版式設(shè)計感的設(shè)計手法。
色塊疊壓法，顧名思義就是改變色塊的擺放方式，可以分為兩類，第一類是色塊與色塊之間的疊壓。通過色塊與色塊之間的非常規(guī)擺放形式，打破原本常規(guī)的版式結(jié)構(gòu)，增強其形式感、活躍度。下面我們舉個例子：
通過上下對比，我們不難發(fā)現(xiàn)，下側(cè)畫面整體版式結(jié)構(gòu)更跳躍，直白地說就是不死板，而且形式感更強，給人的感覺也更舒服、有趣味性；而上側(cè)畫面的整體感受并不是說不合理，只不過相對比而言，這種結(jié)構(gòu)形式很常見，版式結(jié)構(gòu)變化性不高，形式感和設(shè)計感也稍有欠缺，那么造成這種現(xiàn)象的原因是什么呢？
色塊疊壓的形式在很多優(yōu)秀作品中也是很常見的，這種手法對于版式結(jié)構(gòu)的重組、改變也是最直觀的一種。比如：
通過色塊之間的相互疊壓，形成了打破常規(guī)的效果，使得頁面版式的跳躍性更強。
第二類是色塊與主體的疊壓方式，通過色塊與主體物或者產(chǎn)品之間的相互疊壓作用，營造出非常規(guī)的設(shè)計形式，從而提升版式整體的靈活度以及設(shè)計感。舉個例子：
這里運用的就是將主體物與色塊之間相互疊壓的手法，形成了一定的前后關(guān)系，而且這里主體處色塊最大作用還是打破常規(guī)的版面形式，目的是在視覺上給人以更加新穎、更具形式感的感受，且雖然做了結(jié)構(gòu)上的改變，但并沒有影響到主體信息的傳達。切記，不能一味地追求非常規(guī)而忽略了設(shè)計本質(zhì)問題，一定要合理運用。
當作品版式不夠活躍的時候，我們可以嘗試刻意改變某處的局部信息，將其放大，提升視覺變化的對比性，因為放大的元素其本身就具有很強烈的視覺沖擊力以及裝飾性，比如大號字體、數(shù)字、圖形等等，所以局部放大的手法在頁面版式設(shè)計中也是很常用的一種表達形式。比如：
將主體的某一處細節(jié)或者某一局部放大處理，與原本偏常規(guī)布局形成了鮮明的對比關(guān)系，對頁面整體而言也起到了很好的打破版式關(guān)系的作用。試想一下：當用戶前面一直在瀏覽比較常規(guī)的布局結(jié)構(gòu)時，突然有 1-2 處這樣非常規(guī)的處理模塊，會很大程度上提升頁面對于用戶視覺的沖擊力，給用戶留下更深刻的印象，同時也使得作品整體的版面結(jié)構(gòu)更加富有跳躍性。
還有另外一種局部放大形式，即在放大的基礎(chǔ)上故意按照非常規(guī)的形式擺放，往往也能起到很好的打破版面布局的作用，只不過這種形式在使用時相對不好把握。比如：
類似案例中所展示的一樣，通過產(chǎn)品非常規(guī)的局部放大以及擺放形式，畫面給人的感受更加大氣，視覺沖擊力更強烈，同時版式的跳躍性也更強。只不過這種形式在運用時要注意：頁面整體中最多出現(xiàn) 1-2 次即可，用于活躍版式、提升設(shè)計感，一旦出現(xiàn)次數(shù)過多，很容易形成雜亂的現(xiàn)象，之所以叫做非常規(guī)是因為有常規(guī)方式加以襯托、輔助，所以才會在視覺上形成反差。
既然是為了提升版面的活躍度，那么版面中所有的元素都可以是嘗試改變的元素，比如常用到的按鈕，再或者線條等等。使用非常規(guī)的形狀、圖形也是方式之一，比如最簡單的：
說到矩形，很多人都會想到常規(guī)形式，而也有一部分設(shè)計師會聯(lián)想到非常規(guī)形式 1，少數(shù)人會想到 2 和 3 的形式，這四類并沒有設(shè)計上的好壞之分，而是當我們習(xí)慣了常規(guī)形式的色塊之后，也可以嘗試一下其他形式，也是會有意想不到的效果。比如非常規(guī)形式 2 的運用：
相比平時看到的矩形排列方式，這一作品則給人很新穎的感覺，原本平面的作品，因為色塊形狀的改變使得整體有了很強烈的縱深感，版面的跳躍性很強烈，這樣的版式還會有人說死板、常規(guī)嗎？
非常規(guī)形狀 3 的使用可以參考下面這個案例：
在原本頁面中完全統(tǒng)一的形狀圖形中變換其中一處的形式，對于頁面整體跳躍性的提升還是一目了然的，原因在于：此處矩形的形態(tài)就屬于非常規(guī)類型，本身就具有一定的跳躍性、設(shè)計感，而用在此頁面中又與上下形成了一定的反差對比，所以使得版面整體更加活躍。
還有很多非常規(guī)的形狀，同樣也可以嘗試，比如：
想要版面看起來不古板，就要在頁面中的每一個視覺元素上找突破。版式聽起來好像一個很大的整體一樣，其實一樣可以拋開整體，把每一個局部作為突破點，尋找合適的視覺表達形式。當某一種形式已經(jīng)讓大家所熟知甚至成為常識的時候，我們不妨稍作改變，在不影響辨識度以及視覺傳達的基礎(chǔ)上，做一些形式上的調(diào)整，往往可以給予版式更強烈的跳躍性以及設(shè)計感。
版式就像配色一樣，很感性，沒有完全一成不變的理論。當我們想要提升版面整體跳躍性的時候，我們不妨試試以上方法，也許小小的改變對于整體而言就是完全不同的兩種感受。當然，也不能盲目地追求形式感、特殊性。要切記：特殊是通過對比體現(xiàn)出來的，沒有對比，就無法形成很好的視覺反差，同時也起不到應(yīng)有的作用。還是要提醒大家，一個整體非常規(guī)的手法用在 1-2 處即可，太多的話是很難把握的。
文章來源：優(yōu)設(shè) 作者：美工美邦
隨著電商行業(yè)逐漸成熟發(fā)展，從幾年前設(shè)計盛行的淘寶風(fēng)到現(xiàn)在的要求高端、品牌化、上檔次，大眾人群的審美也在不斷提升，電商行業(yè)進步的同時也帶動著設(shè)計行業(yè)一同走向成熟。所以在日常的設(shè)計工作中，我們也常常會聽到需求方要求：要夠上檔次、高端、有格調(diào)。這些比較抽象的要求如何體現(xiàn)在設(shè)計中往往是困擾我們的一個棘手的問題。那么本期就和大家一起帶著問題探討，總結(jié)一些提升設(shè)計作品檔次的實用方法。
配色已經(jīng)算是老生常談的一個話題了，這里我們暫且不說如何提升，先來看看前幾年淘寶風(fēng)的海報設(shè)計是什么感覺。
如上圖所示，給人的感覺就是雜而亂，配色毫無章法。顯然在當下電商的大環(huán)境下，這種相對粗暴的海報在平時會越來越少，轉(zhuǎn)而要求品牌化、上檔次的越來越多，那么從配色上如何提升作品檔次呢？
1. 暗色調(diào)搭配提升作品檔次
為什么說暗色調(diào)可以提升設(shè)計檔次呢？因為暗色調(diào)或者說是低明度的色彩搭配，會在一定程度上減弱其色彩固有的屬性以及因色彩產(chǎn)生的情感，從而使得整個畫面變得相對冷靜、上檔次。用到的色相不宜過多（1-2 種即可），舉個例子：
如圖所示，暗色調(diào)搭配給人的感覺很舒服，而且也夠上檔次。通過降低明度的方式弱化大面積顏色固有的情感屬性，讓畫面更冷靜、理性，從而起到提升作品整體檔次和視覺感受。
所以現(xiàn)在很多品牌設(shè)計中，暗色調(diào)的搭配用到的越來越多，也逐漸被現(xiàn)在的大眾所接受。
需要注意：暗色的搭配方式很容易出現(xiàn)將顏色弱化到色感缺失，導(dǎo)致作品因缺少顏色屬性而太過深沉，甚至乏味，沒有亮點，所以可以適當?shù)厥褂靡恍c綴色規(guī)避這一現(xiàn)象。切記：弱化顏色屬性并不是要完全摒棄色彩。
2. 干凈的配色提升作品檔次
每種色彩都有其固有的情感屬性，比如：紅色-喜慶、熱鬧；藍色-安全、科技……在非暗色調(diào)的情況下，干凈的配色也能起到提升作品檔次的作用。而說到干凈，第一想到的應(yīng)該就是白色：
如圖所示，同樣和暗色調(diào)的作用很相似，白色本身就給人一種干凈、純潔、高冷的感覺，大面積的白色弱化了其他色彩的屬性，所以整體偏白色調(diào)也能起到很好的提升作品檔次的作用，且要適當?shù)厥褂命c綴色。
也可以使用偏高明度低飽和度的色彩，這類顏色搭配同樣也是減弱了顏色本身的固有屬性，只是相比黑白灰色調(diào)而言，保留的顏色屬性多一些。比如：
如圖所示，當作品色調(diào)偏高明度低飽和度時，同樣也能提升作品的檔次。但是前提是顏色要干凈、通透。切記：色相越少越好把控。
注意：配色并不是一成不變的，這里提到的三種配色形式是比較常用的，不管是暗色調(diào)、白色還是其他，都要讓作品整體呈現(xiàn)出一種干凈、舒服、通透的視覺感受。
不妨找一些品牌的海報看看，絕大多數(shù)的配色形式都符合我們前面所說的，而且即便用到一些色彩，大部分都是使用一種色相，目的也是為了避免大面積多種顏色碰撞，會給人一種不穩(wěn)定、輕浮、的視覺感受。
通過前面案例，我們也能發(fā)現(xiàn)，雖然配色起到了一定的提升作用，但同樣也需要留白。
關(guān)于設(shè)計中的留白，這里強調(diào)一下留白并不等于空白，留白的目的是留出視覺元素中的喘息空間，讓視覺更具有通透性。恰當?shù)牧舭啄軌蚪o人品質(zhì)感、高端上檔次的視覺感受。所以在設(shè)計中，并不是信息越多越少，而是要秉承少即是多的理念。舉個例子：
如圖所示，很顯然，上圖給人的第一視覺感受就是廉價，原因在于：
而下圖則給人一種很高冷、有檔次的感覺，同樣是茶，為什么第一眼給人的感受差距這么大？原因如下：
留白在設(shè)計中是非常重要的，所以我也不止一次的提到過。而作為一名設(shè)計師，留白的運用也是一門必修課。留白：留出來的是喘息和想象的空間，留出來的是品質(zhì)和自信。
文案作為設(shè)計的一個信息載體，它要比任何圖片信息都要更直觀、一目了然。所以在設(shè)計工作中，字體的選擇也是設(shè)計師的必修課。我們都知道字體庫的數(shù)量多之又多，而每款字體所傳達的視覺感受都各不相同，那么在日常的設(shè)計工作中，合理使用字體有助于提升作品檔次。使用字體時應(yīng)該注意什么？
1. 統(tǒng)一字體形式
這個點很好理解，就是作品中對應(yīng)位置的字體要統(tǒng)一使用相同的字體，不要出現(xiàn)同一位置多種字體，比如：標題字體、副標題字體、說明文字字體等等，做到統(tǒng)一有助于提升作品檔次。舉個例子：
如圖所示，我們對比來看，很明顯①使用了多種字體的組合，給人一種很浮躁、雜亂甚至有些廉價的感覺，街頭小廣告也許能看到這么用的，沒有體現(xiàn)出任何一款字體的氣質(zhì)，而其他三處則在字體上做了統(tǒng)一，給人的感覺很舒服，字體本身的美感也都體現(xiàn)得淋漓盡致。
2. 統(tǒng)一字體氣質(zhì)
前面我們也說了，每款字體所傳達的視覺感受也都不同，在使用字體時，盡量選用氣質(zhì)雷同的字體相互搭配。比如：標題中國風(fēng)字體，那么副標題和說明性文字就盡量貼合中國風(fēng)的感覺或者與標題保持一致，這樣做有助于提升作品的檔次以及整體性?？磦€案例：
上中下三個案例，相比而言，底部海報給人的感覺品質(zhì)更好，更舒服，下面我們逐一分析：
雖然字體的數(shù)量在日益增多，選擇性也越來越大，但有些字體最好不要使用，比如：霹靂體、水滴體、涂鴉體、Adobe 黑體等等一些字形結(jié)構(gòu)粗暴或者缺少細節(jié)的字體。
補充說明：提升作品檔次，還需要注意背景要選擇高清大圖、產(chǎn)品要有質(zhì)感、摳圖不要有白邊鋸齒、模特盡量不要選網(wǎng)紅、盡量不要選被人用過無數(shù)次的素材，盡可能將每一處做到精致、不要忽略每一處細節(jié)。
文章主要從配色、留白、字體三方面作為提升作品檔次的切入點，當然不僅僅只有這些，要靈活運用，這里只是為大家提供一個可供參考的方向。重點是要能從別人好的作品中提取優(yōu)點，然后舉一反三，形成自己的一套設(shè)計思路。簡而言之，提升作品檔次，就要盡可能地讓作品干凈、整潔、精致。
其實檔次是比較抽象的名詞，這是一種感覺，所以我們無法給出定義。作為設(shè)計師，我們需要做的就是通過設(shè)計的理論知識將這個感覺呈現(xiàn)給大眾，讓他們接受、認可。
文章來源：優(yōu)設(shè) 作者：美工美邦
h5新增的表單標簽
原創(chuàng)weixin_46366721 最后發(fā)布于2020-02-29 12:27:39 閱讀數(shù) 13 收藏
展開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/ 谷歌 /
input::-webkit-input-placeholder{
color:blue;
}
/ 火狐19+ /
input::-moz--input-placeholder{
color:blue
}
/ 火狐4-18 /
input:-moz-input-placeholder{
color:blue;
}
/ ie高版本，ie+ /
input::-ms-input-placeholder{
color:blue;
}
/ 歐鵬 /
input::-o-input-placeholder{
color:blue;
}
</style>
</head>
<body>
<form action="" novalidate>
<input type="email">
<input type="submit">
<br>
<input type="url">
<input type="submit">
<br>
<input type="range">
<input type="submit">
<br>
<input type="number">
<input type="submit">
<br>
<input type="search">
<input type="submit">
<br>
<input type="color">
<input type="submit">
<br>
<input type="time">
<br>
<input type="month">
<br>
<input type="week">
<br>
<!-- <input type="datetime-local> -->
<input type="date">
<br>
<!-- <input type="text" required>
<input type="submit"> -->
<br>
<input type="number" step="3">
<input type="submit">
<br>
<input type="text" name="aa" autocomplete="off">
<input type="submit">
<br>
<input type="text" value="" placeholder="請輸入您的姓名：" autofocus>
<input type="submit">
<br>
<input type="text" placeholder="請輸入您的手機號：" pattern="^1[3|5|8]\d{9}$">
<input type="submit">
<br>
<input type="file" multiple>
<br>
<input type="url" list="lll">
<datalist id="lll">
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sina.com" label="新浪"></option>
</datalist>
<input type="submit">
</form>
</body>
</html>
h5新增type類型：
Type=“email” 限制用戶必須輸入email類型
Type=“url” 輸入的網(wǎng)址前面必須加上http://
Type=“range” 產(chǎn)生一個滑動條表單
Type=“number” 必須輸入的是數(shù)字，調(diào)整數(shù)字大小(谷歌瀏覽器輸入字母不可以，但是可以輸入e；火狐可以輸入字母，不能提交)
Type=“search” 產(chǎn)生一個搜索意義的表單（火狐瀏覽器沒有叉號，谷歌有）
Type=“color” 生成一個顏色選擇的表單；
產(chǎn)生很大的兼容問題：
type=“time” 限制用戶必須輸入時間類型
type=“month” 限制用戶必須輸入月份類型（火狐瀏覽器不顯示）
type="week"限制用戶必須輸入周類型
type="datetime-local"選取本地時間
type=“date”
新增表單屬性：
required 檢測是否為空；
min:最小值
max：最大值
step：數(shù)值增加的幅度； 如果輸入的是step=“3”,搜索框輸入2，按住上鍵調(diào)的話，會是3，因為法定值：-3 0 3 6 9
autocomplete是否自動提示信息 on（默認值）off;和name="" 一起使用；
placeholder：文本框的提示信息(value的值得手動刪除，而placeholder不用刪除，可以直接輸入內(nèi)容)
autofocus：自動聚焦，一個頁面只能存在一個聚焦（auto：自動）
pattern：后面的屬性值是一個正則表達式
//手機號驗證pattern=“^1[3][5]\d{9}$”
novalidate：取消驗證，放在form里面
multiple:選擇多個文件上傳
list:提示信息；必須結(jié)合datalist標簽，綁定datelist (谷歌提示value和label，而火狐只有l(wèi)abel提示)
h5:新增的表單標簽
datalist
option
output:計算結(jié)果輸出、腳本的輸出
藍藍設(shè)計的小編 http://www.yvirxh.cn