Loading，讓煩躁少一些

前一陣子，接到一個app切圖製作載入圓形進度條的任務，看到那個小進度條轉啊轉的，我若有所思…同時，一個做印象派製作間控制項設計的同學最近做了 改版，那個控制項登陸需要一些時間，看到他對loading載入條進行了優化，然後就一起交流了一下。作為一個剛畢業入行不久的新人，請允許我分享一下關於 討論loading載入後的一些心得…
 這是一個浮躁的年代，長聽到這樣的抱怨“好慢！”“等到死！”，每次看到那個轉啊轉的圈圈，或者是那個“loading…”後面那三個點不停滴閃動，心裡總是有莫名的焦躁，彼時的心情就好像下面這張圖片一樣，不知您是否有同感…


有人統計，用戶能夠忍受的最長等待時間大約在 6～8秒之間。8秒是一個臨界值，如果網頁載入時間在8秒以上，很有可能大部分訪問者最終都會離開該頁面。除非他一定要打開那個頁面。

以上三種是常見的loading方式，如果是我，我更希望看到第三種的進度條，因為我實在不知道第一個圈圈要轉多久才能算載入成功，也不知道第二個點點點要點到猴年馬月。
但是如果這個時候，介面除了看到“載入”以 外的東西，是否就能轉移用戶的注意力呢？比如我們在銀行排隊的時候，如果我們無時不刻看著自己手中的號碼 牌和叫號板，雖然知道自己大概什麼時候會輪到，但是依舊會無聊和煩躁。這時候銀行裡的一些宣傳單起到了很好的作用：比如各種銀行的理財產品，如果你不小心 還看到了適合自己投資的，肯定會激動不已，覺得這個等待時間給自己帶來的意外的收穫，即使沒有得到自己想要的資訊，也不會覺得那麼無聊了。又比如視頻在緩 沖的過程中，總是會放一段廣告，我一直弱弱滴認為這個好雞肋，捨不得放棄看那個視頻，但又要忍耐這個載入時候的廣告。但是如果廣告做得很棒，就一點都不煩 躁了，甚至還在評論裡看到求載入廣告的地址。網頁的loading就承擔了宣傳單跟載入廣告的作用。
在頁面局部載入時常能看到第一個圈圈的身影，不過每次看到這個圈圈都差不多，如果換一種轉圈的形式，也許會覺得“這個圈圈跟別的好像不太一樣”，通過好奇減少等待的焦躁。
下面我找了一些變過形的圈圈，是不是多了一些新意呢？


減少用戶的焦慮，可以給個允諾，示意他們還要載入多久，告訴現在的進度（有個進程百分比），算給一個定心丸。例如以下的方式：


其中上圖最下面一種進度條又有不同的設計：

上面兩種確定性進度條雖然都提示了現在的進程，但它們的差別是，第一種的進度條內容是純色，第二種進度條內容有動畫效果，如果這個進度條再某點 上突 然停住了，這時候會給用戶造成困擾，到底是卡死了還是這段的載入比較慢呢？如果是下一種進度條就一目了然，如果卡死，那動畫效果就沒了，如果依然有動畫效 果，那就說明只是這一段載入比較緩慢。
如果進度條再進行一些變形，不僅告訴了使用者現在的載入進程，還別有一種欣賞的意味：






PS：上右是搜狗實驗室的logo，但是這個創意做成loading也很棒啊，還加強了品牌印象。
除了進度條變形外，還可以從文案下手，例如，下面的是“下廚房”的APP的載入頁，雖然只有短短的一句話“是誰來自山川湖海 卻囿於晝夜 廚房與愛”雖然只閃過短短一秒鐘，這非但沒給用戶帶來煩躁的感覺，反而覺得這個應用有一種特別的氣質，不僅加深了印象，更帶來了好感。


一般電影上映前都有一段預告片來吸引觀眾去觀影。顯露冰山一角，以此激起用戶的好奇心，也告訴了使用者大概情況。

上圖是QZONE的熱門應用遊戲——捕魚大亨的登陸頁，這個loading的 進度設計就像一個魚雷的行程，不僅告訴玩家現在載入到哪個進度，尾部的 小水花也似乎在說我一直在努力載入。另外，這個載入速度有點慢，上方還有場景圖介紹，以此讓玩家有更多的瞭解。這種快顯視窗展示放大圖片和多個視圖也是許 多頂級線上零售商所採用的方法。雖然載入有點慢，但是給玩家這樣一個暗示：這是非常值得的等待。
此外，如果要載入的東西比較多，那麼載入進度肯定會比較慢，呈現一種載入條一直滯留不動的情況，在這種情況下，我們可以把進度條分成多個進度條多次 載入以安撫用戶焦躁的心。但是每次載入最好都配有文字顯示現在在載入的內容，不然一次又一次的進度條會讓使用者恐慌“這到底要載入多少次才是個頭！”但是如 果像下面一樣，明確告訴使用者在載入的內容，就算使用者是有些煩躁“怎麼有這麼多要載入”但是每次都相對載入得比較快，而且每次載入都有理有據，讓用戶覺得這 個載入還是有必要的。


