前言

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

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

眾所周知，鎖屏分為三種形態(tài)，彼此之間的關系網(wǎng)如下：

一、原始狀態(tài)

也就是用戶遇見最多的形態(tài)

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

調(diào)查發(fā)現(xiàn)，很多用戶喜歡主動更換壁紙，為了突出這塊需求，我將按鈕設計了一個不銹鋼玻璃材質(zhì)的方案，但是后續(xù)的問題來了：按鈕已經(jīng)賦予了材質(zhì)，這跟平臺的性質(zhì)不符合，所以果斷的放棄了這個方案。

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

二、充電狀態(tài)

這個是鎖屏狀態(tài)有趣的一個出發(fā)點

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

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

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

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

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

三、點擊觸發(fā)行為的狀態(tài)

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

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

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

結(jié)語

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

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

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

360手機桌面下載>>

文章來源：360UXC

標簽： 手機桌面鎖屏設計 手機鎖屏設計 

版權(quán)申明：本站文章部分自網(wǎng)絡，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。