手機音樂APP界面設計的流程
手機音樂APP界面設計的流程-移動閱讀二維碼

此教程能讓設計師立刻提高APM,讓產品經理馬上獲得天賦——與設計師溝通。如此精品,誰敢不收藏不轉發,我就剁站長的手(看到這句話,小編我豈敢不分享)!

推薦教程:
教你創建一個具有美感的天氣APP界面
經驗分享!移動端設計開發流程(有神器推薦)

第一次寫這不知道算不算教程的東西,只是想單純的分享下學習UI過程中的一些經驗,有什么不足之處,還請各位多多指教~

jmsjlc-20140318-fengmian

01 項目背景分析

手機音樂APP是一個集在線播放、搜索、下載于一體的音樂播放軟件(似乎有點廢話了……)。

分析:

1、界面干擾因素不宜過多(好像不管什么應用都有這個要求吧…);

2、分析不同場景下的網絡環境、光線和使用條件等,針對共性因素和特定因素,提供相應功能和界面設計(此處省略1000個字…);

jmsjlc-20140318-02

3、考慮用戶的系統體驗,用戶再使用其他音樂APP時,積累了大量的使用經驗,并且自覺地養成了一定的使用習慣,總之,千萬不要整出太過奇葩的交互操作。

PS:別說沒時間考慮這些內容,使用習慣都已經有了,親身體驗下,取其精華去其糟粕。

 

02 視覺風格分析

 

“不只是看上去的樣子和感覺,設計的關鍵在于它如何發揮作用?!薄猄teve Jobs

確定風格:

 

03 制作過程問題

1、統一ICONS

(PS:制作方法詳見靚妹子的“線性小icon教程”:http:www.xiaoketang.net/line-icon-tutorial.html

2、界面尺寸規范

 

(小編注:關于界面尺寸還可參考《移動設備的界面設計尺寸》)

 

04 整體細節推敲

1、文字、顏色、icon大小等,統一規范,整體對齊,相應位置等間距等,會使得整體感覺更好;

jmsjlc-20140318-08

2、交互細節、交互操作是否符合用戶操作習慣;

 

05 完成交稿之前

正所謂“人靠衣裝,佛靠金裝”,沒有友好美觀的界面展示,也難以得到“用戶”的垂青。此處,“用戶”泛指一切具有決定是否采用的一類人。

總之,利用各種你能用到的資源或想法,讓你的界面更加高大上吧~

(小編注:以上不是只展示一下圖片,musen大神真的提供了“拿來就可用”的干貨,想下載相關附件請查看在本文結尾下載鏈接)

 

06 部分完成界面

本文鏈接:http://www.casaleticia.com/music-app-interface-design-process.html
本文標簽: , , , ,