首頁

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

博博


人人都是產(chǎn)品經(jīng)理 2016-05-16 10:07:04

來人人都是產(chǎn)品經(jīng)理【起點學院】，BAT實戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學產(chǎn)品、學運營。

一定有很多朋友在和我思考過一個同樣的問題：優(yōu)秀的產(chǎn)品是怎樣定義的？周鴻祎給出答案：第一滿足剛需、痛點、高頻，第二要有良好的用戶體驗。第一點很好理解，我們今天主要來聊聊第二點。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

參照產(chǎn)品設計原則，可避免產(chǎn)品設計師走彎路，設計出具有良好用戶體驗的產(chǎn)品。產(chǎn)品設計原則會隨著社會的進步而更新迭代，以下是我在學習和工作中對產(chǎn)品設計原則的思考總結(jié)，希望可以給你帶來參考和啟發(fā)。

一、減少用戶出錯

錯誤對話框是最令人討厭的交互方式，也是很多產(chǎn)品中濫用最多的。錯誤對話框一般不會給用戶指明正確的道路，僅僅在保護程序不陷入麻煩。而且錯誤對話框打斷了用戶的注意流，愚蠢地停止了進度。用戶犯錯誤的時候，不應該受到訓斥，這個時候，他需要的是幫助和正確的引導，那么我們要做的就是幫助用戶避免錯誤，告訴用戶如何把事情做好。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

二、易學性

好的應用像極了藍顏知已，能看透你的心，在你需要的時候或者合適的的時間，用合適的方式提供暖心的幫助，指引你披荊斬棘，打怪升級。

幫助界面大概分為兩種，導覽教程和覆蓋式教程。

1、導覽教程是通過一組有序的圖片介紹應用功能，或者指引用戶完成一個目標。

新應用或者更新后用戶，為了解決用戶初始問題，絕大部分應用采用了幫助引導頁面，然而真的是必要的么？我覺得未必。可能有的產(chǎn)品經(jīng)理也覺得沒必要，但這是種主流，所以還是選擇加上。有的則僅僅為告訴用戶產(chǎn)品是做什么的。其實用戶可能根本沒有那么多耐心去閱讀好幾頁的產(chǎn)品說明，就算有耐心看完，也大多記不準。所以把引導放到使用情景中，在用戶使用到此功能時展示給用戶，也可把引導收起來，用戶需要幫助時呼出。微習慣在引導方面，給用戶驚喜。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

2、覆蓋式教程是另一種介紹方式，很簡單的透明薄皮，少許箭頭，少許注釋，指出關(guān)鍵重點之處。

此方法不錯，用戶看起來明了易學。免費日程極簡的箭頭和引導告訴用戶功能及使用。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

做好后可以自我檢測思考，用戶學習的成本是不是足夠低了？給用戶的學習方式是不是最科學合理的？還有沒有什么地方需要修改？還有沒有更好的方式？用戶學過一次后還需不需要重復學習？文案確定通俗易懂？

三、美學一致性、完整性

應用的完整性一致性就是外觀和里面不同模塊之間都有相似的外觀、感覺和氣質(zhì)。產(chǎn)品的完整性一致性會讓產(chǎn)品更易學易用。

1、從應用外部看，產(chǎn)品完整性一致性，容易培養(yǎng)用戶圍繞這點形成強烈的品牌意識，傳播產(chǎn)品風格就是在傳播品牌，可深入人心。一致不代表僵化，可圍繞產(chǎn)品主線進行成長和演化。

2、從應用內(nèi)部看，一致的用詞、風格、色調(diào)、圖標會給用戶建立具有凝聚力的視覺系統(tǒng)，帶來在產(chǎn)品上一致的體驗。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

四、輸入方式更簡單

移動端產(chǎn)品的使用場景，公車上，行走中，單手操作等，導致用戶在使用手機時受到很多環(huán)境上的干擾，所以注定會在輸入方式上給用戶造成很多的不便和出錯，為使用戶減少使用手寫或者鍵盤輸入，減少浪費更多的時間和精力，改變移動端的輸入方式就變得尤為關(guān)鍵。

1、減少移動端的文字輸入，輸入時可采用建議或者事件記憶。聰明的應用會根據(jù)用戶之前的行為和信息給用戶提出建議，根據(jù)記憶靈活地為用戶當前的行為顯示信息，使得用戶在效率和滿意度方面得到大大的提升。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

2、為提供用戶完成目標的效率，更為了減少用戶出錯，轉(zhuǎn)變輸入方式，改輸入為選擇或手勢方式。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

3、使用手機已有的傳感器輸入。輸入文字搜索關(guān)注二維碼，改變成長按識別二維碼，減少輸入麻煩和出錯的問題。

五、為停止做準備

當人們?nèi)硇牡耐度氲交顒訄鼍爸?，會對周圍的干擾視而不見，這種狀態(tài)被稱為“流”，用戶在這種狀態(tài)下會有輕松的、溫和的快感，處理任務，完成目標也是會非常的，但是很不幸的是，我們使用的手機，使用移動應用的場景，就是會因為各種事情而打斷。想象一下，錄下精彩的視頻，發(fā)送時網(wǎng)絡卡住了，不響應了；發(fā)微博發(fā)到一半手機停電了；網(wǎng)購付款時老板的電話來了，這在我們?nèi)粘Ｉ钪刑Ｒ?，所以聰明的、體貼的產(chǎn)品，是隨時為停止做好準備的。

1、編輯中斷、網(wǎng)絡中斷時，盡可能地保持之前狀態(tài)，并存儲好用戶數(shù)據(jù)。我們總的原則就是讓用戶付出的勞動不至于付之東流，也減少用戶的重復操作。例如美拍上傳視頻時網(wǎng)絡中斷，可幫用戶存到草稿箱，用戶稍后可重新編輯上傳。

2、誤操作或其他原因跳到錯誤頁時，不要讓用戶無路可走，最好給用戶下一步的選擇。產(chǎn)品程序無法使用，那么告訴用戶發(fā)生錯誤的原因是什么，給出用戶選擇，他們還能做點什么，并給出解決方法。百度之前有個很好的體驗，在找不到頁面的時候，展示幫找失聯(lián)兒童的頁面，頁面找不到，可以幫忙找找孩子，很人性化的體驗。

六、做好反饋

反饋是用產(chǎn)品的語言告訴用戶應用正在做什么，進展怎么樣了，接下來的操作會有什么結(jié)果。我們使用應用，就像用戶與應用的交談，用戶肯定不希望應用是冷冰冰，無回應的。

反饋可以分為過程反饋和結(jié)果反饋。

1、過程反饋。用戶在操作過程中，界面對操作進行反饋，告訴用戶操作的狀態(tài)變化，用戶可根據(jù)反饋對任務進行下一步選擇操作，一定要做到輕量，不突兀，細膩地反饋。富視覺非模態(tài)反饋，是用的比較多的一種反饋方式，通常為動態(tài)，視覺上很輕松地顯示反饋，不需要用戶做其他操作。我們看IOS的下載更新，就是這樣。免費日程的發(fā)送邀約等待也是一種富視覺非模態(tài)反饋。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

