• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】淺議360手機桌面鎖屏設計




    淺議360手機桌面鎖屏設計

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自未知的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

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


    設計理論教學開始

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

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

    眾所周知,鎖屏分為三種形態,彼此之間的關係網如下:

    淺議360手機桌面鎖屏設計

    一、原始狀態

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

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

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

    淺議360手機桌面鎖屏設計

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

    二、充電狀態

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

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

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

    淺議360手機桌面鎖屏設計

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

    淺議360手機桌面鎖屏設計

    淺議360手機桌面鎖屏設計

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

    三、點擊觸發行為的狀態

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

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

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

    淺議360手機桌面鎖屏設計

    結語

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

    淺議360手機桌面鎖屏設計

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

    — —

    文章永久連結為: 淺議360手機桌面鎖屏設計