search
創業公司設計師怎樣從0到1設計一款APP——UI規範整理

創業公司設計師怎樣從0到1設計一款APP——UI規範整理

上篇文章更新到了在設計APP的過程中Hi-fi輸出的一些要求,今天來說說APP的UI規範怎麼整理。

要求

如果我們按照市面上最好的規範去整理的話是極好的一件事情。Apple公司的iOS規範和Google的Material Design的設計規範就是很好的參考案例。如果有時間,也是極力推崇大家去學學的。但創業公司不一樣,公司沒有那麼多資源給設計師去做那麼龐大的工作量。

工作中,實用、省事是第一準則,怎樣讓開發、PM、設計都能自覺遵守這樣的規範,讓用戶覺得產品有規有矩,值得信賴,就很棒了。

UI規範的主要內容

1.前言

前言部分主要交代UI規範的版本號,標準頁面的大小,基於哪個平台進行設計。版本號一般由PM(即產品經理)進行規定。設計稿的標準頁面一般用iPhone 6S的大小,即750*1344px作為標準,因為這個屏幕大小所佔市場份額最大。平台的話,大部分是Mac OS系統(不排除有少部分基於Windows,不同公司情況不一樣)。

2.顏色規範

顏色從類型上可以分為主色,輔色,文字色三大類。

而每種顏色除了需要要標註RGB的色號之外,最好標註出它的使用場景,以及在該場景下的用途。以下是樓主找的一些案例:

主色的種類控制在一至兩種比較合適,輔色也不能過多,三到五種就足夠。文字色一般分為三個層級進行設置,越高層級的顏色越深,還需要注意的是留一個反白色,方便用於深色背景下的文字信息顯示。

3.文字規範

文字的統一有很多種方式,在此介紹一種按照用途的方法分類的形式。同樣,文字需要介紹出文字的字體(如果有英文的也需要羅列一下英文字體),以及使用場景。

按照用途來分,文字可以分為導航欄、列表、輸入框、按鈕、閱讀類文字。導航欄又可以細分為頂部、底部、功能區導航欄。閱讀性的文字,主要分為標題,說明文字,註釋三大類,如果在偏向雜誌類的APP中可能標題又可以進行細分成幾級。如下案例。

4.控制項

控制項用Sketch的Symbol進行整理。不知道怎麼用Sketch和Symbol的童鞋可以進行先自學一下,如果需要軟體的介紹也可以給樓主留言,這部分的整理需要有一定的基礎的人才能看得懂。分類用腦圖的方式呈獻給大家,來得更直觀。

5.圖標

圖標的統一,主要是尺寸、風格,這一點在上篇文章有提到。風格上,選擇填充或者選擇線性。比較流行的是線性圖標,一般採用3px的粗細。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px(或者100x100px)。製作參考,大夥根據需要進行調整。

6.其它

在有的規範裡面還將主頁面以頁面布局的一種分類進行呈現,但在開發對照sketch文件寫代碼的過程中已經很仔細地在看頁面,所以羅列在規範中,樓主覺得沒有太大的實際用途,於是也就沒有考慮。但它有它的好處,就是讓團隊外部人員在查看公司的視覺規範時更加完整,內容更齊全,形象更高端。文件定位不一樣,內容也可以不那麼相同。

總結,一切從實際出發,滿足某個階段的需求。每個公司的發展階段不一樣,需求也不一樣,如果你和樓主一樣是打工仔,那咱們就擦亮眼睛,機靈點,認清形勢再做事!

Sophia的tips:有時候不是我們做不到,而是沒有被逼到那個份上~
熱門推薦

本文由 一點資訊 提供 原文連結

一點資訊
寫了5860316篇文章,獲得23312次喜歡
留言回覆
回覆
精彩推薦