2、結(jié)果反饋。用戶在完成操作后，告訴用戶操作結(jié)果，使得產(chǎn)品看起來很貼心，很有生命力。結(jié)果反饋也避免了用戶因為不確認而造成重新操作。連貫的動畫和聲音都可以為用戶提供反饋。舉個刪除的例子，例如mac在刪除成功后，會有收走到垃圾桶的動畫，伴隨著粉碎的聲音，這種標志性反饋會給用戶留下獨特的印象。

七、內(nèi)容為先

《移動優(yōu)先》作者Luke，說設計原則為“內(nèi)容優(yōu)先，之后才是導航”。這句話是什么意思，這是在產(chǎn)品設計中一個經(jīng)常容易犯的錯誤。如何讓用戶找到內(nèi)容，所以造成了導航優(yōu)先，而忽略了用戶真正關(guān)心的內(nèi)容。在移動設計中，可能你的產(chǎn)品界面很美觀，圖標很精致，動畫很流暢，設計獨到到令人耳目一新，用戶可能會對此充滿新鮮感，但是新鮮感終究有期限，用戶不會為了這個而去一直使用你的產(chǎn)品，沒有內(nèi)容的產(chǎn)品就像一本只有華麗封面卻沒有內(nèi)容的書，所以用戶內(nèi)容才是最核心的。

1、突出內(nèi)容，使界面內(nèi)容更開闊，使用戶完成目標更專注。IOS備忘錄中，采用點聚式導航，用戶需要時才呼出，沒有無關(guān)雜亂的內(nèi)容，給界面一種開闊的感覺。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

2、提升屏幕利用率，把焦點放在用戶更注重的內(nèi)容上。對于手機來說，屏幕資源利用率的提升要做到優(yōu)化提升。知乎是以UGC為主的產(chǎn)品，用戶在上劃瀏覽內(nèi)容時搜索消失，當用戶需要時向下滑即可顯現(xiàn)。

7條產(chǎn)品設計原則：純干貨總結(jié)，實用到?jīng)]朋友

人人都是產(chǎn)品經(jīng)理也是以UGC為主的產(chǎn)品，正所謂內(nèi)容為王，吧啦吧啦，算了不說了，投稿去了。

評論(0) 瀏覽(2997)

設計師大福利：UI設計軟件Sketch，PS，AI，AE快捷鍵大全

博博


我是你們的學霸姐 2018-04-20 14:19:23

在學軟件操作的時候，要說什么最繁瑣？那當然是軟件操作的指令了。

學霸姐姐在網(wǎng)絡上搜集許久，終于搜集完整了快捷方式的圖解！今天就用圖解的方式幫助大家將快捷方式一網(wǎng)打盡！

UI設計需要學習的主體軟件：Sketch，PS，AI，AE，每一個軟件的快捷方式都用圖表總結(jié)的方式送給大家，希望大家喜歡。

這么全的快捷方式，還不快快收藏轉(zhuǎn)發(fā)？

如果有喜歡UI設計的同學，可以私信學霸姐姐：UI設計，即可領(lǐng)取超過600G的UI設計零基礎(chǔ)高清教學視頻，學霸姐姐會一一回復的！

快快行動起來，將快捷方式轉(zhuǎn)發(fā)給你的同學朋友們吧！

  1. SKETCH

設計師大福利：UI設計軟件Sketch，PS，AI，AE快捷鍵大全

2.PS

設計師大福利：UI設計軟件Sketch，PS，AI，AE快捷鍵大全

3.AI

設計師大福利：UI設計軟件Sketch，PS，AI，AE快捷鍵大全

4.AE

設計師大福利：UI設計軟件Sketch，PS，AI，AE快捷鍵大全

評論(0) 瀏覽(2661)

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率，Instapage獲1500萬美元A輪融資

博博


36氪 

今日，登錄頁面制作初創(chuàng)公司Instapage宣布他們完成了Morgan Stanley Expansion Capital投資的1500萬美元的A輪。

Instapage是一家由數(shù)據(jù)分析引擎驅(qū)動的，提供個性化登錄頁面模板，幫助企業(yè)提高數(shù)字營銷轉(zhuǎn)化率的公司。Instapage目前擁有超過15,000名客戶，平均轉(zhuǎn)化率約為22％。

設計登陸頁面似乎并不是創(chuàng)業(yè)者感興趣的風口，但Instapage創(chuàng)始人兼首席執(zhí)行官Tyson Quick表示，這對于營銷人員來說卻是一個真正的問題。

登陸頁面（Landing Page）又被稱為引導頁，是指在數(shù)字營銷中，當潛在用戶點擊廣告或者利用搜索引擎搜索后顯示給用戶的網(wǎng)頁。而在網(wǎng)站運營的邏輯里，最重要的三個因素是拉新、轉(zhuǎn)化和留存，那么，作為第一個關(guān)卡的登錄頁面就顯得尤為重要。

Quick之前曾在一家名為Jounce的營銷產(chǎn)品上工作，他發(fā)現(xiàn)，即使有人點擊了Jounce廣告并最終進入了公司網(wǎng)站，其中只有3％的轉(zhuǎn)化率。

“這有點荒謬，因為他們已經(jīng)點擊了廣告，往往具有明確的消費意向?！盦uick說。而采用針對核心客戶群的個性化登錄頁面之后，Jounce轉(zhuǎn)化率提高到了20％左右。

2012年，Quick決定將公司業(yè)務的重點轉(zhuǎn)移到Instapage，現(xiàn)在Instapage成為了一個更廣泛的平臺，用于創(chuàng)建和測試針對不同訪問者個性化目標網(wǎng)頁。

“我們可以成為廣告技術(shù)與傳統(tǒng)營銷和銷售技術(shù)之間的橋梁，”Quick說，“這些技術(shù)能夠幫助廣告投放商鎖定核心用戶。一旦用戶點擊廣告，自動化營銷就會啟動，將這些用戶納入企業(yè)的CRM系統(tǒng)。這是以往的技術(shù)中缺失的轉(zhuǎn)換點?！?

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率，Instapage獲1500萬美元A輪融資

圍繞Quick所謂的“點擊廣告后就引導轉(zhuǎn)化”，Instapage開發(fā)了三個關(guān)鍵組件——可擴展創(chuàng)建，頁面優(yōu)化和個性化。而像Optimizely可能只會解決其中的一些問題，而Instapage將三者結(jié)合了起來。

而談及如何采集用戶數(shù)據(jù)，為企業(yè)訂制個性化登錄頁面時，Quick認為公司不需要詳細的用戶數(shù)據(jù)：“個性化的標簽來自廣告本身。我們可以從他們點擊的廣告中收集到數(shù)據(jù)?！?

之前，Instapage已經(jīng)獲得了200萬美元的種子資金。而且目前該公司盈利，Quick說每年的經(jīng)常性收入為1200萬美元，并沒有融資需求。但是，他發(fā)現(xiàn)Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的業(yè)務。

Morgan Stanley Expansion Capital主管Pete Chung表示，“Instapage專注于提高數(shù)字營銷效率這個細分領(lǐng)域，并且可以在不需要外部或技術(shù)資源的情況下進行更精準的廣告活動，創(chuàng)造了令人印象深刻的產(chǎn)品?！?


評論(0) 瀏覽(2340)

JS中作用域的銷毀和不銷毀的情況總結(jié)

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

