UI設計規(guī)范一iOS字體和切圖及規(guī)范

說明:

1.對象為程序員等開發(fā)人員。

2.方法有千種,僅供參考。

3.文檔的本質是備份與查看,對外方便協(xié)作與對內提升效率。

4.文檔不是萬能的,如果文檔查看對象看不懂,就沒任何意義。我喜歡當面溝通,因為能避免大部分文檔的局限性


規(guī)范

一.字體

我個人設計時按照iOS設計尺寸 iPhone6(750px*1334px)來進行頁面的設計。在iOS開發(fā)中iPhone4、5、6、7是共用一套字體規(guī)范。在設計中按iPhone6設計版尺寸(750px*1334px)中適合的字體大小來定義。(開發(fā)過程中具體的問題需再具體分析)

在iOS中默認字體分為三類:

第一類:STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字體,常用的方正黑體簡體(不能商用)和微軟雅黑(不能商用),也可以是冬青黑體簡體(暫不詳版權)和思源雅黑(免費)。

第二類:_H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及數(shù)字字體,常用的字體Helvetica

第三類:LockClock.ttf代表的是鎖屏時間字體

中文字體:Mac下黑體、微軟雅黑、華文黑體、方正黑體簡體、思源雅黑、冬青黑體簡體等(,看個人習慣,具體設計需求也可以是不常見字體)

英文字體:HelveticaNeue , Arial Bold(Regular)(具體設計需求也可以是不常見字體),在選用不常見字體要在后面切圖中:相關的字體要有圖片形式導出.png圖片,以及如有需要要有文字的字體包,當然還有使用版權的許可。


二.切圖說明

1.文件

文件包命名規(guī)則是:項目名字+切圖+作者名字+日期

例如:螞蟻金服基金3.5.8.5版本迭代-H5頁面設計_切圖_李笑_20170321

文件包壓縮一直采用.zip格式

文件包要包括:image,效果圖+標注圖,切圖簡單說明(word等文件)。

說明:效果圖必須是要有的,對于標注圖可以根據(jù)技術需求,溝通必不可少

打開如下圖:

提供給程序開發(fā)的文檔打開

2.切圖注意事項

在image中切圖文件和切圖命名中:

···不要出現(xiàn)大寫,

···不要有中文、特殊符號以及空格,

···字母必須是小寫字母,

···同類切圖大小一致(后續(xù)文章單獨整理切圖方法和常見問題)


3.切圖命名規(guī)范

···iOS切圖文件要有二倍像素適配(750px*1334px)iphone6,iphone7和三倍像素適配(1242px*2208px)iphone6 plus,iphone7 plus。需要在名字后面分別加 @2x 和 @3x。具體命名方法是:

模塊_類別_功能_狀態(tài)_@2x/@3x.png? (狀態(tài)會有:點擊狀態(tài),點擊壓下狀態(tài),禁用狀態(tài),選中狀態(tài)等)

如:me_bg_nologin@3x.png和me_bg_nologin @2x.png

樣式說明


4.切圖命名常用詞

例(個人整理部分)


5.Splash切圖(單位px)

···iphone4:640X960

···iphone5:640X1136

···iphone6/7:750X1334

···iphone6/7:1242X2208


6.Icon切圖(桌面圖標)

數(shù)據(jù)來源:apple SDK官網(wǎng)
數(shù)據(jù)來源apple SDK官網(wǎng)

iPhone圖標尺寸及整理如下:

iPhone圖標尺寸
iPhone圖標現(xiàn)在給開發(fā)的不需要設計圓角,開發(fā)時圓角系統(tǒng)會自動預留,也就是全方形即可

備注:在提案設計一般可以采用 512px*512px,來檢測效果,單位是px

后續(xù)會不斷的整理和添加修正,歡迎批評指正

如果有用請分享給需要的朋友們

謝謝~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容