要減弱用戶的焦躁，“增強用戶的期待值”也不失為一種好方法，除了對本身網站的期待，還有對“進度條本身”的期待。


如果在不同的百分點上都會有不一樣的顏色，那麼用戶也許在等待的時候會想：下一秒會是什麼顏色呢，從而，好像也不是那麼急了。


這個小人的表情好豐富，但是似乎又代表了用戶的心情，看著他挪動並有不同的心理，就像在看一個好玩的gif。

這是印像派的新版製作間登陸，在等待的同時還告訴客戶有哪些產品可以使用到製作間，既傳達了品牌的資訊，也讓使用者在等待時不那麼枯燥。
此外，如果這個是多次登陸的網站，那麼不管捕魚大亨的場景展示，還是yxp的步驟流程展示，似乎這些展示只在第一次會起到比較特別的作用，但是如果每次都附帶給登陸者不同的資訊，那麼，使用者每次都有小驚喜，比如每次都隨機出現一些小提示（以下分別是四次loading）：

雖然載入是個小細節，但是也很有可能不經意間讓用戶流失。以上是我的一些小心得，雖然搜集的這些設計方式可以減緩一些使用者煩躁的等待情緒，但 是真正 可以減緩的辦法還是載入的速度增快；別致的設計可以治標，載入速度提高是治本。在載入頁中顯示進度，給出承諾，增加信息量或者幽默內容都能使使用者潛移默 化 減少“覺察”正在載入的時間。當然，煩躁是一種心情，載入是煩躁的導火索，但是如果每天保持好心情，那對待等待的耐心也會大大增加哦^.^
最後，送上一個可以生成載入圈圈的小工具，希望可以對您有幫助：
 http://preloaders.net/en/circular

文章來自uedc
文章提供:: BAYSTARS DESIGN網頁設計公司

馴服CSS選擇器 - 健壯我們的樣式表

PPT：Taming CSS Selectors
作者：Nicole Sullivan

CSS 文件的大小和所引起的 HTTP 的請求數

是 CSS 性能的最關鍵因素

回流(reflow)和渲染時間

(非常！)沒那麼重要

副本(duplication)比陳舊的規則(stale rules)更糟糕

因為我們有工具處理後者

定義缺省值

不要在每處都重複編碼

不好的：

程序代碼

#weatherModule h3{color:red;}
#tabs h3{color:blue;}

推薦：

程序代碼

h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}

用單獨的 class 來定義結構

不要在每處都重複編碼



使用 class

而不是元素選擇器

不好的：

程序代碼

div.error{...}

推薦：

程序代碼

.error{絕大多數代碼寫在這裡}
div.error{單獨定義}
p.error{單獨定義}
em.error{單獨定義}

避免使用元素選擇器

初始化除外

不好的：

程序代碼

div{...}
ul{...}
p{...}

推薦：

程序代碼

.error{...}
.section{...}
.products{...}

給規則同樣的權重

使用級聯去重寫先前的規則

不好的：

程序代碼

.myModule .inner b{...}
.myModule2 b{...}

推薦：

程序代碼

.myModule b{...}
.myModule2 b{...}

保守的使用 hack

不好的：

程序代碼

.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd{...}

推薦：

程序代碼

.mod .hd{color:red;_zoom:1;}
.weatherMod .hd{...}

註： 此點來自 The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009 第96P，為作者在 Ajax Experience 2009 上所做的補充。

避免指定位置

應用 class 在你想要改變的對象上

不好的：

程序代碼

.sidebar ul{...}
.header ul{...}

推薦：

程序代碼

.mainNav{...}
.subNav{...}

避免太過特別的 class

它們是都有語義的，而且有限制

不好的：

程序代碼

.ducatiMonster620{...}
.nicolesDucatiMonster620{...}

推薦：

程序代碼

.vehicle{...}
.motorcycle{...}

避免單獨的定義

id 在每個頁面只能使用一次

不好的：

程序代碼

#myUniqueIdentifier{...}
#myUniqueIdentifier2{...}

混合使用

避免重複編碼





封裝

不要直接訪問對象的子節點



不好的：

程序代碼

.inner{...}
.tr{...}
.bl{...}

推薦：

程序代碼

.weatherMod .inner{...}
.weatherMod .tr{...}
.weatherMod .bl{...}

譯文原文：點這裡...
文章提供:: BAYSTARS DESIGN網頁設計公司

網頁設計應急小技巧

工作中，網頁設計師經常會遇見這些狀況：時間這麼短又要出彩、又是要大氣要有氣氛、風格不明確很難把握、欄目這麼多頁面又這麼長……

突然覺得束手無策，腦袋裡一片空白，沒想法了，怎麼辦？
下面簡淺的歸納了幾個快速讓頁面出彩的小技巧：

1.旋轉法 – 將頁面的主體或局部進行旋轉



我們一般的頁面版式都是方方正正，四平八穩，有點呆板。如果將局部或整體適當的旋轉，打破穩定的構圖，畫面就會動感有趣一些。
對於上圖，這種基調輕鬆活潑又恰好內容比較少的頁面來說，主體整個旋轉後，畫面馬上輕鬆活潑起來，看過現在這個畫面，真是無法想像未旋轉前的平淡。同時，相比大塊的方形空白，不規則的余白也不會顯得空洞。