window全局作用域->頁面關(guān)掉才銷毀
函數(shù)執(zhí)行會形成私有的作用域

1)作用域的銷毀
一般情況下，函數(shù)執(zhí)行形成一個私有的作用域，當執(zhí)行完成后就銷毀了->節(jié)省內(nèi)存空間

2)作用域的不立即銷毀
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先執(zhí)行fn,有一個私有的變量i=10,返回一個堆內(nèi)存地址 xxxfff111,我們發(fā)現(xiàn)這個地址還用到了一次,那么當前的這個fn形成私有作用域（A）就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變?yōu)?1；當xxxfff111執(zhí)行完了,發(fā)現(xiàn)這個地址沒用了,瀏覽器就把A、xxxfff111都釋放了

fn()(20);//->在執(zhí)行fn的時候一切都從新開始了,和上面的步驟是一樣的->輸出30

3)作用域的不銷毀：形成一個私有作用域,里面的內(nèi)容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn執(zhí)行形成一個私有的作用域A,A中有一個私有的變量i=10,A中返回一個地址xxxfff11,被外面的f占用了,那么當前的A就不能銷毀了
f(15);//->輸出25,讓A中的i=11
f(20);//->輸出31,讓A中的i=12
…
當我們知道f用完的時候,為了優(yōu)化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了


幾種不銷毀常用到的形式:
1)函數(shù)執(zhí)行,返回一個引用數(shù)據(jù)類型的值,并且在函數(shù)的外面被別人接收了,那么當前函數(shù)形成的私有作用域就不在銷毀了–>例如上面的案例

2)在函數(shù)執(zhí)行的時候,里面的一個小函數(shù)的地址賦值給了我們的外面元素的點擊事件,那么當前小函數(shù)也相當于被外面占用了,大函數(shù)執(zhí)行形成的私有的作用域也不銷毀了
//每一次循環(huán)都執(zhí)行自執(zhí)行函數(shù)形成一個私有的作用域(循環(huán)三次就有三個作用域,每一個作用域中都有一個i,第一個存儲的是0,第二個存數(shù)的是1..)，在每一個私有的作用域中都把里面的函數(shù)綁定給了外面元素的點擊事件,這樣的話每一次形成的作用域都不銷毀了(三個不銷毀的作用域)
var oLis=document.getElementsByTagName(“l(fā)i”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}

3)在使用setTimeout實現(xiàn)輪詢動畫的時候,我們?nèi)绻鹠ove需要傳遞參數(shù)值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
function move(tar){
<js code>

//window.setTimeout(move,10); ->第二次執(zhí)行move的時候我們沒有給它傳值(這樣寫不行)
window.setTimeout(function(){
move(tar);
},10);//->這樣寫實現(xiàn)了,但是每一次執(zhí)行定時器都會形成一個私有的所用域(匿名函數(shù)形成的)A,在A中使用了上級作用域中的tar的值,而且執(zhí)行了move又形成了一個小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時器形成的A都不能銷毀了
}
move(100);//->第一次這樣執(zhí)行傳遞100

//解決辦法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次這樣執(zhí)行傳遞100


JS中內(nèi)存空間釋放的問題（堆內(nèi)存、棧內(nèi)存）
[谷歌瀏覽器]
我們開辟一個內(nèi)存，可能或有一些其他的變量等占用了這個內(nèi)存，谷歌瀏覽器都會間隔一段時間看這個內(nèi)存還有沒有被占用，如果發(fā)現(xiàn)有沒有被占用的內(nèi)存了，就自己幫我們回收了(內(nèi)存釋放)

[火狐和IE]
我們開個內(nèi)存，當我們引用了它，就在內(nèi)存中記錄一個數(shù),增加一個引用瀏覽器就把這個數(shù)+1，減少一個引用，瀏覽器就把這個數(shù)-1…當減到零的時候瀏覽器就把這個內(nèi)存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了，內(nèi)存就不能釋放了–>瀏覽器的內(nèi)存泄露

var obj={};
我們養(yǎng)成一個好的習慣，當我們obj這個對象使用完成了，我們手動的obj=null (null空對象指針)，瀏覽器會自己把剛才的堆內(nèi)存釋放掉


藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(2425)

前端常用class命名

周周

頭：header

內(nèi)容：content/container

尾：footer

導航：nav

側(cè)邊欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左中右：left center right

登錄條：loginbar

標志：logo

版心：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權(quán)：copyright

滾動：scroll

標簽頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標題：title

加入：joinUS

指南：guide

服務：service

注冊：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

評論(0) 瀏覽(2787)

卡片式UI設計欣賞

藍藍設計的小編

在設計中，卡片上設計是屢見不鮮的，比如：用在UI產(chǎn)品的包裝排版、APP/web的列表排版、banner輪播的設計、導航的切換等。在這些上做出很多別出心裁的卡片視覺設計及炫酷的動畫效果，都能帶給用戶很好的體驗。

評論(0) 瀏覽(3912)

前端js中動態(tài)添加的元素不能觸發(fā)綁定事件解決方法

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

問題描述：在頁面選擇關(guān)鍵詞時，需要將關(guān)鍵詞元素綁定點擊事件使同一類型的關(guān)鍵詞只有一個固定class，使其隨點擊更換，目的是為了讓這一類型的關(guān)鍵詞的值可以由class獲取。在原本寫死的關(guān)鍵詞上綁定的事件是可用的，但是換成動態(tài)加載后發(fā)現(xiàn)只能適用于寫死的情況。很無奈，在網(wǎng)上搜索一番后花了點時間終于解決了，下面奉上。  

參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1

原本綁定事件如下：

