淺議360手機桌面鎖屏設計

　　前言

　　著手設計3.0版本手機桌面鎖屏界面的時候，就在思考一系列的問題：用戶會喜歡什麼樣的鎖屏樣式?在現有交互設計沒有大變動的情況下怎麼去設計?能否設計一種有趣的設計….

　　如果要同時解決這些的問題，會沒有重點和頭緒，所以決定從形態這一個方向入手，有針對性的解決問題。

　　眾所周知，鎖屏分為三種形態，彼此之間的關系網如下：

　　一、原始狀態

　　也就是用戶遇見最多的形態

　　在現在有大框架(時間，日期元素)不變的情況下，我希望給用戶一個簡潔，舒服的界面。沒有多余的視覺元素，按鈕不賦予任何的特殊材。

　　調查發現，很多用戶喜歡主動更換壁紙，為了突出這塊需求，我將按鈕設計了一個不銹鋼玻璃材質的方案，但是後續的問題來了：按鈕已經賦予了材質，這跟平台的性質不符合，所以果斷的放棄了這個方案。

　　上圖為修改後的方案：按鈕是一個簡單的灰色漸變，沒有任何的顏色特性，在按鈕的邊緣有一層75%透明的區域，讓整個按鈕不至於那麼死板，邊緣采用輕薄的處理方式，減掉了任何多余的視覺元素;下拉引導的原點放棄了過於復雜的效果,引導的箭頭放棄了豎線，因為點的動畫能足夠體現指引，在減法中精煉自己的設計，簡潔並有效地解決了問題。

　　二、充電狀態

　　這個是鎖屏狀態有趣的一個出發點

　　充電在上一版本中暴露了一些問題，如：主體物不夠細膩，動畫死板，沒有賦予更好的情節性。

　　從充電這個點出發，能想到的關鍵詞有：能量 釋放 渠道 吸收 反饋 ，我們進行了一次簡單的頭腦風暴，如下所示：

　　在不斷的思索和嘗試中，還是沒有達到我最滿意的效果，某天看見朋友微博發的一張圖片，照片上是手裡捧著1只螢火蟲的照片….我就想起了以前：初夏的夜晚，滿天星空，喝著啤酒坐在鄉下朋友家的樓頂，一起聊天。面前是一片稻田，螢火蟲就像一個一個的小精靈，能想起很多螢火蟲放在罐子裡，就像點了蠟燭一樣……於是我突發奇想，能不能放棄能量條，電線，磁場等等這些太硬的方案，回歸最原始的感覺。把充電的能量想想成為一個個螢火蟲，飛舞著，然後飛進瓶子……

　　有了這個想法後，我迫不及待的開始實施了，在設計中間按鈕，是很簡單的一個黑色承托，反饋的能量槽是圍繞著按鈕的一圈能量棒，中間是一個漸隱漸現的呼吸燈，讓人有一種安靜的感覺。這個方案弱化了按鈕，設計成為一個蜂巢般的容器，這樣和精靈的融合更好，並且能量條也更加的直觀。

　　http://uxc.360.cn/wp-content/uploads/2012/09/充電動畫1.swf

　　三、點擊觸發行為的狀態

　　用戶激發按鈕後，選項會彈出，整個icon的背景是簡單的黑色半透，沒有更多復雜的元素，能夠最清晰的承托出功能區域。

　　為了避免動畫生硬、不柔和的問題發生，我修改了彈出和縮回的機制，讓整個過程柔和的展示出來。

　　圖標在以前基礎上進行了優化，使其和其他icon保持一致，邊緣為3像素的寬度，外圓角為3像素，內圓角為1像素。

　　結語

　　通過對整個默認鎖屏最初的分析提煉，到中期和後期不斷的設計調優，我們都遵循著從每個細節給用戶帶來最好的體驗為原則，不斷的思索和改進。

　　我們每天都穿梭在高聳的大廈中，繁多的電子物品充斥著我們的生活，這時我卻更懷戀和大自然親近的日子，藍天，白雲，綠地…我想這是是無數都市人所期盼的，我希望在小小的手機屏幕裡，能喚起大家對大自然的回憶。

　　鎖屏設計的安裝包下載>>

　　360手機桌面下載>>

　　文章來源：360UXC