UI界面設計 設計規范 ·

教你快速如何去整理總結移動端UI設計規范

關于移動端UI設計規范的案例,25學堂也分享了很多,只要大家在25學堂官網搜索框輸入“設計規范”,就至少20種不同APP成熟案例的UI設計方案和設計規范案例。

最近,在APP設計交流群里,很多小伙伴反應看完這些APP設計規范,自己還是不知道怎么去整理,或者說有木有一定的套路來弄。

下面我們就看看史上最簡單的,最有效的教你快速去整理總結移動端UI設計規范信息圖參考。

0135db599e9813a8012017946c2704.jpg

 

 

但是看完以上的整理總結移動端UI設計規范信息圖案例,

25學堂的小編還是想來跟大家,好好回顧下移動端UI設計規范的詳細整理過程。

router_app

 

 

一、UI 設計規范的使用對象及場景

1、產品和設計團隊參照共享的設計規范。

不管是跟外部的用戶體驗設計公司合作,還是內部的設計團隊執行設計,UI 設計規范都是用來體現大家在產品設計溝通后一致確認的方案輸出,以及為后續的產品迭代提供參照依據。

2、為項目相關的技術同事(如前端工程師、iOS / Android 工程師)實際開發和重構提供保障。

技術在實際產品開發的時候,往往喜歡模式化,因為開發的工具語言往往有庫、類這樣的模塊化思維。UI 設計規范通過對一系列元素模塊的具體規范,既能與產品開發實現完成對接,同時又便于工程師理解。

 

二、什么時候輸出UI 設計規范

一般都是產品高保真界面經過產品、設計和技術共同討論確認后。如果產品的高保真界面 OK,同時內部設計資源相對有富余,對應的產品設計師就可以整理一份初版的 UI 設計規范,然后后面再填充優化。

 

三、UI 設計規范的三種類型

1、平臺(系統)性質,主要對于其平臺內生態的設計指南,

例如 Google Material DesignApple Watch Human Interface GuidelinesUbuntu Design

2、品牌物料,主要提供給媒體、第三方公司等用于公關報道和設計

(PS:貌似國內很少看到有這種整理,導致一些媒體報道的 logo 圖片千奇百怪),例如 Dribbble - Logo Downloads & Brand GuidelinesLinkedIn Brand Guidelineshttps://www.facebookbrand.com/

3、產品業務相關,主要是產品設計和實現層面的方案,Web 產品居多,同時很多是與前端技術成果相結合,

例如 Starbucks Style GuideOverview | Atlassian Design Guidelines

 

四、UI 設計規范的具體內容劃分:

??? 品牌 Logo 及相關物料規范;

????字體排版(Typography),即界面版式設計;

????顏色(Color)規范,產品主要的顏色庫;

????圖標庫(Icon);

????控件庫(UI Toolkit),Web 產品與 APP 產品表現形式可能有所差異;

????視覺框架(Visual Hierarchy),定義產品的交互框架結構,與信息架構相關;

 

以上四點就是整理總結UI設計規范的知識點。希望對各位有幫助