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




  • 【 設計理論】手機客戶端UI設計規範模版




    手機客戶端UI設計規範模版

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

    文章出處是來自優設的設計理論類文章,寫教學的作者是xiangxiangliu,感謝xiangxiangliu提供設計理論的實作教學。

    教學大綱:

    UI設計師的視覺設計工作中,一半是效果設計,另外一半是切圖切圖再切圖,調整調整再調整的過程。在給與視覺資源的時候,往往會碰到這樣的問題:比如有個公共的title bar重新修改後,需要跟負責每個模塊的開發人員都通知一遍;再比如有個列表項的字號或色值重新


    設計理論教學開始

    UI設計師的視覺設計工作中,一半是效果設計,另外一半是切圖切圖再切圖,調整調整再調整的過程。在給與視覺資源的時候,往往會碰到這樣的問題:比如有個公共的title bar重新修改後,需要跟負責每個模塊的開發人員都通知一遍;再比如有個列表項的字號或色值重新定義后,需要去查看是否還有同類型的其他頁面的列表項也要跟着改過來。重複的勞動工作不僅浪費時間,也顯得你和開發人員沒有一點默契可言。

    舉個例子,如下,tab bar的樣式和每個標題的顏色和字號需要重新設計調整,而同時有三個開發人員會用到tabbar資源,以及統一的字號顏色。設計師當然要保證同功能的bar都保持一樣,但代價就是將改動說明重複三遍:A童鞋呀,這個bar的樣式變了,bar標題的顏色字號也變了;B童鞋呀,這個bar的樣式變了,bar標題的顏色字號也變了;C童鞋呀,這個bar的樣式變了,bar標題的顏色字號也變了……

    手機客戶端UI設計規範模版

    解決辦法:

    如何做到一拖三的效果呢?筆者在此分享淡定應對多個開發人員共同向你尋求資源的困境,並能統一管理調配這些資源。

    (1)明確資源有哪些?建立資源庫;

    手機客戶端UI設計規範模版

    (2)定義模塊。

    對模塊進行分類並定義,比如我分的大類有7個,包括:background/bar/list/control/tag/content/operate list,

    原則:(1)對於公共模塊要做到不重複也不遺漏,不然就失去定義模塊的意義,比如一個客戶端中有關list的樣式可能就有好幾種,一行的、兩行的、三行的等等,都要查漏補缺;(2)每個模塊中盡量保證字號色值、左右上下間距都包含,因為開發人員找到對應的公共模塊后,可以迅速獲悉這幾個方面的信息,迅速開發。

    手機客戶端UI設計規範模版

    手機客戶端UI設計規範模版

    再次聲明以上規範好處(對比以前每個頁面進行標註的做法):

    手機客戶端UI設計規範模版

    (1)即視覺調整的工作量大概可節省一半。即一個設計師對應一個統籌資源的開發人員,當有一個小的變動(如title bar的樣式或字體顏色)時,不用所有人員都通知一遍,直接聯繫該開發人員即可;

    (2)視覺設計師交接時,可以減少溝通成本;

    (3)加強了同一類型設計部件的統一性。設計師也會大意的時候,即在同一類型的設計部件中,設置了不同的參數,導致設計效果圖本身不統一;

    最後談一下該規範適用情況:

    (1)一個設計師既做交互又做視覺;

    (2)視覺重複頁面比較多;

    (3)當有其他設計師交接;

    — —

    文章永久連結為: 手機客戶端UI設計規範模版