[javascript] view plain copy
  1. //查詢條件class的加載和移除（不能綁定動態(tài)加載的標簽）  
  2. $('.value_list').children.click(function(){     
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  

針對的HTML元素如下：

[html] view plain copy
  1. <div class="value_list value_list1" style="width: 80%;" id="subject">  
  2.     <span class="mr36" onclick="selectTopic(0)" value="0">全部</span>  
  3.     <a href="javascript:;" onclick="selectTopic("6eac9783353d40bba49e6b253e73f285")" value="dayu" types="subject" class="a-time">dayu</a>  
  4.     <a href="javascript:;" onclick="selectTopic("f9cbaa888cf34a99b6c50bf393e1a859")" value="天下會" types="subject" class="">天下會</a>  
  5.     <a href="javascript:;" onclick="selectTopic("3f4aa8924c88466dafc63d52aa57e7a6")" value="大雨" types="subject">大雨</a>  
  6.     <a href="javascript:;" onclick="selectTopic("87259765e9174a3b9d97f00a461e90bd")" value="士大夫" types="subject" class="">士大夫</a>  
  7. </div>  

但是發(fā)現(xiàn)，原先的事件不能用于動態(tài)加載的元素，如上面加載的，加載形式如下：

[javascript] view plain copy
  1. //獲取關(guān)鍵詞列表  
  2. function getlist(){  
  3.     $("#subject").html("");  
  4.     $.ajax({  
  5.         type: "POST",  
  6.         url:path+"/key/queryKeys.php",  
  7.         dataType : "json",  
  8.         success: function(result) {  
  9.             var data = result.data;  
  10.             console.log(data+" 888");  
  11.             if(data!=''){  
  12.                 var html='<span class="a-time mr36" onclick="selectTopic(0)" value="0">全部</span>';  
  13.                 for(var i=0;i<data.length;i++){//如果不加"則只能傳遞數(shù)字變量而不能傳遞帶有字母的變量，加上"則無影響  
  14.                 //  html+='<li class="fl"><i class="iconfont close" onclick="del("'+data[i].kw_id+'")"></i>'+data[i].kw_word+'</li>';  
  15.                     html+='<a href="javascript:;" onclick="selectTopic("'+data[i].kw_id+'")" value="'+data[i].kw_word+'" types="subject">'+data[i].kw_word+'</a>'  
  16.                 }                             
  17.                 $("#subject").html(html);  
  18.             }else{  
  19.                 alert("請先登陸！");   
  20.             }  
  21.         }  
  22.          });   
  23. }  

無奈，只能上網(wǎng)尋求萬能的大神了。

基本上提供的解決方案就兩個，使用 

$('element').live('click',function(){})

或者 

$('父元素').on('click', '子元素', function(){})

我先是使用.live嘗試了下，發(fā)現(xiàn)gg，心灰意冷ing；本著試一試不要錢的心態(tài)又用.on試了下，結(jié)果令人驚喜??！可以使用了，哎，這鬼玩意坑死人。

下面上針對我加載的界面元素寫的綁定事件：

[javascript] view plain copy
  1. //查詢條件class的加載和移除（適用于動態(tài)加載標簽的情況--on事件需要jquery在1.6以上）  
  2. $('.value_list').on('click','a,span',function(){  
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
  4. ;  

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(2978)

懶加載封裝實現(xiàn)

周周

1.什么是懶加載？
         當訪問一個頁面的時候，先把img元素背景圖片路徑替換成一張?zhí)娲鷪D片的路徑（這樣就只需請求一次，占位圖），將圖片的真實路徑存儲在img自定義屬性中，只有當圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
2.為什么要用懶加載？
       很多頁面，內(nèi)容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數(shù)量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢，提高首屏加載速度，可以減輕服務器壓力，節(jié)約流量，用戶體驗好。
3.懶加載實現(xiàn)封裝？

    lazyLoad由四個函數(shù)組成，init(初始化函數(shù))，checkShow（判斷圖片是否加載），shouldShow（將要展示的圖片），showImg（展示圖片）。

（1）初始化函數(shù)(init)  由于滾動事件太消耗性能，所以用定時器替換,不是滾動就觸發(fā),而是滾動后200毫秒后觸發(fā)。

                var timer;
                function init(){
                    $(window).on("scroll",function(){
                        if(timer){
                            clearTimeout(timer);
                        }
                        timer = setTimeout(function(){
                            checkShow();  //
                        },200);
                    });
                }

（2）判斷”圖片是否加載“（checkshow）函數(shù)，如果圖片有isload屬性，就說明圖片已經(jīng)加載過了，直接return。如果圖片沒有isload屬性，進入將要展示圖片shouldshow函數(shù)

                function checkShow(){
                    $lazyLoad.each(function(){
                        $cur = $(this);
                        if($cur.attr('isLoaded')){
                            return;
                        }
                        if(shouldShow($cur)){
                            showImg($cur);
                        }
                    });
                }

（3）將要展示圖片shouldshow函數(shù)，獲取屏幕可視寬度，滾動高度，要展示的元素到文檔的高度，如果元素到文檔的高度小于屏幕的可視高度加上滾動高度，說明元素已在可視區(qū)內(nèi)，返回true，否則返回false。

               function shouldShow ($node){
                    var scrollH = $(window).scrollTop(),
                        windowH = $(window).height(),
                        top = $node.offset().top;
                    if(top < windowH + scrollH){
                        return true;
                    } else {
                        return false;
                    }

                }

（4）“展示圖片”函數(shù)，將元素的src屬性替換為自定義屬性data-src(真正圖片的地址)。

                function showImg ($node){
                    $node.find("img").attr("src",$node.data("src"));
                    $node.attr("isLoaded",true);
                }

（5）函數(shù)返回一個對象

              return {
                        init : init
           }

      這樣就實現(xiàn)懶加載封裝了！

評論(0) 瀏覽(2763)

MIUI 10月底發(fā)布，界面UI搶先看，網(wǎng)友：千萬別太臃腫

藍藍設計的小編

今天上午小米MIUI正式宣布，在5月31日的年度旗艦發(fā)布會上同時發(fā)布MIUI 10，相信不少的小伙伴已經(jīng)饑渴難耐了吧。

評論(0) 瀏覽(2506)

設計師必須要掌握的版式基礎(chǔ)大全

資深UI設計者

一、關(guān)于平面設計知識

提起平面設計，也許很容易聯(lián)想到平面設計師。其實平面設計不僅是職業(yè)也是一個重要的設計知識體系，在我工作中發(fā)現(xiàn)平面設計知識是UI設計和其他設計領(lǐng)域中必備的能力，然而很多朋友認為「平面設計是屬于紙媒行業(yè)的事」而忽略這部分知識的重要性，為此我想簡明地將平面設計知識體系中最重要的知識點提出供大家汲取。

平面設計（graphic design），也稱做視覺傳達設計，是指在二維平面內(nèi)通過多種設計組合來借此傳遞信息的視覺表現(xiàn)設計。平面版式設計需要使用字體知識（Font）、視覺設計（Visual Design）、版面（Layout）等方面的專業(yè)技巧來達成創(chuàng)作計劃的目的。平面設計非常重視版式的設計，而版式并非只有紙媒才需要重視。如果想做好移動端設計、網(wǎng)頁設計甚至是別的領(lǐng)域的設計，那么一定要加強學習平面版式的基礎(chǔ)知識。

二、平面構(gòu)成

在我們開始學習平面版式基礎(chǔ)之前，我們先來講一下簡明平面構(gòu)成原理。平面構(gòu)成是運用點、線、面和其他技法來構(gòu)成基本元素的學習方法。它是在我們工作之前必須要學會的視覺語言。以下的內(nèi)容希望如果您有時間進行練習，邊練邊攝取知識效果才能更好。

1. 點的構(gòu)成

點是組成平面構(gòu)成的基礎(chǔ)要素。點可以是不同大小的；可以是不同疏密的；可以是不同虛實的?？梢允钦R的點，也可以是隨意排列的點。在一個畫面上也可以有大小、疏密、虛實、整齊和隨意對比的，對比就會產(chǎn)生韻律感。僅僅依靠點來構(gòu)建畫面時，我們會想方設法地讓畫面豐富，體會點的變化。

2. 線的構(gòu)成

線有哪些呢？垂直線、水平線、斜線、曲線等。垂直和水平都會有穩(wěn)定的感覺，斜線會更加有沖擊力，曲線會感受更加柔和。由不同粗細、不同韻律的線條組合，作品將更加有視覺引導的效果。嘗試只用線條構(gòu)建一個畫面，你會體會到不一樣的視覺感受。

3. 面的構(gòu)成

面的種類有不規(guī)則形狀和幾何形狀兩種。在《紀念碑谷》游戲中有個詞叫做「神圣幾何」，我非常的喜歡。幾何圖形真的是很神奇的存在，幾何形是可以用數(shù)學表達出來的，也是我們在初中時就開始學習的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺上是非常令人感覺舒適的，如果你在創(chuàng)作時沒有靈感時，可以從幾何形中尋求靈感。不規(guī)則形狀其實也可以分解成不同的幾何形的組合。

4. 平面構(gòu)成的八種形式

平面構(gòu)成的形式有重復構(gòu)成形式、近似構(gòu)成形式、漸變構(gòu)成形式、發(fā)射構(gòu)成形式、密集構(gòu)成形式、對比構(gòu)成形式、肌理構(gòu)成形式等，如果平時您發(fā)現(xiàn)在工作中排版的圖形能力比較差，那么建議您了解一下構(gòu)成形式加以練習。

5. 重復構(gòu)成形式

重復構(gòu)成形式就是用一個基本的元素在一定的形式下重復排列，排列對方向和疏密會產(chǎn)生一種秩序的美感。談起重復構(gòu)成，我想順便介紹一下重復構(gòu)成的兩種方式：第一種：二方連續(xù)。二方連續(xù)是圖案的一種組織方法。二方連續(xù)是由一個單位紋樣向上下或左右兩個方向反復連續(xù)而形成的紋樣。第二種：四方連續(xù)，是由幾個紋樣組成一個單位向四周重復地連續(xù)和延伸擴展而成的圖案形式。

6. 近似構(gòu)成形式

近似構(gòu)成形式是使用相似的元素進行構(gòu)成的一種方式。近似構(gòu)成講求在統(tǒng)一中帶有變化。設計上采用基本形狀之間相加相減求得近似的基本形。基本形類似的構(gòu)成形式就是近似構(gòu)成形式。總結(jié)來說就是看著一樣實則要有變化。

7. 漸變構(gòu)成形式

漸變構(gòu)成形式是把基本元素的大小、方向、虛實、色彩等關(guān)系進行漸次變化排列的構(gòu)成形式。漸變可以是通過顏色、方向、虛實的變化也可以是通過外形的變化來完成，不一定是我們通常理解的顏色漸變。

8. 發(fā)射構(gòu)成形式

發(fā)射構(gòu)成形式是以一個點或多個點為中心向周圍發(fā)射擴散等效果，就會具有較強的動感及節(jié)奏感。首先我們需要有骨骼線。骨骼線就是我們畫面走向的一個看不見的線索。其次我們可以選擇使用離心式、向心式、同心式幾種發(fā)射方法來設計。

9. 特異構(gòu)成形式

特異構(gòu)成形式是在整體畫面都有規(guī)律有固定形態(tài)的狀況中進行小部分的變異以突破單調(diào)畫面的形式。特異構(gòu)成的部分可以用顏色、形狀、線條等方法來做。很多運營類設計也會應用到特異構(gòu)成形式。

10. 密集構(gòu)成形式

密集構(gòu)成就是在畫面中使用大量重復密集的元素來給觀察者一種壓迫感和與留白的對比，密集構(gòu)成很容易給觀察者造成震撼和心理壓力。

11. 對比構(gòu)成形式

我們做對比構(gòu)成的時候，可以使用元素的形狀、大小、方向、位置、色彩、肌理等進行對比，以及重心、空間、有與無、虛與實的關(guān)系元素的對比。對比會產(chǎn)生強烈的反差和感官刺激。

12. 肌理構(gòu)成形式

視覺可理解的物體表面圖案的紋理，我們就叫做肌理，以肌理為構(gòu)成的設計，就是肌理構(gòu)成。我們在做肌理構(gòu)成時如果用Photoshop的時候會非常的方便，可以用圖案、貼圖等方式。

三、排版中的元素

在平面設計的過程中，我們其實是在組織圖片、文字、按鈕、圖標等最小元素的信息架構(gòu)。這些元素是畫面中的最小單位，它們本身就附著著某個信息，比如作品的標題、一個功能、去展覽的地址、一個景點的照片等。這些排版中的元素需要我們放在畫面中，不可以因為好不好看而刪去必要的信息，然后根據(jù)他們的重要性進行排列組合。

1. 字體

字體是排版中最重要的元素，也是最直接的信息傳達方式。一般來說設計師通常需要了解的字體有中文和西文字體兩種：西文字體由來已久，由最早的羅馬字體到我們現(xiàn)在蘋果手機里的SFUI字體，西文字體經(jīng)歷了許多的設計上的變革。西文字體可以分為：羅馬字體或襯線體（roman，serif）、無襯線體（sanserif）、手寫體（s cript）、雕刻字系（glayphic）、典籍體字系（Classical）、裝飾體字系（decorative）、展示體字系（Display）、當代字體字系（Contemporary）、符號字系（Symbol）等。中文字體由于起先版權(quán)不夠重視其實并沒有西文字體發(fā)展得順利，數(shù)量上也遠遠落后于西文字體甚至是日文字體。好在中國設計正在崛起，在一大批設計師前赴后繼的努力中，中文字體的數(shù)量正在呈指數(shù)級別增加。中文字體分為三種：第一種是黑體（筆畫上沒有裝飾的字體）。黑體也有不同的具體字體如蘋方、微軟雅黑、思源等；第二種是由書法作品演變來的字體如從宋代活字印刷而來的宋體（對了，日本因為誤解原因?qū)⑺误w叫做明朝體）、楷體、仿宋體、行楷、隸體、魏體、舒體、顏體以及鋼筆書寫的字體；第三種是美術(shù)字體，比如綜藝體、美黑體、水柱體、娃娃體等。

2. 族類（generic family）

這里我引用了前端工程師在CSS樣式表（一種用來表述網(wǎng)頁樣式的代碼）中的族類概念。常見的族類有五種：襯線體（serif）、非襯線體（sans-serif）、手寫體（cursive）、夢幻字體族（fantasy）、等寬字體族（monospace）。襯線體的特點就是筆畫結(jié)尾處有裝飾的處理，比如我們熟悉的Times New Roman、Georgia、宋體等。非襯線字體粗細比較均勻，比較現(xiàn)代并且在縮小的情況下依舊保持了可讀性。非襯線字體如Arial、Helvatica、幼圓、楷體等。手寫字體族就是由手寫而產(chǎn)生的字體，比如迷你簡黃草、Caflisch s cript等。夢幻字體族聽上去稍顯非主流，但是也是字體中不可忽視的一支力量。常見的夢幻字體族有WingDings、WingDings 2等。等寬字體族將西文的二十六個字母全部變成等寬，這樣做的好處就是排版大大地輕松了。常見的等寬字族有Courier、Prestige等。總體來說字體的族類是襯線體和非襯線體兩個大類，大家可以簡潔地記憶：襯線就是筆畫處有裝飾的字體族，非襯線就是筆畫較為相同粗細的字體族。

3. 字族（font family）

一個族類下面是不同的字體，然而一個字體又可能有好幾個字族。字體文件中通常會包含幾個字族，如果你安裝了Helvetica，在Photoshop中你會發(fā)現(xiàn)字體選擇器下包含了三十多個前綴是Helvetica的字族。原因很簡單，字體設計師除了設計從A到Z的大小寫字體、從0到9的數(shù)字、標點符號后，還為我們設計了同樣字體的不同族類來協(xié)助我們在不同地使用場景下表達合適的意思。字族一般有：正常（Regular）、窄體（Narrow）、斜體（Italic）、粗體（Bold）、粗體斜體（Bold Ltalic）、黑體（Black）等等。雖然字體的字族有多有少，但是一般都具有正常、斜體、粗體、粗體斜體四種基本字族。應用場景上：粗體通常表示強調(diào)、斜體表示引用、正常是正文。很多時候我會發(fā)現(xiàn)很多設計師亂用斜體，其實斜體的設計并不是為了好看，而是在書中代表本段文字來自引用另一個著作的含義。

舉個使用斜體的例子：「設計的作用在于尋找功能和社會間的接點，在功能足以說明一切的前提下，裝飾成分是可以節(jié)制的，如何把握節(jié)制的度是考驗一個設計師是否成熟的標尺?！?-《設計的覺醒》田中一光

4. 字重（Font Weight）

一個字族中的任何一個字體也會有不同的筆畫粗細變化。這種粗細變化的字體稱之為字重（Font Weight），字族后面的字重選項如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一個字族下的不同粗細變化。實際上，國際標準 ISO組織規(guī)定了九種字重，但是由于有些字重不常見，我們就記憶以上七種字重即可。中文字體也有相應的字重，如「極細」、「細」、「標準」、「常規(guī)」、「中等」、「粗」、「特粗」。在使用場景中，如果我們需要強調(diào)一個內(nèi)容，比如標題時，一般會用粗體；如果在正文的設計中，那么就會用常規(guī)或標準等字體。英文也類似，這些字重是為了我們突出文字使用的。注意一點：在PS中我們也可以通過字體面板給文字人工加粗，這種加粗如果變成形狀時會提示「該字體使用了加粗樣式，不能變換」，所以可見這種人工加粗是有一點缺陷的。

5. 字體的氣質(zhì)

任何字體都具有自身的氣質(zhì)。比如一款圓角萌萌的字體會給人溫柔調(diào)皮的感覺；而邊角鋒利的字體會給人一種強硬的感覺；書法字體會讓用戶覺得充滿中國風和個性；瘦長纖細的字體會給人一種未來感等等。每個字體都具有一定的感受，這與色彩心理學中每種顏色帶給人不同的感覺一樣，字體的外形和筆畫也會給人一些心理暗示。

6. 全角與半角

全角指一個字符占用兩個標準字符位置。中文字符、全角的英文字符、國標GB2312-80中的圖形符號、特殊字符都是全角字符。半角指字符占用一個標準的字符位置。

通常的英文字母、數(shù)字鍵、符號鍵都是半角字符。半角全角主要是針對標點符號來說的，因為正常情況我們沒有打全角英文的需求。

半角英文 english

全角英文 ｅｎｇｌｉｓｈ

半角符號 ,.’」;:{}_+!@#$%^&*()

全角符號，＇＂；：｛｝＿＋！＠?！纾ィ蓿Γǎ?

計算機編程基于英文，也就是半角字符。所以在編程中符號一定都是半角的，如：

name=”郗鑒”

全角符號編程就會無效，如：

name=「郗鑒」

在我們設計作品時也一定要記得中文搭配全角符號，英文搭配半角符號。不要出現(xiàn)如「好的．」或者「ｔｈａｎｋｓ?！惯@樣的錯誤。全角半角的切換在中文輸入法下按SHIFT+空格可相互轉(zhuǎn)換，這個知識點雖然非?；A(chǔ)，但是無疑我們經(jīng)常看到用錯的設計。

7. 文字排版八條定律
  • 第一，保證文字是可讀的。
  • 第二，不要在一個版面中使用三種以上的字體。
  • 第三，如果英文標題或單獨進行排版時，盡量全部使用大寫而非首字母大寫。中文標題或單獨進行排版時結(jié)尾不需要句號。
  • 第四，文字之間的間距在UI設計中一般設置為0，行距一般為字號本身的1.5倍到2倍。但是考慮到用戶使用場景，比如用戶在地鐵內(nèi)閱讀新聞時可能地鐵會出現(xiàn)晃的情況而導致串行，就需要我們考慮增加行距?？傊珠g距和行距以及文字大小都要依據(jù)實際場景來決定。在UI設計中文字大小單位須設置成PX（像素），大小必須是偶數(shù)。如：24px、26px、28px等。
  • 第五，文字閱讀需要清晰地背景區(qū)分，比如黑紙白字和白紙黑字原則。
  • 第六，除非不得已盡量避免在一個版式中使用中英文混排。
  • 第七，文本左邊對齊同時右邊也需要對齊?？梢酝ㄟ^PS中的段落面板設置間距組合和避頭尾法則，但是有時半角符號可能會讓我們很棘手，那就要通過調(diào)整間距和空格等方式讓文本盡量對齊。
  • 第八，中文前面需要空兩個全角字符空格，英文前面無需空格，但需要大寫。

四、圖片

我們在一個設計中一定會依靠一些配圖或者照片素材來進行排版。有時我們會選擇尋找素材或者是自己去拍，無論如何，作品中使用的圖片一定要與整體設計色調(diào)相符，冷色暖色中性色都要符合整體的色調(diào)，一定是鄰近色或?qū)Ρ壬壬赎P(guān)系，不要因為自己的主觀放置沒有色彩關(guān)系的配圖或者會抵消畫面色彩傾向的配圖。另外注意色彩會產(chǎn)生「水彩效果」，即兩種顏色放在一起，如果其中一種是灰色或者比較臟的顏色，那么另一個顏色在我們大腦中也會感覺變臟了。類似于這種效果可以在作圖中慢慢體會。

1. 圖文比例

在一個設計中，圖片與文字的量應該有一定的對比。人天生喜歡看圖片而不是閱讀，實際上人類有閱讀能力的歷史只有幾千年，而欣賞圖片的能力是天然的。如果你的需求上文字需求非常多，嘗試與需求方商討減少文字量。文字量越少，圖形化設計越多，那么視覺上這個作品看起來就更輕松。

2. 圖片比例

在平面設計中，因為最終目的是印刷，對我們的圖片尺寸沒有非常嚴格的要求。但是如果我們是為了互聯(lián)網(wǎng)產(chǎn)品的設計的話，可能會涉及一些需要網(wǎng)站編輯直接上傳的圖片，如果你的尺寸不是一個固定尺寸，那么可能原本網(wǎng)站編輯不需要裁剪圖片而可以直接上傳的工序，要因為我們的一個尺寸變得很復雜。所以請牢記以下三個尺寸：4:3，16:9，1:1。4:3的原因是相機的畫幅一般是4比3，所以我們看到的新聞客戶端的圖片大多是4:3。16:9的原因是視頻寬熒幕畫幅就是16:9，所以我們看到視頻網(wǎng)站的截圖一般都是直接由機器抓取的圖片。1:1一般用于封面等圖片素材的尺寸是正方形的。

五、排版的CRAP原則

1. 排版中的邏輯關(guān)系

任何一個設計中都需要把各個元素分級分清主次，這樣才能更好的抓住重點。你可以想象自己在管理著一部瑪麗蘇電視劇，這部劇中誰是主角？誰是女二號？誰是群演？主角需要獨立的化妝間和助理；女二號可能只有一個助理；群演可能就是整個劇里的一個過客。我們的設計也是如此，哪個信息是主角？哪個信息是女二號？哪些元素又僅僅是群演呢？女主元素首先要站C位（網(wǎng)絡流行詞，來源center）霸占畫面的中心，然后這個元素要盡量突出，可以使用更鮮艷的顏色、更夸張的字重、加邊框等方式突出；女二號信息一定不要搶了女主信息的風頭，所以要和女主元素有一定的對比，字號上也要小很多，盡量讓用戶第一眼看到主要元素。而群演的元素一定要淡化，僅僅讓人感知有這些元素就可以了，比如文字可以縮小到剛剛能注意到，顏色可以是接近背景色等。那么如何讓這些信息按照他們的身份來排版呢？我們就要用到CRAP原則了，CRAP是這四個原則的首字母縮寫，分別是對比、重復、對齊、親密性四個原則。

2. 對比 CONTRAST

在同一個視覺區(qū)域內(nèi)的邏輯不同的元素應該有所區(qū)別，避免視覺上相似。這樣就可以有效地區(qū)分誰是主角誰是配角了。為了讓主要元素更突出，讓次要元素更后退，我們可以盡量使它們的顏色、字體、大小、留白不同。如果兩個元素不盡相同，請讓它們截然不同。比如如果你想使用12px的正文與14px的標題區(qū)分明顯，不如用12px與40px進行區(qū)分反差更大，更容易區(qū)分哪個內(nèi)容是需要優(yōu)先瀏覽的、哪個內(nèi)容是次要的。對比的方式有以下幾種：

色彩對比

在我們排版時首先要產(chǎn)生對比效果的就是背景和文字了。文字是第一閱讀元素，背景和文字如果顏色很接近，那么就不容易區(qū)分出來引發(fā)注意了。一般來說在很多媒介的設計中我們習慣了白紙黑字，即白色背景和黑色文字。我指的不僅是純黑和純白，也包括其他類似明度顏色的對比。黑紙白字是另一個選擇，深色背景和淺色文字的搭配其實不適合大量閱讀，如果你的作品信息不多是沒有問題的，但是如果用戶閱讀很久黑紙白字的界面，就會產(chǎn)生視疲勞（比如再次盯著白色的墻的時候文字還會出現(xiàn)等）不舒服的感受。當然一切取決于用戶使用場景，如果我們的設計被應用在夜晚等較暗的環(huán)境，黑紙白字更利于閱讀?？傊还苣愕脑O計采用橙藍、黑白、藍紫配色，一定要記住文字和背景的對比關(guān)系。

除了文字之外，圖標和其他裝飾信息的色彩對比也是非常重要的。輔助信息或者輔助功能的圖標盡量淡化以突出主要功能和圖標；重要功能如訂單等按鈕則需要突出和醒目。色彩對比是設計中一個非常常見的手法。

大小對比

大小對比是指文字、圖片、圖標等元素為了區(qū)分重要性采用的區(qū)分方法。比如兩行文字：郗鑒和相聲演員，同屬文字但權(quán)重不同：第二行的文字用于解釋第一行的內(nèi)容，所以第二行內(nèi)容應該通過大小和顏色變成次級，讓用戶閱讀時分清主次。與此類似，比如音樂播放界面中的三個按鈕一般并排放在一起：上一首歌、播放、下一首歌，哪個應該更大呢？當然是常用的、重要的功能-播放按鈕。當然如果圖標同屬一個級別也應該放在一個尺寸的級別上。

3. 重復 REPETITION

如果相同的內(nèi)容（如標題等）屬于同一個邏輯，可使它們的顏色、字體、大小、留白保持相同。這樣可以增加條理性和加強設計的統(tǒng)一性。這個原則看似簡單，但是新手很容易犯這個問題，所以再次提醒，一個級別的信息盡量使用一種設計來保持用戶的認知，避免用戶認為是另一種信息分類。這就是重復原則。在一個屬性或邏輯單元里的內(nèi)容應該盡可能地使用重復的顏色、大小、間距。我們來看，一個注冊頁面可含有：注冊、登錄、忘記密碼、跳過等內(nèi)容。如果我們把登錄頁面分為四個屬性，那么可能我們需要四種字體或四個不同的區(qū)域。但如果我們把它們分為兩類呢？注冊和其他。那么同一個分類就可以重復使用一種字體了。看上去就不會很亂了。在重復原則下，用戶會因為視覺慣性變成尋找線索的「僵尸」，會根據(jù)線索而順暢地瀏覽下去。

 

4. 對齊 ALIGNMENT

任何內(nèi)容在版面上都盡量應該上下左右對齊。隨意擺放絕對是錯誤的。這一點一定要和大家多次強調(diào)，比如一個元素上下左右的間距都要是一樣的。大家看到網(wǎng)頁和app設計之中經(jīng)常會有間距和留白，留白和對齊都是我們在設計時需要考量的，留白不是隨意的。

5. 親密性 PROXIMITY

在邏輯上有關(guān)系的兩個元素應該盡量放在一起。兩個視覺元素在一起就會變成一個視覺單元。比如注冊頁面中的登錄視覺單元是由輸入表單和登錄按鈕組成的。相同的內(nèi)容，如小標題等，屬于同一個邏輯?？墒顾鼈兊念伾?、字體、大小、留白保持相同，這樣可以增加條理性和加強設計的統(tǒng)一性。

六、用戶瀏覽定律

左到右閱讀：從左到右是受現(xiàn)代社會影響后天影響我們的一種習慣。我們看一個比較大面積的設計時也會從左到右依次閱讀，這也就是為什么網(wǎng)站的logo都在左上角。從上到下閱讀：我們閱讀作品時也是從上到下依次閱讀，所以重要的內(nèi)容一定在上面，按優(yōu)先級來排列。從大到小閱讀：我們的視覺也是比較調(diào)皮的，如果一個元素很大，我們也會首先去注意大的元素再依次看中等和小的元素。從重到輕：元素的顏色也會影響我們閱讀的順序，從重到輕依次瀏覽。狩獵式閱讀：狩獵式閱讀用戶在尋找可以完成當前界面或設計中的任務線索，比如在購買頁面中會尋找支付按鈕等。S曲線閱讀：S型曲線閱讀比較適合比較大的設計，眼球需要左顧右盼從上到下來瀏覽信息，在S型的瀏覽方式下比較能夠全面地觀察每個頁面元素，S型成了目前主流的視覺導向模式。那么在S型曲線中，我們的對其方式有三種：左對齊、右對齊、居中對齊。重點元素可以依次左右擺放，讓用戶有一個視覺瀏覽的慣性，左-右-左-右-左-右。

七、構(gòu)圖

上面我們介紹了一些排版和平面的基本原理。那么實際上我們在應用中要做的就是將這些知識運用在具體的需求里。讓多個元素能夠完美地展現(xiàn)在一個畫面里也是一種能力，我們管這種能力叫做構(gòu)圖能力。那么下面我來簡單講一下構(gòu)圖能力有哪些要點。

1. 重心

我們的任何一個排版里都會出現(xiàn)重心。重心是我們?nèi)祟惖囊粋€心智模型，我們從物理世界里學習了重心的規(guī)律，在看平面作品的時候也會莫名地關(guān)注重心問題。在設計中我們可以利用這一點創(chuàng)作出傾斜的重心、居中的重心、左對齊的重心等。但是請大家注意，如果我們的排版里一個單元是居中的，那么這個單元內(nèi)的元素也應該重心居中而不應該重心不穩(wěn)，否則會感覺大廈即將傾倒。

2. 骨骼

設計某個元素或者幾個元素組成的單元也要注重骨骼，骨骼有外延骨骼和內(nèi)在骨骼兩種。在做完設計以后可以將作品元素的外圍連個線，看看是什么形狀。有時我們會發(fā)現(xiàn)一些骨骼不好的設計確實會給人不舒服的感受。

3. 柵格系統(tǒng)

1692年法國國王路易十四命令成立管理印刷的皇家特別委員會。委員會由數(shù)學家尼古拉斯加宗（Nicolas Jaugeon）擔任領(lǐng)導，他們采用方格為設計依據(jù)，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣印刷版面就有 2304個小格組成，在嚴謹?shù)膸缀尉W(wǎng)格中設計字體和版面來試驗視覺傳達的功能。柵格系統(tǒng)英文是「grid systems」，是一種平面設計的方法。柵格系統(tǒng)運用固定的格子設計版面布局，其風格工整簡潔，這種方法現(xiàn)在也被應用在移動設備和網(wǎng)站設計等領(lǐng)域里?？茖W的柵格會給人一種秩序的美感和現(xiàn)代感。

△ 網(wǎng)格系統(tǒng)在書籍排版的應用 作品:Dale magazine by Rocio Gomez

△ 網(wǎng)格系統(tǒng)在圖形中的應用 作品:Pixty App Branding by Ramotion

4. 為你的設計建立柵格

我們在設計任何作品時，首先考慮的是應用的尺寸。如iPhone8的分辨率為750x1334px、安卓1080P分辨率為1080x1920px等。在我們確立了我們排版的尺寸后，我們就可以根據(jù)這個寬度設計可以被整除的柵格了。我們把整體寬度定義為W。然后整個寬度分成多個等分單元A。每個單元A中有元素a和間距i。所以他們之間的關(guān)系就是 W =（a×n）+（n-1）i 。當然每個應用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過多內(nèi)容的柵格和另一個柵格相加得到更大的排版空間；其他元素都須老老實實呆在自己的柵格內(nèi)，這樣就完成了一個布局非?？茖W的設計了。

比如一個網(wǎng)頁寬度是1000px的情況中我們可以使用：20列每列40px和10像素間隔、20列每列30px和20像素間隔、25列每列30px和10像素間隔、25列每列20px和20像素間隔。如果網(wǎng)頁寬度是990px我們可以使用：11列每列80px和10像素間隔、18列每列35px和20像素間隔、25列每列45px和10像素間隔、33列每列20px和10像素間隔。如果網(wǎng)頁寬度是頁寬980px我們可以使用：14列每列60px和10像素間隔、14列每列50px和20像素間隔、28列每列25px和10像素間隔。

