UI設計棧 2018-03-26 19:24:14
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
平時我們提到的布爾運算其實就是AI路徑查找器(pathfinder),通過路徑【加】【減】運算繪制出各種各樣的形狀，是成為一名優秀的UI設計師必備的技能之一。
對于初學者來說，剛開始可能模糊不清，確實不容易理解，下面棧長奉上最全的布爾運算深入解析教程，希望對迷途中的UI設計小白有所幫助。
圖片來源于網絡
圖片來源于網絡
圖片來源于網絡
UI空狀態404錯誤頁可以幫助網站避免丟失用戶的信任，并正確引導用戶返回其它頁面，減少客戶的流失量。404頁面的設計也是提高用戶體驗的一種表現形式。下面我們以去哪網404頁面為例來為大家具體講解一下404的構成。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
html與css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 標簽重定義 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 260px;
margin: 0 auto;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a target="_blank">第一張 路飛與艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a target="_blank">第二張 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a target="_blank">第三張 路飛</a>
</div>
<div>
<img src="img/4.jpg">
<a target="_blank">第四張 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a target="_blank">第五張 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a target="_blank">第六張 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a target="_blank">第七張 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a target="_blank">第八張 霸氣</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
JS:
var waterfall = function(wrap, boxes) {
// 獲取屏幕可以顯示的列數
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 設置容器的寬度
wrap.width(boxWidth * colsNumber);
// 定義一個數組并存儲每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};
// 獲取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});
1.Json的格式
其實json就是對象。源生的js代碼并沒有類的概念。對象救就是object。對象有自己的屬性，也可以有自己的方法。json是一種輕量級的存儲和交換信息的語言。他有自己的格式。
較為簡單的json。里面只有簡單的對象，key+value的形式：
每個元素之間用逗號隔開。調用每個key的值可用語句。例如：CellInfo.UEAmunt，就可取出其中的值。
較為復雜的json。里面包含了對象。
例如這個UEGroup1，里面的元素不僅有簡單的key+value，還包含了三個對象。對象里的元素用{}括起來，彼此之間用逗號隔開。想具體訪問某個元素的值也是通過逐層key，例如：UEGrooup1.DBR1.DLPackageSize
動態的往json只增加元素，增加對象。
前面說的幾個都是靜態的，提前寫好的。那如果臨時想加一個元素，例如在Cellinfo這個json中相加一個number的元素：
CellInfo.number=10;
對于往json中添加對象。例如我們想把Cellinfo和UEGroup1這兩個object作為兩個元素加入到另外一個大的json中：
2.json的發送
json寫好后，發送給后臺。至于后臺怎么處理數據我們不關心。發送json的函數如下：
}
參數分別是后臺的地址，變量，方法。變量就是我們自己寫好的json，方法默認為post。例如我們想發剛剛的PETInfo
$.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);
數據的發送、并獲取結果的實例：
需求描述：用戶填寫一系列的輸入框，前端獲取數據，封裝成json并發送給服務器，服務器會返回一個返回值，表示狀態。前端需要展示這個內容提示客戶。
3.json在本地的存儲
存儲數據有很多方法。這里我用的是localStorage。localStorage與cookie的區別如下：
① cookie在瀏覽器與服務器之間來回傳遞。
sessionStorage和localStorage不會把數據發給服務器，僅在本地保存
②數據有效期不同：
cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
sessionStorage：僅在當前瀏覽器窗口關閉前有效。
localStorage 始終有效，長期保存。
③cookie數據還有路徑的概念，可以限制cookie只屬于某個路徑下。
存儲大小也不同，cookie數據不能超過4k，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
④ 作用域不用
sessionStorage不在不同的瀏覽器窗口中共享；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的；
WebStorage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。
用localstage存儲json的實例：
將json取出來：
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
UI設計拋開視覺設計不談，更多的是尺寸、適配等一些問題。這些問題往往是初學者比較難以理解的問題。更多的應用于簡化開發過程、使多個產品擁有一致的體驗，是落到實處的東西。由于負責各個產品線的產品經理并非同一人，如果此時設計師們又是滲透到各個產品組中，那么產品之間的體驗就根本讓用戶感覺不出是一個部門設計開發出來的。規范是大型項目必須的，可以簡化開發成本、減少各個部門之間的溝通成本。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
控制表格的多選和反選，直接上代碼，順便安利一個小知識點：tr的底邊框不顯示的問題，解決辦法是：table{border-collapse:collapse;}
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
<style>
-
*{margin:0;padding:0;}
-
table{border-collapse:collapse}
-
.detail_tb {width: 100%;border: 1px solid #ccc;}
-
.detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
-
.detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
-
.detail_tb .fied_header th input {vertical-align: middle;}
-
.detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
-
.detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
-
.detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
-
.detail_tb tr td span {float: left;}
-
.detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
-
</style>
-
-
</head>
-
<body>
-
-
<table class="detail_tb" >
-
<thead>
-
<tr class="fied_header">
-
<th width="65"><input type="checkbox" value="number" id="number"> 序號</th>
-
<th width="110">孩子姓名</th>
-
<th width="130">家長電話</th>
-
<th width="110">介紹人孩子姓名</th>
-
<th width="130">介紹人電話</th>
-
<th width="150">報名時間</th>
-
<th width="100">分組情況</th>
-
<th width="100">拉新數量</th>
-
<th width="100">是否簽到</th>
-
<th width="100">是否發獎</th>
-
</tr>
-
</thead>
-
<tbody id="tbody">
-
<tr>
-
<td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
-
<td width="110">張三</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分組</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">獎品1</option>
-
<option value="">獎品2</option>
-
</select>
-
</td>
-
</tr>
-
<tr>
-
<td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
-
<td width="110">張四</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分組</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">獎品1</option>
-
<option value="">獎品2</option>
-
</select>
-
</td>
-
</tr>
-
<tbody>
-
</table>
-
-
-
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-
<script type="text/javascript">
-
// 全選和反選
-
$("#number").click(function () {
-
var isChecked = $("#number").prop("checked");
-
$("#tbody input").prop("checked", isChecked);
-
})
-
-
// 單獨選項控制全選
-
$("#tbody input").click(function () {
-
var allLength = $("#tbody input").length;
-
var checkedLength = $("#tbody input:checked").length;
-
if(allLength == checkedLength){
-
$("#number").prop("checked",true);
-
}else {
-
$("#number").prop("checked",false);
-
}
-
});
-
</script>
-
-
</body>
-
</html>
-
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滾動的容器中增加：-webkit-overflow-scrolling: touch或者給body增加：body {overflow-x: hidden}。
2.ios頁面橡皮彈回效果遮擋頁面選項卡？
(1) 有時body和html的height: 100%去除掉問題可能就沒有了。
(2) 到達臨界值的時候在阻止事件默認行為
var startY,endY;
//記錄手指觸摸的起點坐標
$('body').on('touchstart',function (e) {
startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
endY = e.touches[0].pageY; //記錄手指觸摸的移動中的坐標
//手指下滑，頁面到達頂端不能繼續下滑
if(endY>startY&& $(window).scrollTop()<=0){
e.preventDefault();
}
//手指上滑，頁面到達底部能繼續上滑
if(endY<startY&& $(window).scrollTop()+
$(window).height()>=$('body')[0].scrollHeight){
e.preventDefault();
}
})
有時也會碰見彈窗出來后兩個層的橡皮筋效果出現問題，我們可以在彈出彈出時給底層頁面加上一個類名，類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止，就不會影響彈窗層。 3.IOS機型margin屬性無效問題？ (1) 設置html body的高度為百分比時，margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios綁定點擊事件不執行？ (1)添加樣式cursor ：pointer。點擊后消除背景閃一下的css：-webkit-tap-highlight-color:transparent; 5.Ios鍵盤換行變為搜索？ 首先，input 要放在 form里面。 這時 "換行" 已經變成 “前往”。 如果想變成 “搜索”，input 設置 type="search"。 6.Jq對a標簽點擊事件不生效？ 出現這種情況的原因不明，有的朋友解釋：我們平時都是點擊的A標簽中的文字了。 所以要想用JS模擬點擊A標簽事件，就得先往A標簽中的文字添加能被JS捕獲的元素，然后再用JS模擬點擊該元素即可。但是我覺得不合理，雖然找不到原因但是解決辦法還是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有時因為服務器或者別的原因導致頁面上的圖片沒有找到？ 這是我們想需要用一個本地的圖片代替沒有找的的圖片
<script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="images/logoError.png"; img.onerror=null; 控制不要一直跳動 } </script> <img src="images/logo.png" />8.transform屬性影響position:fixed？
(1)規范中有規定：如果元素的transform值不為none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1不只在手機上，電腦上也一樣。除了fixed元素會受影響之外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關的屬性都會受到影響。當然如果transform元素的display值為inline時又會有所不同。最簡單的解決方法就是transform元素內部不能有absolute、fixed元素.
9.ios對position: fixed不太友好，有時我們需要加點處理？
在安卓上面，點擊頁面底部的輸入框，軟鍵盤彈出，頁面移動上移。
而ios上面，點擊頁面底部輸入框，軟鍵盤彈出，輸入框看不到了。。。查資料說什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常復雜，要改很多。。。
讓他彈出時讓滾動條在部
var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 if (isiOS) { $('textarea').focus(function () { window.setTimeout('scrollBottom()', 500); }); } function scrollBottom() { window.scrollTo(0, $('body').height()); }10.jq validate插件驗證問題？
(1)所以的input必須有name不然會出錯
11.有時手機會出現斷網的情況，我沒可能會對斷網的情況做一些處理？
(1)navigator.onLine可判斷是否是脫機狀態.
12.判斷對象的長度？
(1)用Object.keys，Object.keys方法返回的是一個數組，數組里面裝的是對象的屬性
var person = { "name" : "zhangshan", "sex" : "man", "age" : "50", "height" : "180", "phone" : "1xxxxxxxxxx", "email" : "xxxxxxxxx@xxx.com" }; var arr = Object.keys(person); console.log(arr.length);(2)Object.getOwnPropertyNames(obj).length
13.上一題我們用到了Object.keys與Object.getOwnPropertyNames他們的區別？
Object.keys定義：返回一個對象可枚舉屬性的字符串數組；
Object.getOwnPropertyNames定義：返回一個對象可枚舉、不可枚舉屬性的名稱；
屬性的可枚舉性、不可枚舉性：定義：可枚舉屬性是指那些內部 “可枚舉” 標志設置為 true 的屬性，對于通過直接的賦值和屬性初始化的屬性，該標識值默認為即為 true，對于通過 Object.defineProperty 等定義的屬性，該標識值默認為 false。
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length); //output：1 console.log(Object.getOwnPropertyNames(obj).length); //output：2 console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"] console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]
綜合實例
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj); //output: true
console.log('prop2' in obj); //output: true
for (var item in obj) {
console.log(item);
}
//output：prop1
for (var item in Object.getOwnPropertyNames(obj)) {
console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]
14.移動開發不同手機彈出數字鍵盤問題？
(1)type="tel"
iOS和Android的鍵盤表現都差不多
(2)type="number"
優點是Android下實現的一個真正的數字鍵盤
缺點一：iOS下不是九宮格鍵盤，輸入不方便
缺點二：舊版Android（包括微信所用的X5內核）在輸入框后面會有超級雞肋的小尾巴，好在Android 4.4.4以后給去掉了。
不過對于缺點二，我們可以用webkit私有的偽元素給fix掉：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
(3)pattern屬性
pattern用于驗證表單輸入的內容，通常HTML5的type屬性，比如email、tel、number、data類、url等，已經自帶了簡單的數據格式驗證功能了，加上pattern后，前端部分的驗證更加簡單了。
顯而易見，pattern的屬性值要用正則表達式。
實例 簡單的數字驗證
數字的驗證有兩個：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">
15.input[number]類型輸入非數字字符
js獲取的值是空；比如-12，+123等
16.Javascript：history.go()和history.back()的用法與區別？
簡單的說就是：go(-1):返回上一頁，原頁面表單中的內容會丟失；back():返回上一頁，原頁表表單中的內容會保留。history.go(-1):后退+刷新history.back():后退
之所以注意到這個區別，是因為不同的瀏覽器后退行為也是有區別的，而區別就跟javascript：history.go()和history.back()的區別類似。
Chrome和ff瀏覽器后退頁面，會刷新后退的頁面，若有數據請求也會提交數據申請。類似于history.go(-1);
而safari（包括桌面版和ipad版）的后退按鈕則不會刷新頁面，也不會提交數據申請。類似于javascript：history.back();
17.Meta基礎知識：
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設置viewport寬度，為一個正整數，或字符串‘device-width’
// height 設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置
// initial-scale 默認縮放比例，為一個數字，可以帶小數
// minimum-scale 允許用戶最小縮放比例，為一個數字，可以帶小數
// maximum-scale 允許用戶最大縮放比例，為一個數字，可以帶小數
// user-scalable 是否允許手動縮放
空白頁基本meta標簽
<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta標簽
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
18.移動端如何定義字體font-family？
@ --------------------------------------中文字體的英文名稱
@ 宋體 SimSun
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 NSimSun
@ 新細明體 MingLiU
@ 細明體 MingLiU
@ 標楷體 DFKai-SB
@ 仿宋 FangSong
@ 楷體 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷體_GB2312 KaiTi_GB2312
@
@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19.打電話發短信寫郵件怎么實現？
// 一、打電話 <a href="tel:0755-10086">打電話給:0755-10086</a> // 二、發短信，winphone系統無效 <a href="sms:10086">發短信給: 10086</a> // 三、寫郵件 <a href="mailto:863139978@qq.com">點擊我發郵件</a> //2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點擊我發郵件</a> //3.跟著抄送地址后，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點擊我發郵件</a> //4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">點擊我發郵件</a> //5.包含主題，用?subject= <a href="mailto:863139978@qq.com?subject=郵件主題">點擊我發郵件</a> //6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行 <a href="mailto:863139978@qq.com?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點擊我發郵件</a> //7.內容包含鏈接，含http(s)://等的文本自動轉化為鏈接 <a href="mailto:863139978@qq.com?body=http://www.baidu.com">點擊我發郵件</a> //8.內容包含圖片（PC不支持） <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a> //9.完整示例 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>
|
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天的譯文同樣來自設計師 Eugen E?anu，他將經典設計書《Don‘t Make Me Think》中的內容梳理出來供你參考。這些老問題依然能夠給我們今天的新局面以啟發。
「好設計應該是顯而易見的」，這句老話在過去的幾個世紀當中影響到了各個不同的領域，從美食到音樂，從建筑到哲學，我們如今的生活幾乎是在這句話的影響下被逐漸被塑造出來的。
但是同樣的，人類的進化并沒有我們想象中那么快速，我們的思維和本能仍然被深刻地影響著我們的決策。換句話來說，人類的行為模式有著很長的保質期，在許多事情上，20年前很難做，在今天依然不那么容易去執行。
Steve Krug 的這本《Don’t Make Me Think》中文譯本名字是《點石成金：訪客至上的網頁設計秘籍》，譯名可能沒有它的原名那么直接，但是也傳遞出這本書所要表達的核心概念。
這本書成于2000年第一次互聯網泡沫時代之后，Krug 在這次浪潮之后提出了不少實用的設計原則，直到今天仍然有著極高的價值。這本書隨后多次再版和修訂，其中的設計案例幾經迭代升級，我們可以看到現代網頁設計的提升和進步，同時也能從中感受到，用戶——人類行為本身的模式化?！冈L客至上」的表述太過客氣，「不要讓我思考」這一表述更能表現用戶行為的特征，而今天我們所面對的絕大多數的優秀產品，無論是手機電腦還是汽車，同樣遵循著這一原則。
這本書的成功是建立在無數痛徹心扉的教訓之上，這也使得它本身的價值無與倫比。今天的文章本質上也是一篇讀書筆記，設計師應該對于用戶、人性有足夠的認知，方可作出足夠優秀的設計。下面的10個總結，既是常見的認知錯誤，也是成就好設計的契機，就看你怎么把握了。
當我們在查看內容和信息的時候，絕大多數情況下我們都會下意識尋找讓自己感興趣的東西。比如，我們很少會完整地瀏覽網站上所有的文本和內容，為什么？絕大多數的用戶打開網站都是在試圖完成某項任務，達成某個目標，而網頁中的不同部分的內容往往是服務于不同的功能和目標的，我們努力達成目標即可，并沒有閱讀全部的必要。不過，作為網站的設計者，我們往往還是提供了足夠豐富的內容和完善的功能，一方面是因為我們覺得人們需要知道，另一方面也是應對不同用戶的需求。正如有的設計師所說的，它們「增加了體驗」。
所以，通常而言，我們可以作出下列優化：
視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。視覺層次能夠呈現出頁面中不同元素之間的優先級和關系，在設計的時候，同樣需要遵循下面的幾個原則：
我們明白，用戶總會期望看到新東西，但是，市面上有太多的工具和應用，如果各行其是，忽略約定俗成的規則，特立獨行地采用自己的規則，會讓每個應用的學習成本都提高，這對于用戶幾乎是毫無益處的。
當設計師被要求設計某個東西的時候，內心是充滿重新發明的沖動的，這個我們都明白。而設計出和別人相似的東西看起來又有點「政治不正確」，甲方總會希望設計作出點不一樣的東西。更何況，這還是一個少有鼓勵和贊揚的行業，也很少為「最貼合用戶需求」的產品頒設計獎。
但是設計仍然需要在各方之間作出最佳的平衡。
在重新發明輪子之前，你必須了解破壞和創新所意味著的真實的價值（時間，體驗，耗費的精力和所需的知識）。
我們的工作是要讓產品清晰明了，讓事情便捷易行。即使做不到明顯，也應該盡力向著不言自明的設計靠攏。說明書這種東西是沒有人會主動去看的，它們的存在意義本身就不大，你需要通過合理的設計，讓產品本身發揮指引性的效果。即使說明書必須存在，也盡量讓它簡短明了。
如果功能并不明顯，我們應該盡量讓它明顯一點，讓目標更明顯。
以宜家為例，一個需要買回家組裝的柜子，絕大多數的用戶可以在簡短的指引之下就可以輕松正確地組裝，為什么？因為絕大多數情況下，一個柜子長什么樣，用戶眼前有清晰的畫面，哪怕說明只有幾張簡單的圖片，用戶也不會犯錯。
絕大多數的用戶并沒有興趣了解你的產品的工作方式，并不是因為他們不夠聰明，僅僅是因為他們不在乎。所以，一旦他們確定你的產品是能用的，就很少會去注意其他的部分。
以蘋果的無線耳機 AirPods 為例，從價格上來說，它并不親民，但是它的交互方式和使用體驗確實非常的獨特和優秀，這也不難理解許多用戶會選擇它。用戶在購買它之后，并不會去思考它是如何運作的，其中所包含的諸多新技術，對于用戶而言，只是潤物細無聲地發揮著作用而已。
我的母親就使用的 AirPods ，她從來不會問我它的原理，但是她很清楚，耳機需要放在充電盒中充電，和手機配對之后就能用了，并不復雜。
這一條可能是我最喜歡的。我們設計師總喜歡為用戶帶來微妙的視覺效果，來給用戶帶來樂趣。對吧？可是如果我告訴你，用戶并不關心它們，你會怎么想呢？他們也根本不會告訴你他們有多在意或者多不在意，也不會在一次又一次看到的時候對于這些設計有多少感覺。
為什么會這樣？生活環境賦予每個用戶以復雜多變的情境，他們很少有機會去感受微妙的設計所帶來的奇妙情緒。風在吼，狗在叫，小孩還在滿屋跑，水壺里面水開了，老婆在耳邊抱怨著工作中的細微末節，而你正在填寫著表單準備預訂明天的高鐵票，在那個時刻，APP 當中微妙的動效和視覺線索，手一抖，你可能還會多買一個沒有必要的捆綁銷售的酒店折扣券。
但是另外一方面，對于優秀體驗的追求不應該因此而放棄，還有很多用戶會從中受益，這也是促成優秀產品的必須因素。只不過確實有很多用戶沒法去在意它們罷了。
焦點小組是做什么的？一小群人圍坐在桌子旁邊，討論他們對于產品的看法，他們過去的經歷，它們的感受和對于新概念的理解。焦點小組的作用是幫你更好地界定目標用戶，目標用戶的感受等等。
可用性測試則是另外一回事。做可用性測試的時候，通常是為了測試產品而觀察一個特定的用戶使用產品的過程。在測試中，你需要測試人員執行特定的操作，以此來查看整個設計中的概念是否直觀，功能是否需要完善。面對焦點小組的時候，你需要傾聽觀點，梳理思路，在進行可用性測試的時候，更多需要的是觀察，并且解決具體的問題。
我們在設計產品的時候，常常會從自己的需求出發：「我也是一個用戶，所以我知道什么好什么不好?！刮覀儗τ谧约旱南埠糜兄鴱娏业母惺堋?
我們會說，當我們的產品具備_____的時候，我們會很喜歡，又或者，我們認為_____是一個巨大的痛點。當我們真正和團隊成員坐在一起討論產品的時候，大家都有各自的看法和各自的情緒，所有人的都有著極強的個性和獨特的看法，這個情況就很尷尬了。因為我們常常會傾向于認為絕大多數的用戶和我們自己一樣。事實上并不一定如此。
無論是設計產品功能還是測試產品的時候，問對問題都很重要。測試的時候，問用戶「你們喜歡下拉菜單嗎」這樣的問題，不僅銷量不高，而且不會帶來價值。這個問題，應該這么問：「在這個情況下，在這個頁面上，下拉菜單這種設計是否能夠給你帶來良好的用戶體驗？哪里讓人覺得不舒服？」
諸如「用戶喜歡這個產品嗎」這樣寬泛的問題意義不大，用戶也很難提供針對性的、具體的回復。
而且，作為設計師我們不應當專注于用戶是否喜歡這樣的問題，這樣會失去動力和專注力?？捎眯詼y試可以幫你消除各種「喜歡」相關的問題，并且幫你找到真正要做的事情。這才是重點。
我在哪？我要干嘛？
我應該點哪里開始？
他們在這放的這個控件是干啥的？
這個頁面是用來做什么的？
他們為什么這么稱呼這個功能？
這個是廣告還是內置的功能？
在使用產品的時候，如果觸發用戶大腦中的各種問題，只會增加用戶的心理負荷和工作量，分散用戶注意力并不是好事，而且用戶本身并不喜歡解決各種難題。
每當用戶點擊某個控件而不起作用，或者它看起來是個鏈接實際上并不是，會消耗用戶對你的信任感，降低產品的可靠度。
炫酷的概念和新穎的趨勢不僅吸引用戶，同樣是設計師的心頭好。但是我們在新的時代，新的局面之下，始終面對的是以往的用戶，看似千變萬化的需求背后是不變的人性。
至少《Don’t Make Me Think》這本書一直在探討的問題，經過20年的世事變遷，幾次互聯網浪潮，在這個號稱互聯網4.0時代，仍然發揮著作用，依然是那么具有啟發性。
新狀況之下潛藏著老問題，想要洞悉本質，設計師要懂心理學和行為學。在之前的幾篇文章當中，我一直在試圖梳理出不會隨著時間改變，而一直存在的、亟待解決的問題以及可供使用的原理。
《為何如今的產品總給人千人一面的感覺？》揭示的是「特征蔓延」和「競爭驅動式設計」是如何讓產品走向平庸和毀滅，解決方案藏在結尾。
《熟知用戶行為的這7個層面，你的設計才會走進人心》則介紹了唐納德諾曼的用戶行為的7個層面，這是一套分析用戶行為，設計產品流程的有效方法，擁有持久生命力的產品的設計策略，和這套方法不謀而合。
《這7種廣泛存在的認知偏差，影響了我們太多的決策》 則幫你梳理了7種常見的認知偏差，認識自己了解用戶，這些知識能消除誤解，同樣能夠幫你洞悉真相，是不可多得的利器。
設計的方法和工具成千上萬，想明白道理，問對問題，接下來的路更容易走通。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
留白對于設計的價值，已經得到相當廣泛的認可了。盡管留白看起來不復雜，但是在復雜多變的設計環境之下，往往并不是一件簡單的事情。優秀的留白設計能夠在簡約的風格和功能的可用性之間達到平衡，而要做到這一點，需要相當的實踐和積累。
藍藍設計的小編 http://www.syprn.cn