上圖，將背景旋轉後，大面積的斜面產生了很強的速度感，賽車急速飛馳著，好像下一秒就要從電腦中衝出來一樣，傾斜的大標題和旋轉後的背景交叉配合，使畫面整個都運動起來。這種方法可以應用到很多運動的主題上。

2.黃金分割法 – 靈活運用黃金比例分割的辦法將頁面「切」開



黃金比率被認為是最理想的矩形比例，在過去的文化遺產中也有很多這樣的遺存。將這個比率應用到版式設計中，也能夠設計出容易為用戶所喜歡的構圖。但不要被這些比例所束縛，很多是靠自己的感覺去應用。
上圖，除去背景無非就是一個排版清晰的頁面，將背景分割後，對比的色塊使畫面產生縱深感，頁面的豐富性和視覺衝擊力迅速增強。人物也好像著陸了一樣，平穩的站在畫面中。



上圖，用反差強烈的色塊進行分割，強調了版塊的劃分，即使有很多地方需要強調，也能讓用戶迅速清楚各版塊的重點，不用像以往一樣1、2、3…… 將內容依次豎排下來，鼠標都已經拖到第三屏了還沒完沒了，又沒什麼新鮮感。

3.曲線法 – 將曲線用於背景或版塊分割，消除矩形分割的生硬感。



與直線相比，曲線具有圓潤的特點，讓人感覺輕鬆、愉悅。增強視覺感的同時也能夠營造活躍的氣氛。
上圖中，大眾的logo和焦點圖中的機器人產品，全部由曲線組成，這種情況下，用曲線來分割背景和焦點就顯得理所當然了，畫面中曲線合理的運用也提高了層次感，機器人和紅色標題都更突出。



仿照球的運動軌跡，貫穿著整個頁面的曲線，將用戶直觀的帶入了正在激烈進行的棒球比賽現場。看似隨意，其實用曲線精當的將標題、焦點圖和新聞等版塊按重點進行了不同比例的分割。


4.借用法 – 借用現實中的東西，將實物抽像化，提煉出大形輪廓用於背景



現實中的東西也可以應用到網頁設計中？當然可以，只要想的到。
如圖，信封是我們生活中常用的東西，如此生活化的東西借用到網頁上，展開在用戶面前，好像郵寄給您的信一樣，立馬讓人眼前一亮，親切感油然而生。作為遊戲活動的通告頁，用白色的信紙來盛放主體內容也再合適不過。



上圖，將賽車在賽道上疾馳的場面置放到頁面上作為背景，虛化的大城市，放大的賽道，飛奔的賽車……就像此刻坐在電腦前玩賽車，左手正緊緊按著W、A、S、D鍵一樣。讓用戶身臨其境，完全抓住了對方眼球。
以此類推，生活中很多東西都可以借用，例如:寫滿粉筆字的黑板、電腦的屏幕、寫日記的本子、老古董的地圖，空曠的足球場……


5.三角拼貼法 – 像做手工一樣，將裁剪好的三角形打亂，重新拼貼



不同的幾何形狀有不同的性格，圓形是活潑可愛的，方形是平穩整齊的，三角形就是尖銳動感的。
三角形的不平衡性及其尖銳性能夠增強視覺上的刺激，快速吸引用戶，可以用於科技和時尚這種風格同樣比較「鋒利」的網頁。
上圖，將同色系小三角形均勻的拼貼起來，馬上就營造出一種鑽石璀璨般的時尚感。但實踐的時候要注意加減法，不能亂堆一通，點到為止即可。



上圖，用艷麗的三角形對頁面進行劃分、拼貼。大小的組合，色塊的對比，能夠帶給用戶強烈的視覺衝擊力。在搭配的時候，注意主次，以一個大的形狀為主，給內容擺放留下足夠空間，與其他輔助的小形狀相區別。

6.色塊分割法 – 將各版塊用不同顏色來區別



經常面對需求方這裡是重點、那也是重點、那那那也挺重要，統統需要突出的要求，對於主題比較明快的頁面 可以考慮將版塊用不同顏色來區別，通過色塊來強化頁面版式和佈局，難度較大的是在色彩搭配上要取得平衡。

上圖，版式在頁面都以塊來體現，沒有什麼效果，為了突出重點，在重要區域選擇了飽和度較高的紅黃綠三個顏色，產生明確的視覺中心，讓用戶能夠按照我們希望的那樣閱讀下去。但對比色調容易造成不和諧，紅黃綠之間加上灰底的中性色來調和一下就顯得不會突兀了。



當使用四到五種純色進行搭配的時候，注意只要色相、純度、明度三個屬性中有一個屬性是基本相同或者接近，搭配起來基本上都不會覺得太牽強。

以上幾個小技巧可以在情況緊急時參考，大家也可以用類似的方法總結出更多的小技巧自用。

原文：看這裡...


文章來自:: ued163

文章提供:: BAYSTARS DESIGN網頁設計公司