6. 8像素柵格

用8當然不是因為數(shù)字吉利，而是因為 8 是偶數(shù)，并且8可以被成倍縮小三次?。ň褪?可以縮小一倍到4,4可以縮小一倍到2，這對于移動端適配來說太有優(yōu)勢了）考慮到移動設計中的適配特殊性，縮小到其它尺寸可能會出現(xiàn)虛邊和半像素，用偶數(shù)可以避免這種情況。 為什么是8？因為比如1920×1080、1280×1024、1280×800、1024×768都是8的倍數(shù)（盡管部分尺寸不是8的倍數(shù)，但也不會顯得奇怪）。除此之外，我們在做其它設計時也可以將不同的留白設計成有倍數(shù)關(guān)系的數(shù)字，比如10px、20px、30px等，讓設計內(nèi)部更有邏輯性。


7. 黃金比例

黃金比例是一個定義為 (√5-1)/2的無理數(shù)。 運用到的層面相當?shù)膹V闊，例如：數(shù)學、物理、建筑、美術(shù)甚至是音樂。 黃金比例的獨特性質(zhì)首先被應用在分割一條線段上。如果有一條線段的總長度為黃金比例的 分母加分子的單位長，若我們把他分割為兩半，長的為分母單位長度，短的為分子單位長度，則短線長度與長線長度的比值即為黃金比例。

