jQuery超詳細(xì)總結(jié)
文章目錄
jQuery超詳細(xì)總結(jié)
一 選擇器
特殊選擇器
二 篩選器
用在 jQuery 選擇的元素后面
都是方法,對(duì)選擇出來的元素進(jìn)行二次篩選
三 文本操作
總結(jié)
四 元素類名操作
五 元素屬性操作
在 H5 的標(biāo)準(zhǔn)下, 給了一個(gè)定義, 當(dāng)你需要寫自定義屬性的時(shí)候，最好寫成 data-xxx="值"，當(dāng)大家看到 data-xxx 的時(shí)候, 就知道這是一個(gè)自定義屬性
六 元素樣式操作
七 綁定事件
on()方法是專門用來綁定事件one() 方法是專門用來綁定一個(gè)只能執(zhí)行一次的方法off() 方法是專門用來解綁一個(gè)元素的事件的trigger() 方法是專門用來觸發(fā)事件的方法hover()常用事件offset()position()scrollTop()scrollLeft()ready() 事件each() 方法jQuery 發(fā)送一個(gè) GET 請(qǐng)求jQuery 發(fā)送一個(gè) POST 請(qǐng)求jQuery 的 $.ajax 方法position()
postition: 定位
只讀的方法
讀取:
元素相對(duì)于定位父級(jí)的位置關(guān)系
得到的也是一個(gè)對(duì)象 { left: xxx, top: xxx }
如果你寫的是 right 或者 bottom, 會(huì)自動(dòng)計(jì)算成 left 和 top 值給你
十一 獲取卷去的尺寸（頁面滾動(dòng)條）
scrollTop()
原生 js 里面 document.documentElement.scrollTop
讀寫的方法
不傳遞參數(shù)的時(shí)候就是獲取卷去的高度
傳遞一個(gè)參數(shù)就是設(shè)置卷去的高度
scrollLeft()
原生 js 里面 document.documentElement.scrollLeft
讀寫的方法
不傳遞參數(shù)的時(shí)候就是獲取卷去的寬度
傳遞一個(gè)參數(shù)的時(shí)候就是設(shè)置卷去的寬度
十二 jQuery中的函數(shù)
ready() 事件
類似于 window.onload 事件,但是有所不同
window.onload 會(huì)在頁面所有資源加載行
ready() 會(huì)在頁面 html 結(jié)構(gòu)加載完畢后執(zhí)行
也叫做 jQuery 的入口函數(shù)
有一個(gè)簡寫的形式 $(function () {})
each() 方法
類似于 forEach(), 遍歷數(shù)組的
jQuery 的元素集合, 是一個(gè) jQuery 數(shù)組, 不是一個(gè)數(shù)組, 不能使用 forEach()
forEach語法： forEach(function (item, index) {})
each語法：each(function (index, item) {})
比較少用到, 因?yàn)?jQuery 隱式迭代 自動(dòng)遍歷
十三 jQuery中的動(dòng)畫
讓元素出現(xiàn)不同的移動(dòng), 改變
transition -> 過渡動(dòng)畫
animation -> 幀動(dòng)畫
標(biāo)準(zhǔn)動(dòng)畫
show() 顯示元素
語法: show(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
hide() 隱藏元素
語法: hide(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
toggle() 改變元素顯示或隱藏（如果顯示就隱藏，如果隱藏就顯示）
語法: toggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
三個(gè)方法的參數(shù)都可以選填，不需要每個(gè)都填寫
折疊動(dòng)畫
slideDown() 下滑顯示
語法: slideDown(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
slideUp() 上滑隱藏
語法: slideUp(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
slideToggle() 切換滑動(dòng)和隱藏
語法: slideToggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
漸隱漸顯動(dòng)畫
實(shí)質(zhì)是透明的opacity的變化
fadeIn() 逐漸顯示
fadeIn(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
fadeOut() 逐漸消失
fadeOut(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
fadeToggle() 切換顯示和消失
fadeToggle(時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
以上三個(gè)方法的參數(shù)，均有默認(rèn)值
fadeTo() 設(shè)置元素透明度變?yōu)槟阒付ǖ臄?shù)字
fadeTo(時(shí)間, 你指定的透明度, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
綜合動(dòng)畫
animate()
基本上大部分的 css 樣式都可以動(dòng)畫
transform 不行, 顏色不行
語法: animate({}, 時(shí)間, 運(yùn)動(dòng)曲線, 運(yùn)動(dòng)結(jié)束的函數(shù))
{ }里面就寫你要運(yùn)動(dòng)的 css 屬性,默認(rèn)單位為px
停止動(dòng)畫
讓當(dāng)前的動(dòng)畫結(jié)束
因?yàn)?jQuery 的動(dòng)畫你一直點(diǎn)擊，就會(huì)一直觸發(fā)。即使不再點(diǎn)擊讓事件發(fā)生，還是會(huì)把沒執(zhí)行完的動(dòng)畫執(zhí)行完畢。
你點(diǎn)擊 10 次, 他就會(huì)觸發(fā) 10 次, 直到 10 次全都完畢才結(jié)束
stop()
當(dāng)這個(gè)函數(shù)觸發(fā)的時(shí)候, 就會(huì)讓運(yùn)動(dòng)立刻停下來
你運(yùn)動(dòng)到哪一個(gè)位置了就停止在哪一個(gè)位置
finish()
當(dāng)這個(gè)函數(shù)觸發(fā)的時(shí)候, 就會(huì)讓運(yùn)動(dòng)立刻停下來
不管你運(yùn)動(dòng)到了哪一個(gè)位置, 瞬間到達(dá)運(yùn)動(dòng)完成位置
十四 jQuery發(fā)送ajax請(qǐng)求
jQuery 里面幫我們封裝好了幾個(gè)方法
專門用來發(fā)送 ajax 請(qǐng)求的
$.get() -> 專門用來發(fā)送 get 請(qǐng)求的
$.post() -> 專門用來發(fā)送 post 請(qǐng)求的
$.ajax() ->
發(fā)送什么請(qǐng)求都可以(get, post, put, delete)
并且還可以發(fā)送一個(gè) jsonp 請(qǐng)求
jQuery 發(fā)送一個(gè) GET 請(qǐng)求
語法: $.get(請(qǐng)求地址, 需要攜帶到后端的參數(shù), 成功的回調(diào)函數(shù), 期望后端返回的數(shù)據(jù)類型)
請(qǐng)求地址: 你要請(qǐng)求的后端接口地址(必填)
攜帶參數(shù): 你需要給后端傳遞的參數(shù)
可以是一個(gè)固定格式的字符串 ‘key=value&key=value’
也可以是一個(gè)對(duì)象 { a: 100, b: 200 }
成功回調(diào): 當(dāng)請(qǐng)求成功的時(shí)候會(huì)執(zhí)行的函數(shù)
期望數(shù)據(jù)類型: 就是你是不是需要 jQuery 幫你解析響應(yīng)體
$.ajax({
url: '', // => 請(qǐng)求地址(必填)
type: '', // => 請(qǐng)求方式(GET, POST, ...) 默認(rèn)是 GET
data: '', // => 攜帶到后端的參數(shù)
dataType: '', // => 期望后端返回的數(shù)據(jù)類型, 默認(rèn)不解析
async: true, // => 是否異步, 默認(rèn)是 true
success: function () {}, // => 成功的回調(diào)
error: function () {}, // => 失敗的回調(diào)
timeout: 數(shù)字, // 單位是 ms, 超時(shí)時(shí)間(超過你寫的時(shí)間沒有響應(yīng), 那么就算失敗)
cache: true, // 是否緩存, 默認(rèn)是 true
context: 上下文, // 改變回調(diào)函數(shù)里面的 this 指向
...
})
$.ajax 里面失敗的回調(diào)
不光是請(qǐng)求失敗的時(shí)候會(huì)觸發(fā)
jQuery 認(rèn)定失敗就是失敗
當(dāng) dataType 寫成 json 的時(shí)候, jQuery 會(huì)幫我們執(zhí)行 JSON.parse()
當(dāng)后端返回一個(gè)不是 json 格式的字符串的時(shí)候
執(zhí)行 JSON.parse() 就會(huì)報(bào)錯(cuò)
也會(huì)執(zhí)行失敗的回調(diào), 請(qǐng)求雖然成功, 但是解析失敗了, 也是失敗
JSON.parse(‘你好 世界’) -> 就會(huì)報(bào)錯(cuò)了
$.ajax 里面是否緩存的問題
這個(gè)請(qǐng)求要不要緩存
當(dāng)兩次請(qǐng)求地址一樣的時(shí)候, 就會(huì)緩存
如果你寫成 false, 表示不要緩存
jQuery 就會(huì)自動(dòng)再你的請(qǐng)求后面加一個(gè)參數(shù) =時(shí)間戳
第一次請(qǐng)求 ./server/get.php?=11:10:01.325的時(shí)間戳
第二次請(qǐng)求 ./server/get.php?_=11:10:02.326的時(shí)間戳
$.ajax 里面的回調(diào) this 指向問題
ajax 的回調(diào)里面默認(rèn) this 指向被 jQuery 加工過的 ajax 對(duì)象
context 的值你寫的是誰, 回調(diào)函數(shù)里面的 this 就時(shí)誰
$.ajax 里面的請(qǐng)求方式的問題
$.ajax 這個(gè)方法里面, type 表示請(qǐng)求方式
jQuery 還給了我們一個(gè)參數(shù)叫做 method，也表示請(qǐng)求方式
當(dāng)你寫請(qǐng)求方式的時(shí)候
可以寫成 type: ‘POST’
也可以寫成 method: ‘POST’
$.ajax 里面的接收響應(yīng)的問題(2015年以后的版本才有 promise 的形式)
jQuery 默認(rèn)把 ajax 封裝成了 promsie 的形式
你可以用 success 選項(xiàng)接收成功的回調(diào)
也可以用 .then() 的方式接收響應(yīng)
jQuery 的 ajax 全局鉤子函數(shù)
鉤子: 掛在你的身上, 你的所有動(dòng)作都和它有關(guān)系
這些全局函數(shù)都是掛在 ajax 身上的, 這個(gè) ajax 的每一個(gè)動(dòng)作都和全局函數(shù)有關(guān)系
全局的鉤子函數(shù)
1.ajaxStart()
會(huì)在同一個(gè)作用域下多個(gè) ajax 的時(shí)候, 第一個(gè) ajax 之前開始的時(shí)候觸發(fā)
如果有多個(gè) ajax 他只觸發(fā)一次
2.ajaxSend()
每一個(gè) ajax 再發(fā)送出去之前, 都會(huì)觸發(fā)一下
xhr.send() 之前觸發(fā)
ajaxSuccess()
每一個(gè) ajax 再成功的時(shí)候觸發(fā)
只要有一個(gè) ajax 成功了就會(huì)觸發(fā)
ajaxError()
每一個(gè) ajax 再失敗的時(shí)候觸發(fā)
只要有一個(gè) ajax 失敗了就會(huì)觸發(fā)
ajaxComplete()
每一個(gè) ajax 完成的時(shí)候觸發(fā)
只要有一個(gè) ajax 完成了, 不管成功還是失敗, 都會(huì)觸發(fā)
ajaxStop()
會(huì)在同一個(gè)作用域內(nèi)多個(gè) ajax 的時(shí)候, 最后一個(gè) ajax 完成以后觸發(fā)
如果有多個(gè) ajax 它只觸發(fā)一次
作用: 通常用來做 loading 效果
<img src="./loading.gif" alt="">
// 利用ajax鉤子函數(shù) 做一個(gè)lading效果 等待頁面
// 提前利用鉤子函數(shù)準(zhǔn)備 loading 效果
// 每一次發(fā)送出去的時(shí)候都要顯示圖片
$(window).ajaxSend(() => {
$('img').show()
})
// 每一次完成的時(shí)候都要圖片再隱藏起來
$(window).ajaxComplete(() => {
$('img').hide()
})
// 每次點(diǎn)擊按鈕的時(shí)候都會(huì)發(fā)送一個(gè) ajax 請(qǐng)求
$('button').click(() => {
// 發(fā)送一個(gè) ajax 請(qǐng)求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log('請(qǐng)求成功了')
console.log(res)
}
})
})
十五 jQuery 發(fā)送一個(gè) jsonp 請(qǐng)求
jQuery 也提供給我們發(fā)送 jsonp 請(qǐng)求的方式
jsonp: 利用 script 標(biāo)簽的 src 屬性來請(qǐng)求
返回值: 是一個(gè)字符串, 字符串里面寫了一個(gè) 函數(shù)名(后端傳遞給前端的參數(shù))
使用 $.ajax() 這個(gè)方法
必須寫的:dataType: 'jsonp'
發(fā)送 jsonp 請(qǐng)求
jQuery 幫我們準(zhǔn)備好了一個(gè)函數(shù)名, 并且以參數(shù)的形式帶到了后端
jQuery 幫我們帶過去的 callback 參數(shù), 就是它準(zhǔn)備好的函數(shù)名
后端就應(yīng)該返回一個(gè) jQuery 準(zhǔn)備好的函數(shù)名()
其他參數(shù)
jsonp: '', 你帶到后端表示你函數(shù)名的那個(gè) key, 默認(rèn)值是 callback
cache: false, 當(dāng) dataType === ‘jsonp’ 的時(shí)候, 默認(rèn) cache 就是 false
// 發(fā)送一個(gè) jsonp 請(qǐng)求
$.ajax({
url: '
dataType: 'jsonp', // 表示我要發(fā)送一個(gè) jsonp 請(qǐng)求
jsonp: 'cb', // 表示參數(shù)里面的 cb 屬性時(shí)我準(zhǔn)備好的函數(shù)名
cache: true, // 表示緩存本次請(qǐng)求
success: function (res) {
console.log(res)
}
})
// jQuery 準(zhǔn)備好的函數(shù)名
// + jQuery34108160883644340862_1582255906750
// + 變量名包含 數(shù)字 字母 下劃線 $
// + function jQuery34108160883644340862_1582255906750() {}
十六 jQuery 的多庫并存機(jī)制
因?yàn)?jQuery 引入頁面以后, 向全局添加了兩個(gè)名字
一個(gè)叫做 $
一個(gè)叫做 jQuery
萬一有別的類庫也起名叫做 jQuery 或者$ 怎么辦
當(dāng)我兩個(gè)庫都需要使用的時(shí)候
因?yàn)橄蛉直┞兜拿忠粯? 就會(huì)發(fā)生沖突了
誰的文件引再后面, 誰的名字就占主要位置了
兩個(gè)只能選擇一個(gè)使用
jQuery 提供了一個(gè)方法
我可以不占用$ 或者 jQuery 這個(gè)名字
noConflict()
語法: $.noConflict() 或者jQuery.noConflict()
當(dāng)你執(zhí)行了 noConflict() 以后, jQuery 就交出了$的控制權(quán)。
jQuery向全局暴露的不在有$ 這個(gè)名字了。當(dāng)你執(zhí)行了noConflict(true) 以后, jQuery就交出了 $ 和jQuery 的控制權(quán)。
交出去以后, 我的 jQuery 就用不了
noConflict() 的返回值: 就是一個(gè)新的控制權(quán)
你只要接收一個(gè)返回值, 你定好的變量是什么,jQuery 的控制權(quán)就是什么
// 交出 $ 的控制權(quán)
// $.noConflict()
// 交出 $ 和 jQuery 的控制權(quán)
// $.noConflict(true)
// 改變 jQuery 的控制權(quán)
var $$ = $.noConflict(true)
十七 jQuery 的插件擴(kuò)展機(jī)制
jQuery 還提供給我們了一個(gè)機(jī)制, 就是你可以向 jQuery 里面擴(kuò)展一些方法
兩個(gè)方法
$.extend()
擴(kuò)展給 jQuery本身使用的
語法:
$.extend({ 你要擴(kuò)展的方法名: function () {}, 你要擴(kuò)展的方法名: function () {}, ... })
使用的時(shí)候就是 $.你擴(kuò)展的方法名()
$.fn.extend() => $.extend($.fn, { 你擴(kuò)展的方面名 })
擴(kuò)展給 jQuery 元素集合使用的
語法 $.fn.extend({ 你要擴(kuò)展的方法名: function () {}, 你要擴(kuò)展的方法名: function () {}, ... })
使用的時(shí)候就是 $(選擇器).你擴(kuò)展的方法名()
$('div').html()
// 1. 擴(kuò)展給 jQuery 本身
// jQuery 本身沒有操作 cookie 的方法
// $.extend({
// setCookie: function (key, value, expires) {
// // 寫上設(shè)置 cookie 的方法
// if (expires) {
// var time = new Date()
// time.setTime(time.getTime() - 1000 60 60 8 + 1000 expires)
// document.cookie = ${key}=${value};expires=${time}
// } else {
// document.cookie = ${key}=${value}
// }
// },
// getCookie: function (key) {
// // ...
// }
// })
// 使用我們擴(kuò)展的方法去設(shè)置 cookie
// $.setCookie('a', 100)
// $.setCookie('b', 200, 10)
// 2. 擴(kuò)展給元素集合
// 擴(kuò)展一個(gè)全選的方法
// 方法以執(zhí)行, 就能讓 input checkbox 變成選中狀態(tài)或者不選中狀態(tài)
$.fn.extend({
selectAll: function (type = true) {
// type 就是你傳遞進(jìn)來的選中或者不選中一個(gè)標(biāo)志
// 你不傳遞的時(shí)候, 我默認(rèn)是 true, 你傳遞了就用你傳遞的
// console.log(this) // 就是你調(diào)用的時(shí)候前面的哪個(gè)元素集合
this.each(function (index, item) {
// 讓元素集合中的每一個(gè) input 的 checked 屬性為 true
item.checked = type
})
// return 這個(gè)元素集合, 達(dá)到一個(gè)鏈?zhǔn)骄幊痰男Ч?br />
return this
}
})
$('button').click(() => {
// 讓所有 input 框變成選中狀態(tài)
console.log($('input').selectAll().attr('hello', 'world'))
})
十八 jQuery 的拷貝對(duì)象問題
$.extend() 深拷貝 與 淺拷貝
傳遞一個(gè)對(duì)象的時(shí)候, 可以做到插件擴(kuò)展機(jī)制
傳遞多個(gè)對(duì)象的時(shí)候, 可以將后面幾個(gè)對(duì)象的內(nèi)容復(fù)制到第一個(gè)對(duì)象里面
語法:
$.extend(是否深拷貝, 對(duì)象1, 對(duì)象2, 對(duì)象3, ...)
是否深拷貝: 默認(rèn)是 false, 可以不寫
從 對(duì)象2 開始, 后面所有對(duì)象的內(nèi)容都會(huì)被拷貝到 對(duì)象1 里面
再拷貝的時(shí)候, 如果有重復(fù)的 key, 那么以寫在后面的為準(zhǔn)(后來者居上)
十九 jQuery 的插件
基于 jQuery 使用的, 別人封裝好的插件
我們拿來使用就可以了, 前提就是要有 jQuery
例子 一個(gè)叫做 jquery-validate 的插件
專門用來做表單驗(yàn)證的
你輸入的內(nèi)容是不是符合規(guī)則
下載
引入文件
去復(fù)制粘貼
<!-- 引入文件 --> <!-- 注意: 先引入 jQuery, 后引入 jquery-validate --> <script src="./jquery/jquery.min.js"></script> <!-- jquery-validate 這個(gè)文件依賴的 jquery --> <script src="./jquery-validate/jquery.validate.min.js"></script> <!-- 引入中文信息提示包, 必須在 jquery-validate 的后面 --> <script src="./jquery-validate/localization/messages_zh.min.js"></script> <script>
// 選擇到你要驗(yàn)證的表單的 form 標(biāo)簽
// 執(zhí)行 validate 方法
// {} 里面就寫我們的驗(yàn)證規(guī)則
$('#login').validate({
// 你需要的驗(yàn)證規(guī)則
rules: {
// key 就是你要驗(yàn)證的哪個(gè) input 框的 name 屬性
username: 'required', // 用戶名必填
password: { // 一個(gè)字段可以寫多個(gè)驗(yàn)證方式
required: true,
minlength: 6, // 最少是六個(gè)
maxlength: 12, // 最多十二個(gè)
}
},
// 你自定義提示的文本內(nèi)容
messages: {
// key 就是你驗(yàn)證的哪個(gè) input 框的 name 屬性
username: '請(qǐng)輸入用戶名! ^_^',
password: {
required: '請(qǐng)輸入密碼!',
minlength: '最少要輸入 6 個(gè)字符噢!'
}
},
// 表單的提交事件
// 這個(gè)函數(shù)會(huì)在表單驗(yàn)證通過以后執(zhí)行
submitHandler: function (form) {
// form 接收的就是你的 form 標(biāo)簽
// console.log(form)
// console.log('表單驗(yàn)證通過了, 我需要使用 ajax 去提交數(shù)據(jù)了')
// 有一個(gè) jQuery 的方法
// serialize() 快速獲取表單輸入的數(shù)據(jù)
// $(form).serialize() 就能拿到這個(gè) form 標(biāo)簽里面的表單數(shù)據(jù)
// console.log($(form).serialize()) // username=admin&password=123456
// 發(fā)送請(qǐng)求到后端
$.post('./server/login.php', $(form).serialize(), res => {
console.log(res)
}, 'json')
}
})
————————————————不管是做 UI 設(shè)計(jì)還是畫插畫，有很多同學(xué)覺得自己是因?yàn)樘熨x不夠所以對(duì)色彩的敏感度不夠，其實(shí)不然。一個(gè)可能是大家總結(jié)的太少，從來都是憑感覺和運(yùn)氣去配色，但配色都是有講究的。本文不會(huì)給大家重復(fù)講解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，這些大家都可以從網(wǎng)上直接搜到。我今天要給大家分享的是人們是如何認(rèn)識(shí)色彩，并且在產(chǎn)品設(shè)計(jì)中使用的。
大家都知道，對(duì)于不同的顏色，我們對(duì)其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道眼睛內(nèi)存在兩種感光細(xì)胞：視錐細(xì)胞和視桿細(xì)胞，視桿細(xì)胞能夠感知光線強(qiáng)弱但無法感知顏色，而視錐細(xì)胞卻相反，視錐細(xì)胞內(nèi)還有 3 種對(duì)不同頻率光敏感的細(xì)胞。我們經(jīng)常會(huì)用到視錐細(xì)胞，而視桿細(xì)胞卻用的少，更多的是在黑暗的環(huán)境中使用的多。
視錐細(xì)胞的三種類型分別是低頻、中頻和高頻視錐細(xì)胞，分別對(duì)紅、綠、藍(lán)三種顏色的光敏感。而且這三個(gè)視錐細(xì)胞分別也有重合的部分。低頻視錐細(xì)胞對(duì)整個(gè)可見光頻譜都敏感，它的范圍包含的比較廣，特別是對(duì)于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍(lán)視錐細(xì)胞可以感知。
大家在平時(shí)生活中都能看到，在馬路上、機(jī)動(dòng)車道上以及一些警示牌都會(huì)采用黃色、橙色等標(biāo)識(shí)，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識(shí)用的是冷色調(diào)那這個(gè)交通事故可能要發(fā)生的頻繁得多。
1. 人對(duì)色彩邊緣的對(duì)比更加敏感
我們來做個(gè)實(shí)驗(yàn)，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會(huì)覺得是個(gè)漸變色，但其實(shí)它就是一個(gè)純色，不信的同學(xué)可以自己在工具中嘗試一下。
但如果你把這個(gè)色塊拿出來后，不在這個(gè)環(huán)境中直接進(jìn)行邊緣對(duì)比，那就不會(huì)出現(xiàn)漸變的情況了。光說原理，我們也來看一下在產(chǎn)品設(shè)計(jì)中需要注意的地方，因?yàn)樵?UI 界面設(shè)計(jì)中我們通常需要把一些圖片、卡片疊加放置，這樣就會(huì)造成邊緣視覺的對(duì)比，本來不明顯的兩個(gè)元素重疊之后變的很明顯，例如一些標(biāo)簽的背景色和頁面整體的背景色。
如果你想要讓兩個(gè)顏色接近的元素具有識(shí)別度，那么最好將這兩個(gè)元素進(jìn)行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設(shè)計(jì)，背景色一定不要過于灰暗也不要過于淺白，過于深的話會(huì)讓卡片輪廓過于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對(duì)比，顯得不自然和舒適。如果過于淺的話也會(huì)導(dǎo)致信息的不聚焦。
還有，為什么被框起來的文字會(huì)看上去更加有點(diǎn)擊的欲望其實(shí)也是這個(gè)道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號(hào)。當(dāng)它被賦予顏色之后，我們才會(huì)意識(shí)到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個(gè)感覺，我們才用了線框、背景色、箭頭等方式。
1. 加深品牌印象與品牌感
一般來說，產(chǎn)品都會(huì)有一個(gè)品牌的主色。而這個(gè)品牌的主色也通常會(huì)運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫?、有趣、好玩的特性，無論是線上還是線下都使用了這個(gè)品牌黃色，從每一個(gè)線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產(chǎn)品進(jìn)行通用。例如之前的嚴(yán)選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的，所以在線上的界面用起來會(huì)非常不和諧，和整體偏淺色、輕的風(fēng)格對(duì)比起來太強(qiáng)烈，引起不適。
而且線上覺得還不錯(cuò)的顏色，由于印刷的原理，實(shí)物也會(huì)更加偏低飽和和偏暗。
2. 引導(dǎo)用戶視覺凹增加易讀性
我們在《如何有理有據(jù)做設(shè)計(jì)，而不是憑感覺？》里提到了人們?nèi)绾伍喿x信息，提到了一個(gè)視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會(huì)需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會(huì)使用色彩。例如下方產(chǎn)品，使用了高亮色來引導(dǎo)用戶視覺。
當(dāng)然色彩的運(yùn)用也會(huì)將整個(gè)頁面的層級(jí)凸顯出來，而不單純的用中性色來區(qū)分層級(jí)。
3. 區(qū)分信息交互的狀態(tài)
同樣是上兩張圖，大家可以清晰的看到，美團(tuán)中的附近熱賣好點(diǎn)、滿減標(biāo)簽、價(jià)格，其實(shí)都只具備信息的呈現(xiàn)，但不具備交互的特征和狀態(tài)。但淘票票中的「4.7萬」和「展開」卻不一樣，「展開」使用了輔助藍(lán)色，這里的展開就具備這個(gè)文案所描述的這個(gè)控件具備的交互特性──點(diǎn)擊后將隱藏的文字展示出來。藍(lán)色一般我們都會(huì)使用在某個(gè)可點(diǎn)的鏈接上，當(dāng)然也會(huì)有其他的色彩來表示可點(diǎn)擊。
所以不是所有的元素都要賦予顏色，這樣會(huì)使整個(gè)頁面非?；靵y。
另外，UI 設(shè)計(jì)中主色除了引導(dǎo)用戶的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛奇藝 app 中播放詳情頁面，當(dāng)前版塊標(biāo)簽和正在播放劇集的激活狀態(tài)。
4. 營造氛圍傳遞熱度
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多 2c 的產(chǎn)品往往會(huì)在界面氛圍的營造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁營銷版塊的瓷片區(qū)域都會(huì)用品牌色在活動(dòng)時(shí)段內(nèi)進(jìn)行氛圍打造。
在色彩的心理學(xué)上，大家都知道每個(gè)顏色具有一定的性格特征和表達(dá)。而且都會(huì)有正反兩面，可以看下方多種色彩的描述。
然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會(huì)有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒什么關(guān)系的顏色。
在瑞幸剛出來的時(shí)候，很多人其實(shí)不太習(xí)慣把這個(gè)藍(lán)色和咖啡結(jié)合起來，但是為了塑造品牌差異化，瑞幸一直將「藍(lán)色」作為品牌的主基調(diào)，「小藍(lán)杯」這一稱呼不但讓消費(fèi)者感到親切，也在眾多的咖啡中有了屬于自己的記憶點(diǎn)。在這支廣告片中，主基調(diào)同樣是使用藍(lán)色，不但符合了當(dāng)下消費(fèi)者的視覺偏好，也在為用戶留下記憶點(diǎn)之后，讓用戶在看到藍(lán)色時(shí)自然而然地想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
高飽和度的色彩
高飽和度的色彩，會(huì)讓人產(chǎn)生「幻覺」！讓人產(chǎn)生視覺疲勞，例如我將餓了么這個(gè)界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。
灰部使用過多的配色
為什么很多時(shí)候我們總覺得界面臟兮兮的。是因?yàn)槲覀冊诮缑婊蛘吲渖惺褂昧诉^多的低飽和度、灰度較多的配色，所以這也是要避免的。
沒有規(guī)律且過多的配色
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。
熒光色
熒光色絕對(duì)不可以使用在 UI 界面中，尤其是主色。
太輕柔的顏色
在很多 dribbble 的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點(diǎn)且輕飄飄的感覺。
現(xiàn)在很火的新擬物化設(shè)計(jì)
說真的，這樣的風(fēng)格確實(shí)耳目一新，但個(gè)人覺得可能不會(huì)成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識(shí)別性很差。且不談色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合，感覺就是得了「白內(nèi)障」。另外我們常說的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒有強(qiáng)調(diào)，這樣的風(fēng)格在每一個(gè)元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺。
為了營造這樣的「新擬物」的輕量氛圍，還不得不在整個(gè)界面中簡化大部分元素，能不加文字就不能加文字。有一句話一直非常影響我做設(shè)計(jì)：「設(shè)計(jì)是需要被簡化的，但是簡化的過程一定不簡單」。所以不是單純的簡化所有元素為了達(dá)到這個(gè)風(fēng)格的目的。
不要將對(duì)抗色重疊
例如下方，兩種對(duì)抗色重疊后會(huì)引起視覺閃爍的感覺。
1. 定義主色
首先我們必須要說，色彩肯定是需要結(jié)合產(chǎn)品和用戶的定位去指定和提煉的，所以前期會(huì)需要去做一些研究，例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類「真實(shí)的虛擬用戶」，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面提到的坑，并且對(duì)市面上的 app 進(jìn)行總結(jié)，我們發(fā)現(xiàn)大部分的產(chǎn)品色，簡單來講在我們 HSB 模式中取色都在一個(gè)固定的范圍，就像這樣。
在上文中也說到用色比例的 631 法則，所以在選取輔助色的時(shí)候我們需要定義好輔助色可以用在什么地方。例如知乎，其實(shí)輔助色沒有非常明顯的一種或者兩種，都是多色的輔助色方案，都在一個(gè)配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略，一個(gè)主色搭配多個(gè)輔色，如果有其他獨(dú)立的板塊可能需要重新定義專屬的配色策略。
2. 定義中性色
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對(duì)比，顯示層級(jí)，那么通常給 2-3 種層級(jí)即可，至少 2 種，至多 3 種。在選擇 3 個(gè)層次的中性色文字時(shí)，給大家一個(gè)建議：標(biāo)題/正文文字顏色 HSB 的 B 值不要大于 20，備注和次要文字 b 值不要大于 50，默認(rèn)文字不要大于 80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：優(yōu)設(shè) 作者：應(yīng)俊
廣告圈「門檻低」、「是個(gè)人都能做」，這種印象可能來源于，世界上最出名的廣告公司之一——奧美的創(chuàng)始人，他是個(gè)廚師。除了當(dāng)過廚師，還做過推銷員，調(diào)查員，政治秘書，還種過幾年地，最后成了 1960 年代，極負(fù)盛名
1914 年夏天，一戰(zhàn)爆發(fā)了。在倫敦郊區(qū)的薩里郡，一個(gè)商人正臉色凝重坐在椅上發(fā)呆。他破產(chǎn)了，戰(zhàn)爭將一切都化為烏有，這對(duì)商人的兒子而言，意味著再也吃不到冰淇淋了。這個(gè)孩子剛滿 3 歲，名字叫大衛(wèi)·奧格威。
作為英格蘭的名門望族，奧格威一家都不是吃素的。父親和兄弟是名人，爺爺是富商。所以即使破產(chǎn)了，奧格威也能上貴族學(xué)校，先后受教于艾丁堡斐特思公學(xué)及牛津大學(xué)，成為眾人眼中的「明日之星」。
然而他并沒有畢業(yè)，他用自己的行動(dòng)證明了自己是個(gè)弟弟，兩年的大學(xué)時(shí)光，奧格威逢考必掛，最后被牛津大學(xué)掃地出門。他既沒有文憑，也沒有錢，索性在美琪飯店當(dāng)起了實(shí)習(xí)廚師。
憑著天生的聰明才智，奧格威很快在美琪飯店混得風(fēng)生水起。1932 年，一個(gè)月黑風(fēng)高的晚上，法國總統(tǒng)保羅·杜梅像往常一樣，來到了飯店享用晚餐，當(dāng)吃到奧格威做的一款甜品后，不自覺地發(fā)出了由衷的贊嘆：「C’est bon！」（法語：好吃死了?。?
三周后，杜梅總統(tǒng)就死了，當(dāng)然這不是因?yàn)槌粤藠W格威的甜點(diǎn)，而是吃了一個(gè)蘇聯(lián)人的子彈。
面對(duì)悶熱的后廚，繁重的工作壓力，讓奧格威苦不堪言。奧格威選擇結(jié)束了廚師生涯，回到了英國推銷起了爐具，這個(gè)爐灶，就是鼎鼎大名的 AGA（雅家）。2015 年 3 月，AGA 曾在北京舉辦過一場發(fā)布會(huì)，現(xiàn)場一套藍(lán)色 AGA TC 爐灶售價(jià)人民幣 28 萬元。
每天出入飯店、古堡、修道院的奧格威，業(yè)績月月拿銷冠，公司還委托他寫了一本銷售手冊。奧格威當(dāng)時(shí)甚至想過把「如何將爐具賣給盲人主婦」這些細(xì)節(jié)也寫下來，這份推銷書后來被《財(cái)富》稱為「有史以來最好的銷售手冊」。
1936 年，他的哥哥為他在倫敦一家廣告公司謀得實(shí)習(xí)的機(jī)會(huì)。此時(shí)的奧格威還是個(gè)廣告菜鳥。他的創(chuàng)作「秘訣」，是從芝加哥訂購一份美國剪報(bào)，挑選好廣告一字不落抄襲，然后提交給他的英國客戶。
由于表現(xiàn)出色，公司決定送他到國外學(xué)習(xí)美國廣告技術(shù)，為時(shí)一年。這一年，他收獲頗豐，不僅學(xué)業(yè)有成，而且邂逅了 18 歲的女學(xué)生。二戰(zhàn)爆發(fā)的那一年，他們喜結(jié)連理。
△ 奧格威和他太太合照
1938 年，奧格威移居美國，在蓋洛普咨詢公司任研究員，為好萊塢制片商做民意調(diào)查。天賦異稟的奧格威能在開拍前預(yù)測出電影的票房，誤差<10%。一時(shí)間迪士尼、華納、米高梅紛紛上門求合作。
△ 在街頭做民意調(diào)查的奧格威
1939 年 9 月，二戰(zhàn)爆發(fā)，次年法國淪陷。憑借數(shù)據(jù)領(lǐng)域的造詣，奧格威受邀加入英國情報(bào)機(jī)構(gòu)，出任英國駐美使館二秘。戰(zhàn)后他辭去了公務(wù)員工作，做起了農(nóng)民，農(nóng)作物是大煙。奧格威甚至迷上了這段采菊東籬下的農(nóng)耕日子，但他深知自己無法以務(wù)農(nóng)為生。
于是 1948 年，奧格威回到紐約，用 6000 美刀創(chuàng)辦了自己的公司，取名「奧美廣告」。在麥迪遜大街貼出一個(gè)別出心裁的招聘海報(bào)，上面?zhèn)鬟_(dá)了三點(diǎn)內(nèi)容：
至此，奧美廣告公司正式成立。算上奧格威共兩名員工，整天大眼瞪小眼。為了活下去，奧格威接了當(dāng)時(shí)能夠接到的所有訂單。包括一個(gè)毫不知名的小制衣廠哈撒韋。當(dāng)時(shí)他們告訴奧格威，只有 3 萬美元預(yù)算，卻想和知名襯衣品牌競爭。
當(dāng)時(shí)奧格威都快哭了。預(yù)算少要求極高，還不因?yàn)樾Ч饧s。但誰讓他叫大衛(wèi)呢，過人的天賦讓他的廣告在全國走紅，僅用 3 萬美元，讓銷售額翻了三番。使這家默默無聞了 100 多年的襯衫品牌，一夜之間聞名全國。更令人無法想象的是，這個(gè)創(chuàng)意被沿用了 25 年。
廣告為產(chǎn)品增添了來自遠(yuǎn)方的神秘感，激發(fā)讀者對(duì)狂野的無限遐想?！競鬟_(dá)一種特別的信息以取悅讀者」。這本來是奧格威準(zhǔn)備的 18 個(gè)方案中被否決的一個(gè)，但他想，給其中一只眼睛戴個(gè)眼罩也無妨，于是在影棚的路上買了個(gè)眼罩交給模特。
隨后，勞斯萊斯花了 5 萬美元找奧格威做的一支廣告再次成為經(jīng)典，在時(shí)速 60 英里時(shí)，這輛新款勞斯萊斯車內(nèi)最大的噪聲，來自它的電子鐘。不用多說了，時(shí)至今日這依然是最有名的汽車廣告之一。這些廣告讓奧美的名聲如日中天，贏得客戶如探囊取物。
后來廣告界盛傳，說奧格威是一個(gè)奇才，好幾家大廣告公司都提出收購意向時(shí)，奧格威卻回絕了。多年后他回憶，如果當(dāng)時(shí)誘他以金錢，他肯定就屈服了，但他們卻以為奧格威在乎的是「創(chuàng)作的挑戰(zhàn)」。
與其說創(chuàng)作是一種挑戰(zhàn)，還不如說是一種依據(jù)特定原則的模式生產(chǎn)，他甚至禁止員工使用「創(chuàng)作」形容他們的工作。因?yàn)樵趭W格威看來，好的廣告是「99% 的調(diào)查研究+ 1% 的靈感」。例如奧格威發(fā)現(xiàn)標(biāo)題加入感情色彩的詞可強(qiáng)化廣告效果，經(jīng)過幾百個(gè)詞的測試，「Darling」（親愛的）一詞高居榜首。于是他將它運(yùn)用到多芬的廣告，后來多芬成為了同類產(chǎn)品中最暢銷的品牌。不久奧格威表示，他并不知道洗澡時(shí)使用電話是危險(xiǎn)的。
奧格威出生名門，卻家道中落，是牛津的明星，卻被掃地出門，他為法國總統(tǒng)下過廚，也給國王當(dāng)過特工。他對(duì)市場一無所知，從未寫過一篇文案，直至 38 歲尚未正式涉足廣告業(yè)，口袋只有區(qū)區(qū)的 6000 美元原始資金……但 3 年之后，這個(gè)一度黯淡的男人已在行業(yè)發(fā)光發(fā)熱，猶如創(chuàng)造了一個(gè)奇跡。
1963 年，奧格威著書《一個(gè)廣告人的自白》?？梢哉f奧格威是一個(gè)超越了時(shí)代的牛人，他里面的一些理論，對(duì)我們現(xiàn)在做電商一點(diǎn)都不過時(shí)，有興趣的小伙伴可以買一本看看。
奧格威憑借他獨(dú)特的人格特征和灑脫的世界觀征服了許多人，那么他的魅力到底在哪，不妨讓我們走進(jìn)他的思想世界，親身領(lǐng)略一番這個(gè)奧美開山鼻祖的風(fēng)采。
1973 年，奧格威正式退休。他在童話般美麗的法國多佛，買下一座 700 年歷史的古堡，過起了隱居生活。從那時(shí)起，路過的游客們，時(shí)?？吹竭@樣一幅畫面：一個(gè)晴天的午后，陽光透過一棵 17 世紀(jì)的冬青樹，將星星點(diǎn)點(diǎn)遍灑小徑。小徑的一旁，一個(gè)衣衫襤褸的老頭兒，正在仔細(xì)地修剪玫瑰花枝。老頭兒的嘴里碎碎地念叨著：「終于，可以安心做個(gè)農(nóng)民咯~」
在他的廣告帝國之中，他的影響力深廣依舊，直至 1999 年最終逝去。奧格威的故事到這就結(jié)束了，而離新的篇章，奧美中國的故事也并不遙遠(yuǎn)了。
讓我們把時(shí)間撥回到 1979 年，彼時(shí)隨著改革開放的深入，《文匯報(bào)》宣布了商業(yè)廣告的正式回歸。奧美廣告快速響應(yīng)政策的變化，于同年推出中國大陸地區(qū)的第一支作品——雷達(dá)表廣告正式出道。如今再提起雷達(dá)表，相信很多 60、70 后依然對(duì)當(dāng)年那則「轟動(dòng)」的老廣告印象深刻。
1997 奧美中國在華推出大眾桑塔納，這款車型很快紅遍大江南北。當(dāng)時(shí)的廣告語「擁有桑塔納，走遍天下都不怕」使用了近十年。在 1978 年年底，中國改革剛剛拉開嶄新的序幕，當(dāng)時(shí)的德國大眾是唯一既愿意提供技術(shù)，又肯投入資金的汽車公司，可以說大眾陪伴中國人從貧窮走向富裕，國人對(duì)著大眾品牌有著不同的感情。
再把時(shí)間軸往后撥一下，來到千禧年的后 4 年，2004 年「我的地盤聽我的」成為了年輕人最潮流、最個(gè)性的語言之一，奧美為中國移動(dòng)「動(dòng)感地帶」所做的數(shù)字營銷戰(zhàn)，為奧美中國贏得了第一座戛納國際創(chuàng)意節(jié)獅子獎(jiǎng)杯。
作為客戶品牌，「動(dòng)感地帶」并不是中國移動(dòng)的第一個(gè)品牌，早在「動(dòng)感地帶」之前，「全球通」和「神州行」兩大品牌早已存在，可以說，中國移動(dòng)當(dāng)時(shí)非常精準(zhǔn)地找到了年輕人這個(gè)用戶群體。在「動(dòng)感地帶」推出的第一年，中國移動(dòng)就快速發(fā)展了 1000 萬「動(dòng)感地帶」用戶。
在 2011 年，大衛(wèi)·奧格威迎來百歲誕辰，奧美進(jìn)駐中國 20 周年，作為創(chuàng)始人的奧格威應(yīng)該十分欣慰。而在 2012 年奧美中國憑借 「可樂手」在戛納國際廣告節(jié)首次斬獲奧美亞太區(qū)首個(gè)「全場大獎(jiǎng)」。
這個(gè)新穎的平面設(shè)計(jì)是可口可樂公司「快樂暢開」?fàn)I銷活動(dòng)的環(huán)節(jié)?！缚鞓窌抽_」旨在為全世界人們的生活帶來歡笑和快樂。這個(gè)標(biāo)新立異的設(shè)計(jì)清晰地傳達(dá)了分享的概念。整個(gè)視覺表達(dá)僅僅由兩個(gè)顯而易見的獨(dú)特元素組成：「動(dòng)感飄舞的絲帶」和「經(jīng)典曲線瓶」， 它們都是可口可樂全球使用的商標(biāo)元素。
不得不羨煞旁人的是，這個(gè)廣告是一個(gè) 20 歲仍在設(shè)計(jì)學(xué)校念書的香港設(shè)計(jì)師完成的。
奧美中國的故事也差不多完結(jié)了，最后放一些我收集的奧美廣告，或許里面的 idea 會(huì)讓你拍案叫絕。
由香港奧美公司為肯德基制作的平面廣告，利用雞翅的外形和火焰聯(lián)系起來，用視覺暗喻突出肯德基雞翅的熱，辣的賣點(diǎn)。
由泰國奧美公司為樂高制作的平面廣告，小孩通過玩樂高玩具拼湊自己的夢想。
由巴西奧美公司為 Petz 創(chuàng)建的平面廣告，寵物可以成為一個(gè)很好的伴侶，去傾聽主人的說話。
Amnesty International，德國奧美公司為國際特赦組織制作的平面廣告，難民看窗外的景象像在看電視一樣，我們可以關(guān)掉它，但他們不能。
德國奧美公司為海洋守護(hù)者協(xié)會(huì)制作的平面廣告，塑料垃圾正在淹沒我們的海洋，他們吃什么你就吃什么。
美國奧美公司為海明威基金會(huì)制作的平面廣告，再現(xiàn)了書本里的故事，《老人與?！?、《死在午后》。
印度奧美公司為曼妥思公司制作的平面廣告，惡魔附身都被酸得逃之夭夭。
法國奧美公司為可口可樂公司制作的戶外廣告，兩只手的負(fù)空間形成了可口可樂最經(jīng)典的曲線瓶。
由印度奧美公司為世界自然基金會(huì)制作的平面廣告，利用樹的外輪廓，拼湊出三只可愛的小動(dòng)物，樹木拯救野生動(dòng)物，野生動(dòng)物拯救樹木。
日本奧美為 ADOT 制作的平面廣告，語言可以消滅戰(zhàn)爭。
泰國奧美公司為 Poly-Brite 制作的印刷廣告，高吸水性抹布，強(qiáng)調(diào)產(chǎn)品的賣點(diǎn)。
由泰國奧美公司為樂高制作的平面廣告，對(duì)于任何大小的想象。
奧美中國為 Saky 設(shè)計(jì)的平面廣告，刮掉頑固食物。
越南奧美為世界自然基金會(huì)制作的平面廣告，犀牛角和人的指甲是完全一樣的材料，還想要嗎？
由巴西奧美為克拉羅制作的平面廣告，只需要一個(gè)字母就能造成車禍，請(qǐng)不要開車發(fā)信息。
文章來源：優(yōu)設(shè) 作者：研習(xí)社
在頁面導(dǎo)航欄中，常會(huì)見到返回、取消與關(guān)閉三者按鈕。許多同學(xué)會(huì)弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。
先拋開圖標(biāo)，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語境里，就單看「返回」和「關(guān)閉」這兩個(gè)詞，你首先會(huì)想到什么呢？
當(dāng)我這么去問自己的時(shí)候，腦子里出現(xiàn)的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯(cuò)路了，需要原路返回；公司復(fù)工了，我要返程回去?；蛘撸X時(shí)間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機(jī)關(guān)掉，等等。
如果仔細(xì)去想的話就會(huì)意識(shí)到，語義衍生出來的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗(yàn)和對(duì)世界的認(rèn)知。產(chǎn)品中使用的各種語言，不管是文字也好，或者圖標(biāo)圖形也罷，一直都是以我們對(duì)它最本能的理解為基礎(chǔ)的。所以只要你聯(lián)想自己對(duì)「返回」和「關(guān)閉」的看法，就能知道它應(yīng)該在什么樣的產(chǎn)品情境中出現(xiàn)，以及它為什么會(huì)出現(xiàn)。
于是，很自然的，我們會(huì)把「返回」和「路徑」聯(lián)系在一起，所以「返回」在導(dǎo)航設(shè)計(jì)中不可或缺。并且「返」也預(yù)示著我們會(huì)回到之前的路徑節(jié)點(diǎn)，整個(gè)過程是連續(xù)性的，不被切斷的。而「關(guān)閉」就完全不一樣了，它一般和我們的動(dòng)作有關(guān)，是一個(gè)短暫性的操作，相比返回也顯得更為獨(dú)立。
根據(jù)我們對(duì)語義的判斷，再結(jié)合實(shí)際產(chǎn)品中「返回」的場景，我們可以概括出「返回」和「關(guān)閉」的特征差異。
1. 返回
連續(xù)性：按照產(chǎn)品的頁面層級(jí)順次跳轉(zhuǎn)。但存在特殊情況，因?yàn)橛行┊a(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級(jí)已經(jīng)做了一定的優(yōu)化，所以返回不一定會(huì)按原來的路徑回去，可能會(huì)按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂歌曲播放頁進(jìn)入直播后返回不是到播放頁。
整體性：在產(chǎn)品功能頁面關(guān)聯(lián)性較強(qiáng)的功能中，「返回」需要連接各個(gè)頁面與層級(jí)之間的架構(gòu)關(guān)系，因此「返回」作為操作節(jié)點(diǎn)，可以幫助產(chǎn)品功能的各個(gè)頁面之間建立聯(lián)系，維持產(chǎn)品的整體性。
2. 關(guān)閉
非連續(xù)性：用于產(chǎn)品中的臨時(shí)內(nèi)容或臨時(shí)動(dòng)作，比如彈窗或活動(dòng)頁，與上一級(jí)頁面沒有直接關(guān)系。
獨(dú)立性：非產(chǎn)品原生內(nèi)容或是產(chǎn)品內(nèi)的獨(dú)立內(nèi)容。比如小程序、瀏覽器標(biāo)簽等。
3. 返回和關(guān)閉的使用場景
知道了返回和關(guān)閉的特征后，我們可以從兩者的使用角度上再去梳理一下。
現(xiàn)在產(chǎn)品中關(guān)于返回和關(guān)閉有三種狀態(tài)：
1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場景。
3 的情況會(huì)有特殊性，因?yàn)樗瑫r(shí)具有返回和關(guān)閉這兩種看起來相矛盾的特性。其實(shí)這是由內(nèi)容決定的，當(dāng)內(nèi)容同時(shí)具有獨(dú)立性和整體性時(shí)，就需要支持兩種操作。如小程序可以作為一個(gè)獨(dú)立功能，但其本身又可以看作是一個(gè)完整的小產(chǎn)品，具有自己的頁面結(jié)構(gòu)和頁面層級(jí)。所以小程序?qū)τ谒鶎俚漠a(chǎn)品，我們有關(guān)閉的需要，小程序內(nèi)的頁面導(dǎo)航又需要返回來實(shí)現(xiàn)。
除此之外，產(chǎn)品可能開始只有返回，后面臨時(shí)出現(xiàn)關(guān)閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢」和「7×24 小時(shí)疫情快訊」后會(huì)出現(xiàn)關(guān)閉功能（幫助用戶快速退出）。
這里我們可以從連續(xù)性和非連續(xù)性的角度看，產(chǎn)品針對(duì)具有復(fù)雜層級(jí)和內(nèi)容的頁面設(shè)計(jì)了順次（返回）和跳頁（關(guān)閉）的導(dǎo)航方式，其中關(guān)閉隨實(shí)際情境出現(xiàn)。以此為用戶提供了更為靈活的導(dǎo)航路徑，來同時(shí)滿足用戶逐級(jí)深入、連續(xù)返回瀏覽和選擇性查看、臨時(shí)關(guān)閉的需求。
針對(duì)于「關(guān)閉」，它和「取消」會(huì)有重疊的含義，所以有時(shí)并不能很好地去區(qū)分這兩個(gè)功能表達(dá)的應(yīng)用場景。于是，我們可以借用之前的方式，先把「取消」單獨(dú)拿出來理解。
一般來說，「取消」意味著行為過程中，還有后續(xù)行為，整個(gè)過程沒有完成，當(dāng)下后悔了，因此取消了當(dāng)前操作。它更傾向于表達(dá)我們主動(dòng)去做了什么改變，然后中途放棄了。
比如，想煮個(gè)飯，于是下了米，倒了水，定時(shí)，確認(rèn)（取消），完成（關(guān)閉）。
這時(shí)候中間如果突然不想煮飯了，在定時(shí)之后，就停止當(dāng)前行為，那就是取消。但點(diǎn)了確認(rèn)并完成煮飯之后，這個(gè)行為就結(jié)束了，只能關(guān)閉。因此，它們之間就是行為上的差異。
就好比，打開微信公眾號(hào)文章，內(nèi)容已經(jīng)加載出來，行為已經(jīng)產(chǎn)生并結(jié)束，這時(shí)候左上角就一定是關(guān)閉。而發(fā)朋友圈的時(shí)候，左上角是取消，那是因?yàn)樾袨檫^程還在繼續(xù)，沒有發(fā)布，所以可以取消。而發(fā)布之后，就無法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁面，左上角最好是使用「取消」。
當(dāng)我們對(duì)詞的含義有了進(jìn)一步思考后，就可以去看它們在產(chǎn)品中的表現(xiàn)了。
比如廣告的關(guān)閉、推薦內(nèi)容的關(guān)閉。都是產(chǎn)品自身提供的內(nèi)容，用戶不想看到就選擇關(guān)掉了，沒有試圖去改變什么。
包括內(nèi)容頁面，或者活動(dòng)頁面，被點(diǎn)開，且加載完成呈現(xiàn)出來之后，這個(gè)行為就結(jié)束了，沒有取消的概念，只有關(guān)閉。
再比如，選擇圖片文件時(shí)的取消，微信發(fā)朋友圈、微博發(fā)帖時(shí)的取消等等，我們能發(fā)現(xiàn)都是用戶主動(dòng)采取了什么措施，但是又后悔了所以選擇取消。
或者如游戲設(shè)置，就不適合用關(guān)閉，會(huì)讓用戶在理解上產(chǎn)在歧義，比如用戶設(shè)置到一半，不想設(shè)置了，那現(xiàn)在關(guān)閉的話，設(shè)置是生效了么？所以用取消會(huì)更合適。
這些時(shí)候，不存在關(guān)閉的概念，因?yàn)闆]有內(nèi)容可以關(guān)閉，只能是取消當(dāng)前行為。如果使用關(guān)閉，與該場景下的用戶行為不符，反而增加了用戶對(duì)文案的理解成本。
簡單來說，取消強(qiáng)調(diào)的是放棄改變，關(guān)閉強(qiáng)調(diào)的就只是抉擇。
不過這里也有一個(gè)特殊例子，就是，微信公眾號(hào)文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？
在一些特殊場景之下，「關(guān)閉」是包含「取消」的。
好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級(jí)，如果在過程中不想繼續(xù)了，拔掉電源就是完全關(guān)閉了，但同時(shí)這個(gè)行為也包含了人不想繼續(xù)煮飯這個(gè)行為，想取消掉了，所以這時(shí)候關(guān)閉是包含取消的。它跟文章加載完成，已經(jīng)呈現(xiàn)出來，是不一樣的。
而上面這個(gè)微信與釘釘?shù)睦樱痛嬖谶@種包含關(guān)系。比如，內(nèi)容已經(jīng)加載完，要分享給好友，這時(shí)候加載出來的好友列表已經(jīng)出現(xiàn)，只是選擇發(fā)送給誰的問題，用戶可以關(guān)閉已經(jīng)加載完成的好友列表頁面，或者理解為用戶打算取消當(dāng)前行為。
不過這樣的設(shè)計(jì)并不建議大家將其定義為關(guān)閉，因?yàn)楫吘剐袨檫€在繼續(xù)，使用取消反而更容易理解也更符合場景定義。
譬如，PC 的彈窗經(jīng)常會(huì)同時(shí)出現(xiàn)叉（指代關(guān)閉）和取消，雖然操作的結(jié)果都是使彈窗消失，但是用戶的操作目標(biāo)是不一樣的，事實(shí)上這里提供了兩種選擇，即我不想做決定，我要關(guān)掉彈窗，以及我決定現(xiàn)在不這么做，我要取消這個(gè)動(dòng)作，這里的關(guān)閉其實(shí)就暗含了取消的動(dòng)作。
在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權(quán)，以滿足他們對(duì)功能的不同期待。而在移動(dòng)端，我們需要?jiǎng)h減或合并功能，所以當(dāng)用戶同時(shí)產(chǎn)生重疊的訴求時(shí)，我們往往會(huì)選擇當(dāng)下最符合用戶心境的功能，這是「場景細(xì)化」的結(jié)果。這也能解釋為什么現(xiàn)在很多 PC 產(chǎn)品的彈窗中也只會(huì)保留取消，而不提供叉（指代關(guān)閉）的選擇。因?yàn)橛脩裘鎸?duì)功能不知所措、不做決定的情況已經(jīng)越來越少，更多的用戶已經(jīng)明確地知道自己應(yīng)該怎么做。
這就是「取消」和「關(guān)閉」的差異，以及移動(dòng)產(chǎn)品對(duì)兩者的取舍的根本原因。
同樣的，有一些頁面，取消和關(guān)閉都會(huì)用叉的圖標(biāo)來表示，只是在不同情境中，這個(gè)叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點(diǎn)跟上述內(nèi)容相同。
返回、取消和關(guān)閉看起來簡單，深入分析后又顯得復(fù)雜，但相對(duì)復(fù)雜的分析都只是為了能簡單地去運(yùn)用。在這個(gè)問題中，每個(gè)人都可以從自己日常的經(jīng)驗(yàn)出發(fā)，然后在產(chǎn)品不同的語境里去體會(huì)一個(gè)詞語、一個(gè)圖標(biāo)背后隱藏著我們什么樣的認(rèn)知和使用的習(xí)慣。
那由這個(gè)問題延伸的，其實(shí)還有產(chǎn)品的導(dǎo)航方式，頁面出入口的設(shè)計(jì)差異，產(chǎn)品中整體與獨(dú)立，連續(xù)與非連續(xù)的內(nèi)容結(jié)構(gòu)，原生與非原生頁面的差異等等。
小問題同樣可以見大，但我們也不需要過度思考，本來問題的解讀角度就是因人而異的，也無法面面俱到，上面的只是我的理解方式。設(shè)計(jì)還是需要回歸到用戶和產(chǎn)品的目標(biāo)，再去結(jié)合場景和產(chǎn)品業(yè)務(wù)的使用模式才能得出合理有價(jià)值的方案。
文章來源：優(yōu)設(shè) 作者：呆呆U理
最近方正集團(tuán)負(fù)債千億，被銀行申請(qǐng)破產(chǎn)重整的消息讓眾多設(shè)計(jì)師興奮不已，心里暗自在想，那方正字庫一萬多款字體是不是就可以免費(fèi)使用了？醒一醒，不太可能，身為設(shè)計(jì)工作者，尊重他人的設(shè)計(jì)和擁有版權(quán)意識(shí)是很重要的。
方正字庫屬于北京北大方正電子有限公司，而這個(gè)公司是方正集團(tuán)的子公司。就算方正集團(tuán)真的破產(chǎn)倒閉了，根據(jù)我國法律，方正字庫何去何從也跟這兩家公司的法人是否一致有關(guān)，如果一致，那么就可能被收購重組，如果不一致，那么就繼續(xù)獨(dú)立運(yùn)營。關(guān)鍵是，無論是什么結(jié)果，方正字庫里所有的字體都是有版權(quán)的，如果隨意商用，就會(huì)導(dǎo)致侵權(quán)，乃至把整個(gè)公司都賠進(jìn)去。
直接去網(wǎng)頁搜索，便有數(shù)不清的方正字體侵權(quán)案例。大到電影和游戲的宣發(fā)，小到淘寶店鋪的頁面，只要你使用了方正字庫的必須購買版權(quán)才可商用的字體，都有可能收到來自方正字庫的律師函。那么該如何避免字體侵權(quán)呢？其實(shí)最好的方法就是使用免費(fèi)可商用的字體，或者乖乖去買下字體的使用權(quán)。
一篇文章告訴你，該怎么判別字體是否侵權(quán)：
如果你實(shí)在要免費(fèi)用方正字庫的字體的話，那么就選擇「方正黑體簡體、方正書宋簡體、方正仿宋簡體、方正楷體簡體」這四種字體吧，已經(jīng)向方正字庫授權(quán)服務(wù)官方求證過，這四款字體可以直接免費(fèi)商用，不需要書面授權(quán)。
不過有那么多免費(fèi)、適用度廣、并且可以商用的字體，為什么要執(zhí)著于方正呢？優(yōu)設(shè)標(biāo)題黑和優(yōu)設(shè)好身體這兩款字體，無論是做 banner、海報(bào)還是文字設(shè)計(jì)都很合適，還沒擁有的設(shè)計(jì)師們快來下載。
優(yōu)設(shè)標(biāo)題黑：
優(yōu)設(shè)好身體：
還有優(yōu)設(shè)精心為大家挑選整理成的 2020 年免費(fèi)可商用中文字體最全合集，鏈接給你們，正好需要的話，就快去下載使用。
最后，介紹兩個(gè)可以查詢和下載免費(fèi)可商用字體的網(wǎng)站。
1. 字由網(wǎng)
網(wǎng)站鏈接：https://www.hellofont.cn/home
第一個(gè)是字由網(wǎng)，雖然需要下載客戶端激活字體進(jìn)行使用，不過截至今日，字由擁有 511 款免費(fèi)可商用字體，對(duì)比一下亂用字體可能產(chǎn)生的侵權(quán)費(fèi)用和煩惱，還是下載客戶端性價(jià)比比較高。
網(wǎng)站及使用介紹：
2. 貓啃網(wǎng)
網(wǎng)站鏈接：http://novicehou.gz01.bdysite.com/
第二個(gè)是貓啃網(wǎng)，是免費(fèi)開源可商用的公益字體網(wǎng)站，截至今日，網(wǎng)站上共有 155 款字體，可供設(shè)計(jì)師們選擇和下載使用。
文章來源：優(yōu)設(shè)
講一個(gè)老東家的故事。一次產(chǎn)品迭代會(huì)上，老板在臺(tái)上講到打算重構(gòu) C 端產(chǎn)品框架，想重整標(biāo)簽欄的標(biāo)簽設(shè)定?？稍谥v到這一部分的時(shí)候卡殼了，遲遲說不出「標(biāo)簽欄」這個(gè)控件名，氣氛有些尷尬。這時(shí)一名產(chǎn)品經(jīng)理說道：底部導(dǎo)航欄！會(huì)議得以繼續(xù)。
不全錯(cuò)，這么說也算能理解?？丶诮缑娴撞?，能引導(dǎo)用戶切換頁面。但如果標(biāo)簽欄把導(dǎo)航欄的名字占了……那原本的導(dǎo)航欄應(yīng)該叫什么呢？頂部標(biāo)題欄？那導(dǎo)航欄里的內(nèi)容控件又應(yīng)該叫什么？左上角或者右上角的按鈕？
接地氣的名稱讓我們一聽就懂，直到有一天你打算跳槽，你拿著自己的作品到下家面試，設(shè)計(jì)總監(jiān)幾個(gè)術(shù)語啪啪把你問得不知所云。這些「死控件」、「死欄目」在頁面上不可或缺，在設(shè)計(jì)每一個(gè)頁面時(shí)你以為對(duì)它們早已了如指掌，偏偏在關(guān)鍵時(shí)刻，它們卻六親不認(rèn)了。
「我又不走形式主義，為什么一定要說專用名詞呢？接地氣的名稱不是挺好嗎，溝通?！购芎唵蔚牡览?，如果名詞和概念都混淆不清，有沒有花功夫在 UI 設(shè)計(jì)領(lǐng)域進(jìn)行深度專研也就一目了然了，還何以談?wù)撊绾螌⑺鼈冞\(yùn)用自如呢？
這樣的經(jīng)歷，讓我產(chǎn)生了一個(gè)想法。是時(shí)候做一些知識(shí)內(nèi)容沉淀與分享了，不能讓更多的人走我踩過的坑。第一期我們便來講一講導(dǎo)航欄。
導(dǎo)航欄 Navigation Bar，也簡稱為 Navbar。一定會(huì)有不少剛?cè)腴T的 UI 新人，在諸多的 Bar 控件中，難以區(qū)分它所指代的區(qū)域。
在 iOS 上，導(dǎo)航欄是指顯示在應(yīng)用程序頂部，位于狀態(tài)欄下方的容器區(qū)域，層級(jí)應(yīng)高于當(dāng)前頁面內(nèi)容。
在安卓上，Google 公司在 Material Design 中也賦予了它同樣的定義，但是卻給了它另一個(gè)名稱，頂部應(yīng)用欄（Top App Bar）。
△ iOS與安卓的規(guī)范與命名區(qū)別
請(qǐng)務(wù)必要記?。簩?dǎo)航欄是用于構(gòu)架當(dāng)前屏幕的內(nèi)容，闡述當(dāng)前屏幕的狀態(tài)，并且起到連接父子級(jí)頁面層次結(jié)構(gòu)的作用。所以回到開頭的小故事，為什么標(biāo)簽欄不能叫做底部導(dǎo)航，因?yàn)闃?biāo)簽欄是構(gòu)架了多個(gè)屏幕之間平級(jí)頁面的內(nèi)容切換，和「導(dǎo)航」的定義沒有關(guān)系。
一個(gè)基本的導(dǎo)航欄容器一般承載的信息可能會(huì)有：標(biāo)題、導(dǎo)航按鈕、內(nèi)容控件按鈕、其他控件（比如搜索欄、分頁標(biāo)簽或分頁控件等），千萬別忘了還有分割線。（比如微信的導(dǎo)航欄）
1. 導(dǎo)航欄標(biāo)題
時(shí)間倒退回 2017 年以前，這時(shí)候的移動(dòng)端規(guī)范下的導(dǎo)航欄還是循規(guī)蹈矩的，樣式單一。但隨著 iPhone X 等一系列全面屏手機(jī)相繼問世后，移動(dòng)設(shè)備在屏幕高度上有了進(jìn)一步的擴(kuò)展，界面設(shè)計(jì)在一屏內(nèi)的發(fā)揮空間也隨之增加。iOS11 發(fā)布后，大標(biāo)題導(dǎo)航欄設(shè)計(jì)風(fēng)格興起，隨后被引入平臺(tái)規(guī)范。
于是現(xiàn)在 iOS 與 Material Design 在導(dǎo)航欄上也都定義了兩種導(dǎo)航欄標(biāo)題規(guī)范，常規(guī)標(biāo)題與大標(biāo)題。
常規(guī)標(biāo)題是指在高度為 88px（iOS@2x下）的導(dǎo)航容器中，居中放置一個(gè)當(dāng)前頁面的標(biāo)題。標(biāo)題字號(hào)一般為 34px-38px（34px 為 iOS 標(biāo)準(zhǔn)規(guī)范，但實(shí)際項(xiàng)目中可以盡量在不小于 34px 標(biāo)準(zhǔn)的情況下根據(jù)設(shè)計(jì)需求確定）。
△ 常規(guī)導(dǎo)航不同標(biāo)題字號(hào)的案例及視覺效果
大標(biāo)題是將導(dǎo)航欄高增加到 192px（iOS@2x），保留高度為 88px 的導(dǎo)航容器來承載內(nèi)容控件按鈕，將標(biāo)題下墜居左。iOS 的標(biāo)準(zhǔn)規(guī)范定義大標(biāo)題的字號(hào)為 68px。但由于英文有大小寫區(qū)分，在視覺上有一定的層次表現(xiàn)，而中文因?yàn)槿鄙僖欢ǖ膶哟谓Y(jié)構(gòu)，并且相同字號(hào)的中文視覺大小大于英文，所以大多數(shù)時(shí)候我們在進(jìn)行大標(biāo)題設(shè)計(jì)時(shí)，會(huì)適當(dāng)縮小，一般為 56px-64px 居多。
△ 大標(biāo)題不同標(biāo)題字號(hào)的案例及視覺效果
大標(biāo)題導(dǎo)航欄的優(yōu)點(diǎn)毋庸置疑，頁面留白更多，呼吸感更強(qiáng)，大氣現(xiàn)代、格調(diào)更高，因?yàn)轫撁鏄?biāo)題巨大，能夠幫助用戶快速確認(rèn)當(dāng)前所處位置。采用統(tǒng)一的大標(biāo)題，讓頁面布局風(fēng)格快速統(tǒng)一。但缺點(diǎn)也顯而易見，因?yàn)樵黾恿藢?dǎo)航欄的高度，導(dǎo)致屏幕利用率降低，一些通過廣告變現(xiàn)或更加注重一屏內(nèi)內(nèi)容呈現(xiàn)的應(yīng)用便中和了常規(guī)導(dǎo)航與大標(biāo)題導(dǎo)航的優(yōu)缺點(diǎn)，進(jìn)行了風(fēng)格改進(jìn)。
△ 改進(jìn)的大標(biāo)題案例
那我們?nèi)绾卧诔Ｒ?guī)標(biāo)題和大標(biāo)題之間抉擇呢？這可不單單是設(shè)計(jì)風(fēng)格的問題，還受產(chǎn)品定位與功能的影響。蘋果的設(shè)計(jì)師在 Apple Music 中實(shí)驗(yàn)并驗(yàn)證了一條結(jié)論——在內(nèi)容非常豐富、層級(jí)結(jié)構(gòu)較深的產(chǎn)品當(dāng)中，大標(biāo)題能夠幫用戶快速確認(rèn)自己的位置。
所以我理解的適合使用大標(biāo)題風(fēng)格的產(chǎn)品一定是：突出內(nèi)容呈現(xiàn)而不是功能繁瑣的；產(chǎn)品定位更偏向于現(xiàn)代或文藝藝術(shù)的；需要快速統(tǒng)一界面風(fēng)格的。而層級(jí)結(jié)構(gòu)需不需要很深，這并不一定，我反而覺得功能越單一、產(chǎn)品體量級(jí)越輕的應(yīng)用，越適合大標(biāo)題。
所以如此看來，國內(nèi)使用大標(biāo)題成功的案例就為數(shù)不多了，這可能與中文字體還有國內(nèi) app 產(chǎn)品功能都比較繁瑣的原因有關(guān)，真正做到了使用大標(biāo)題快速幫助用戶確認(rèn)自己位置，并且結(jié)合了產(chǎn)品特性與風(fēng)格的，我認(rèn)為人人都是產(chǎn)品經(jīng)理的移動(dòng)端在這方面做得非常棒。
2. 導(dǎo)航按鈕及內(nèi)容控件按鈕
iOS 規(guī)定導(dǎo)航按鈕位置僅能用于放置返回按鈕，可以添加一個(gè)層級(jí)的面包屑，幫助用戶有效地明確當(dāng)前頁面層級(jí)；Material Design 中，不僅可以放置返回按鈕，還另有作用，菜單圖標(biāo)-用于打開導(dǎo)航抽屜或者關(guān)閉圖標(biāo)-關(guān)閉工具欄。
△ iOS與安卓的導(dǎo)航按鈕區(qū)域區(qū)別
這一點(diǎn)與 iOS 的定義有著天壤之別，iOS 非常明確地賦予了工具欄的定義，并且將導(dǎo)航欄和工具欄（Toolbars）徹底地分離開，典型案例就是 Safari。
△ iOS明確地將導(dǎo)航欄與工具欄分離開
在內(nèi)容控件上 iOS 與 Material Design 也大相徑庭，Material Design 不去限制你的內(nèi)容控件多少，因?yàn)樗峁┝艘绯霾藛?，并可以根?jù)屏寬的變化，自適應(yīng)釋出和收納溢出菜單中的控件。
而 iOS 則規(guī)定我們，要給內(nèi)容控件按鈕足夠多的空間，必要的時(shí)候，隱藏導(dǎo)航欄標(biāo)題也未嘗不可。
那么真實(shí)的項(xiàng)目中，我們往往為了快速落地，會(huì)存在一稿適配雙平臺(tái)的情況。這時(shí)候我們應(yīng)該遵從哪一個(gè)平臺(tái)的規(guī)范呢？答案是：許多大廠的做法已經(jīng)向我們驗(yàn)證，規(guī)范不分家。
在 iOS 諸多的應(yīng)用中溢出菜單早已普及，盡管這是 Material Design 提出的設(shè)計(jì)理念。
△ Material Design的溢出菜單也被運(yùn)用在iOS端
雖然國內(nèi)遵從 Material Design 進(jìn)行 Android 應(yīng)用設(shè)計(jì)的情況相對(duì)較少，但它提供的設(shè)計(jì)理念與方案卻并不局限在安卓平臺(tái)。
3. 分割線
分割線只是一種體現(xiàn)形式，我想要表達(dá)的是，別忘記區(qū)分導(dǎo)航欄與內(nèi)容界面的視覺層級(jí)關(guān)系。Matetial Design 提醒我們，頂部應(yīng)用欄可以與內(nèi)容位于同一高度，但滾動(dòng)時(shí)，請(qǐng)?jiān)黾訉?dǎo)航欄的視覺高度，讓內(nèi)容在其后方滾動(dòng)。而 iOS 則默認(rèn)采用了背景模糊的方式區(qū)分了導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系。
△ 區(qū)分導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系
缺少視覺分割會(huì)讓用戶分不清導(dǎo)航欄與內(nèi)容界面，它們看起來會(huì)更像一個(gè)平級(jí)。對(duì)用戶視覺區(qū)分內(nèi)容主次其實(shí)是極不友好的。
4. 其他控件
關(guān)于其他控件，iOS 只在規(guī)范中提及到了分頁控件。蘋果設(shè)計(jì)師考慮到部分場景在當(dāng)前頁面中還存在信息層級(jí)結(jié)構(gòu)劃分，此時(shí)建議可以在導(dǎo)航欄中使用分段控件。
但國內(nèi)的應(yīng)用程序早已將導(dǎo)航欄容器的作用發(fā)揮到，基于導(dǎo)航欄層級(jí)始終高于內(nèi)容區(qū)域的特性，我們通常可以將分段控件、分頁標(biāo)簽、搜索欄等等用戶可能隨時(shí)使用的工具放在導(dǎo)航欄中。
△ 導(dǎo)航欄通常會(huì)承載的其他控件
導(dǎo)航欄是幾乎每一個(gè)界面都必定存在的控件，正因?yàn)闊o法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁面的減分項(xiàng)。
設(shè)計(jì)好導(dǎo)航欄不僅僅是視覺上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏?xí)r的組合操作還能給用戶帶來極大的體驗(yàn)增益。
文章來源：優(yōu)設(shè) 作者：
1.文字滾動(dòng)
<html>
<head>
<title>我的第一個(gè)頁面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷電黃色預(yù)警！<br />
大雨黃色預(yù)警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滾動(dòng)速度-----------------scroll：滾動(dòng) amount：數(shù)值
width：寬度 height：高度
onmouseover：當(dāng)鼠標(biāo)移上去
onmouseout：當(dāng)鼠標(biāo)離開
stop()：停止
start()：開始
behavior：
scroll 循環(huán)滾動(dòng)
alternate 來回滾動(dòng)
slide 滾動(dòng)一次停止
一.有關(guān)于內(nèi)置對(duì)象的作用域
主要說明2個(gè)對(duì)象，request，session
1、request 對(duì)象
request 對(duì)象是 javax.servlet.httpServletRequest類型的對(duì)象。 該對(duì)象代表了客戶端的請(qǐng)求信息，主要用于接受通過HTTP協(xié)議傳送到服務(wù)器的數(shù)據(jù)。（包括頭信息、系統(tǒng)信息、請(qǐng)求方式以及請(qǐng)求參數(shù)等）。
request只在2個(gè)頁面之間傳遞，每一次新的請(qǐng)求都會(huì)新建一個(gè)request對(duì)象，也就是說可能會(huì)request對(duì)象不一致導(dǎo)致空指針異常。
2、session 對(duì)象
session 對(duì)象是由服務(wù)器自動(dòng)創(chuàng)建的與用戶請(qǐng)求相關(guān)的對(duì)象。服務(wù)器為每個(gè)用戶都生成一個(gè)session對(duì)象，用于保存該用戶的信息，跟蹤用戶的操作狀態(tài)。session對(duì)象內(nèi)部使用Map類來保存數(shù)據(jù)，因此保存數(shù)據(jù)的格式為 “Key/value”。 session對(duì)象的value可以使復(fù)雜的對(duì)象類型，而不僅僅局限于字符串類型。
session對(duì)象在整個(gè)會(huì)話只有一個(gè)，也就是說session對(duì)象的數(shù)據(jù)會(huì)一直保留直到主動(dòng)進(jìn)行數(shù)據(jù)更改。
二.表單提交
在index.jsp中使用form進(jìn)行數(shù)據(jù)的提交，action的目標(biāo)是check.jsp，method是post
三.驗(yàn)證跳轉(zhuǎn)
當(dāng)form提交信息后交給check.jsp驗(yàn)證，使用getParameter來得到form的信息，并使用setAttribute保存。在check.jsp中判斷賬號(hào)密碼是否正確后，使用
<jsp:forward page=".jsp"></jsp:forward>
1
進(jìn)行跳轉(zhuǎn)，.jsp是想要跳轉(zhuǎn)的頁面路徑。
四.詳細(xì)代碼
index.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="check.jsp" method="post">
請(qǐng)輸入用戶名：
<input type = "text" name = "username"><br/>
請(qǐng)輸入密碼：
<input type = "password" name = "passwd"><br/>
<input type="submit" name="submit" value="登錄">
</form>
</body>
</html>
check.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>驗(yàn)證</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getParameter("username");
String passwd = (String)request.getParameter("passwd");
request.setAttribute("username", username);
request.setAttribute("passwd", passwd);
if(username.equals("admin")&&passwd.equals("123")){
%>
<jsp:forward page="succeed.jsp"></jsp:forward>
<%}else{ %>
<jsp:forward page="failed.jsp"></jsp:forward>
<%} %>
</body>
</html>
succeed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸成功</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸成功
</body>
</html>
failed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸失敗</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸失敗
</body>
</html>
五.注意事項(xiàng)
在jsp中使用form提交表單不能直接進(jìn)行跳轉(zhuǎn)，否則操作不慎就容易出現(xiàn)空指針異常，建議交由單獨(dú)的跳轉(zhuǎn)頁面處理
下面這段代碼是實(shí)現(xiàn)簡單的導(dǎo)航效果：
在這里插入代碼片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.nav{
width:700px;
margin:100px auto;
}
.nav ul li{
float:left;
margin-right:5px;
}
.nav ul li a{
width:100px;
height:30px;
color:#fff;
display:block;
line-height:30px;
margin-right:5px;
text-decoration:none;
background:red;
text-align:center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav ul li a:hover{
background:yellow;
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
</ul>
</div>
</body>
</html>
實(shí)現(xiàn)效果如圖：
容易犯錯(cuò)的地方：剛開始我把display:block;屬性寫在最前面，結(jié)果一直出不來，后來發(fā)現(xiàn)display屬性應(yīng)該放在height和width屬性后面
我還學(xué)到一個(gè)知識(shí)點(diǎn)：關(guān)于父元素塌陷問題：
在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是說父元素多高，子元素就多高
但是為子元素設(shè)置浮動(dòng)以后，子元素就會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷
由于父元素的高速塌陷了，則父元素下所有的元素都會(huì)向上移動(dòng)，這樣會(huì)導(dǎo)致頁面布局混亂
所以我們在開發(fā)中一定要避免出席那高度塌陷的問題，這時(shí)候我們可以將父元素的高度寫死，這樣可避免塌陷的問題出現(xiàn)，但是一當(dāng)高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方式是不推薦使用的
1
解決的方案：
根據(jù)W3C標(biāo)準(zhǔn)，在頁面中元素有一個(gè)隱含的屬性叫做Block Formatting Context
方案一：*（設(shè)置zoom為1和overflow為hidden）
當(dāng)開啟元素的BFC后，元素會(huì)有以下特性：
父元素的垂直外邊距不會(huì)和子元素重疊
開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
開啟BFC的元素可以包含浮動(dòng)的子元素
那如何開啟元素的BFC呢？
設(shè)置元素浮動(dòng)
設(shè)置元素的絕對(duì)定位
設(shè)置元素為inline-block(但是設(shè)置inline-block可以解決問題，但是會(huì)導(dǎo)致寬度丟失，所以不推薦使用這種方式)
將元素的overflow設(shè)置為一個(gè)非visible的值（推薦方式：將overflow:hidden這個(gè)是副作用最小的開啟BFC方式，所以可以這么說，以后若是再塌陷，就給父元素加上overflow:hidden屬性）
但需要注意的是：
在IE6以及以下的瀏覽器中并不支持BFC，所以使用這種方式并不能兼容IE6，在IE6中雖然沒有BFC，但有另一個(gè)隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過開hasLayout來解決問題
開啟方式很多，我們可以直接用一種副作用最小的直接將元素的zoom設(shè)置為1，比如父元素是box1,我們可以在父元素中加上zoom:1;
在這里解釋一下zoom表示放大的意思，后邊跟著一個(gè)數(shù)值，寫幾就可以將元素放大幾倍，所以zoom:1表示不放大元素，但是可以通過該樣式可以開啟hasLayout.
但需要注意的是zoom屬性放IE6可以，別的瀏覽器比如Chrome就不行
****所以重頭戲來了：若我們想要兼容所有瀏覽器？
1.引入
三種引用方式
第一種 npm安裝
項(xiàng)目根目錄命令行執(zhí)行
npm install uni-simple-router
1
第二種 插件市場（使用HBuilderX導(dǎo)入插件）
第三種 ZIP下載 解壓
2.項(xiàng)目中引入
import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后續(xù)代碼
引入之后就開始我們的正式使用。
第一步先在項(xiàng)目的根目錄下創(chuàng)建一個(gè)router文件夾。
格式為：
router
|---modules
|---index.js
|---index.js
router中的modules文件夾是用來放路由表模板的。modules中的index.js內(nèi)容為
const files = require.context('.', false, /.js$/)
const modules = []
files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})
export default modules
這個(gè)文件用來把同目錄下的js文件讀取并整合所有路由。
在這里創(chuàng)建的js文件代碼示例：
const home = [
{
//注意：path必須跟pages.json中的地址對(duì)應(yīng)，最前面別忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //對(duì)于h5端你必須在首頁加上aliasPath并設(shè)置為/
name: 'index',
meta: {
title: '首頁',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
第二步配置router下的index.js
import modules from './modules'
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
})
export default router;
第三步 就是配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif
// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
這樣你的路由就配置好了。
如果不想繁瑣的配置modules下的文件，可以用webpack自動(dòng)構(gòu)建路由表
安裝
npm install uni-read-pages
1
配置 vue.config.js （可能需要手動(dòng)創(chuàng)建）
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要獲取更多參數(shù)，那么請(qǐng)配置參數(shù)！
includes:['path','name','meta']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
}
}
然后去pages.json里面更改配置，加入所需要的內(nèi)容
最后配置路由表
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes:ROUTES //路由表
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
})
export default router;
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn