首頁 > design > ID > > 正文

淺議360手機桌面鎖屏設計

發布人:[email protected]    點擊:

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

前言

著手設計3.0版本手機桌面鎖屏界面的時候,就在思考一系列的問題:用戶會喜歡什么樣的鎖屏樣式?在現有交互設計沒有大變動的情況下怎么去設計?能否設計一種有趣的設計….
如果要同時解決這些的問題,會沒有重點和頭緒,所以決定從形態這一個方向入手,有針對性的解決問題。
眾所周知,鎖屏分為三種形態,彼此之間的關系網如下:

一、原始狀態

也就是用戶遇見最多的形態
在現在有大框架(時間,日期元素)不變的情況下,我希望給用戶一個簡潔,舒服的界面。沒有多余的視覺元素,按鈕不賦予任何的特殊材。
調查發現,很多用戶喜歡主動更換壁紙,為了突出這塊需求,我將按鈕設計了一個不銹鋼玻璃材質的方案,但是后續的問題來了:按鈕已經賦予了材質,這跟平臺的性質不符合,所以果斷的放棄了這個方案。

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

二、充電狀態

這個是鎖屏狀態有趣的一個出發點
充電在上一版本中暴露了一些問題,如:主體物不夠細膩,動畫死板,沒有賦予更好的情節性。
從充電這個點出發,能想到的關鍵詞有:能量 釋放 渠道 吸收 反饋 ,我們進行了一次簡單的頭腦風暴,如下所示:

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


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

三、點擊觸發行為的狀態

用戶激發按鈕后,選項會彈出,整個icon的背景是簡單的黑色半透,沒有更多復雜的元素,能夠最清晰的承托出功能區域。
為了避免動畫生硬、不柔和的問題發生,我修改了彈出和縮回的機制,讓整個過程柔和的展示出來。
圖標在以前基礎上進行了優化,使其和其他icon保持一致,邊緣為3像素的寬度,外圓角為3像素,內圓角為1像素。

結語

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

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

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