黃金比例（以下簡稱「黃金比」）約為： 0.618:1。

△ 使用黃金比例設計出來的蘋果logo

8. 斐波那契螺旋線

斐波那契螺旋線也被叫做「黃金螺旋」，是根據(jù)斐波那契數(shù)列畫出來的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案，是自然界最完美的經(jīng)典黃金比例。斐波那契螺旋線，以斐波那契數(shù)為邊的正方形拼成的長方形，然后在正方形里面畫一個90度的扇形，連起來的弧線就是斐波那契螺旋線。

斐波那契數(shù)列（FibonacciSequence），又稱為黃金分割數(shù)列。在數(shù)學上，斐波那契數(shù)列是以遞歸的方法來定義：

F0=1

F1=1

Fn=Fn-1+Fn-2

△ 符合斐波那契螺旋線設計的Twitter logo

9. APP圖標中的柵格

以64px為一個單位，即a=64px。那么大正方形的邊長的一半=8a，大圓半徑=7a，中圓半徑=4.25a，小圓半徑=3a。 8a/(8a-3a)=1.6 小圓與大正方形接近黃金比 7a/4.25a≈1.647 中圓與大圓接近黃金比 4.25a/3a≈1.417 中圓與小圓比例接近√2 整個柵格系統(tǒng)中的尺寸都是通過黃金比例互相聯(lián)系的。

△ 內(nèi)部符合斐波那契螺旋線和黃金分割的IOS啟動圖標骨骼

iOS的啟動圖標非常重要。并且蘋果規(guī)定所有應用程序的啟動圖標都必須是圓角正方形作為圖標背板。這個背板也給我們了一些參考線，蘋果使用黃金分割和斐波那契螺旋線將畫面分割為若干部分。如果我們繪制啟動圖標時可以貼合這些參考線。8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ，中圓與大圓接近黃金比，4.25a/3a≈1.417 中圓與小圓比例接近√2。

總結(jié)

平面與版式的設計知識涵蓋了字體的選擇、圖片的選擇、平面構(gòu)成基礎(chǔ)、排版的CRAP原則、柵格化設計、黃金比例等多個知識點。如果我們現(xiàn)在接到一個需求，可以首先將內(nèi)容放進畫面并排列好重要性、然后選擇合適氣質(zhì)的字體和圖片、使用CRAP的排版原則將信息排成合理的順序、利用柵格化和黃金比例讓畫面更加科學、最后如果發(fā)現(xiàn)畫面比較空可以加入幾何形裝飾。怎么樣，思路清晰了嗎？平面與版式知識背后是人類讀取信息幾千年來形成的習慣以及現(xiàn)代社會約定俗成的閱讀方式和心理學等，要想成為一個優(yōu)秀的設計師，我們還需要進一步地了解設計背后的原理以及表達信息的多種方法。希望本篇文章能夠?qū)δ钠矫媾c版式設計有所啟迪。

評論(0) 瀏覽(2864)

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