追求卓越一諾千金

藍藍設計__去霉运,2011年成立-|1956的娱乐平台大全,主創清華團隊|||baby是我歌词,專注軟件和互聯網ui設計開發--单身公主相亲记优酷。擅長企業信息化管理|_-臭虫灵、監控||_电视剧热爱、大數據軟件UIUE谘詢和設計開發服務-||猊龙狮。立足UI__协和医院广告,好好學習|__金蓓蓓,天天進步-_|陆达生!


如何合理創建間距係統--_天弘基金网站,來更快的實現設計方案

2019-3-26 用心設計 設計思維


如果您想訂閱本博客內容-黑帮ceo的筹码情人,每天自動發到您的郵箱中||无暇陪客说, 請點這裏

 

讓設計師和開發團隊有意識的利用好間距係統-|_沈阳小伙,可以提高產品的可讀性和一致性--|盘古越狱官网。
Cheatsheet總結了我的方法
我最近致力於為電子健康記錄(EHR)產品定義間距係統_-_马桂木,以改善產品頁麵的可讀性和一致性-__易彩票安全吗。我提出了3個間距規則(3C規則)和以4為基準的間距網格|配角顾海滨,並且這些規則與新的印刷係統配合得非常好_--360彩票福彩杀号定胆。
存在的問題
當定位垂直元素時济南一中升学率,設計師不應做出隨意或者任其自然的判斷|__徐州经济适用房名单。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量-|玫琳凯之窗登录:“根據實際情況來決定使用5px或10px-_惠安三中网。”這種方法雖然是10的倍數並且可用|-长乐市人民政府网,但是它不符合任何印刷要求的規範-||118彩票手机开奖。
——Robert Bringhurst--重生洪荒之逍遥至尊,著有《印刷風格元素》一書__|狩猎狂狮。
我們在EHR產品中使用了5px_|济南中学升学率、10px_-|038彩票平台怎么样、15px_-|贵遵高速车祸、20px的邊距/填充|买什么车性价比高,但是在何時何種情況下使用這些間距|-疥舒宁多少钱一盒,我們並沒有一個嚴格的規範|裤子尺寸换算。
邊距/填充隻是間距係統的一部分||038彩票苹果版打不开,字體行高也會增加額外的高度空間|_永盛永盛彩票官网,但目前我們沒有為現有(舊的)文字樣式創建行高規範-陆地蟹。
相似的組件和內容在產品中看起來不一致|_钟秀全,這造成了EHR產品的整體樣式不統一--锦江区公众信息网,並且因為數據疏密程度不同_--永胜国际彩票正规吗,造成了閱讀體驗的不流暢-||科幻电影排行榜前十名。
解決問題
步驟1|_佳佳宠儿:確定文本行高(確定基準網格)
首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果_-_沈阳市财政局财会之窗,因此在實驗中_-|铁拳毒药,我把基準主體字體大小設置為13px|-|qq刷钻器2013免费版,行高設置為8的倍數即16px或則24px然後看看這兩個行高規則是否有用-_-新浪微博阅读。如果沒用|盈彩在线,則意味著8點基準網格是不適用的|||舟山临城外卖。
然後我將基準字體大小設置為13px||_视界窗教育,並在16px和24px之間的偶數尋找行高值|_注册赠送彩金的彩票网站。開始我將它與18px(6的倍數)匹配||-142期富婆看图肖特,如果成功那就意味著我采用了6點基準網格-|_电影致青春经典台词,也就是6的倍數(間距會是3|-132彩票网址是不是骗局、6___travalue、12_-众发娱乐是违法赌博吗?、18--永盛国际投资靠谱吗?、24)--360彩票网导航走势官网。後來我嚐試了20px的行高_-北交晨光bt,使用起來效果很好|--网通转电信代理,所以我采用了4點基準柵格(也就是間距為2-_仲博彩票是不是骗局、4--_新商盟无法登陆、8||-北交大晨光bt、12-_大老虎周永慷、16_--说说电视记者这行吧、20等)_-阜新市交通违章。
步驟2||_唐海二手房出售:用希克定律和幾何級數來確定間距值
“隨著可選擇數量的增加-|中国领导排名,做出決定的難度將會增加-|平方米和公顷换算。”
——希克定律
我們要想出一個可感知的間距係統來簡化設計決策-_360彩票机选大厅,另外將所需值的數量保持在一個最小範圍內_长春艺术实验中学。
間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格)||掌上永辉APP考勤,因此我的間距值為4點基網格(2|-芒草扫把、4_苏宁电器积分兑换、8-_11086棋牌官网、12__村村通卫星、16_郑浩南三级、20-_演员表、24_旺拉虫草、28…)
一般來說___注册彩票网站违法吗,4–-5個間距值已經為產品設計提供了足夠的差異性__|360双色球精准杀号定胆,即使對於複雜的企業產品也足夠了__欧冠皇马vs马竞,但是在實際過程中可能需要靈活的在規範中增加間距值_|-小米1s锤子rom。
我決定使用4點基準網格-|帕丁顿熊2百度云,因為它提供了更好的視覺可感知區間_|365精彩每一天论坛,對於層次結構的展示來說非常好|_-卧槽路,因此間距值應該是(2-_梦幻西游安定坊、4||-11选5彩票自动分析软件、8||-苍井空作品 百度云、16)--_圣元积分网。
如何以可預見的方式應用這些間距值_|王恒升?3C法則來拯救你_丁俊晖最近比赛视频。
我深受Nathan Curtis上麵文章中介紹的Insets|--易盈彩票,Stacks&Inline等間距詞彙的影響-__优优娱乐彩票怎么样?。我決定在其基礎上構建一個額外的詞彙組|||长红娱乐官网,以便我的團隊更容易理解每個詞彙的使用環境-_l乐蜂网。我將所有的間距規則分解成3個C__优彩彩票骗局:容器||-诺基亚n73主题、內容和組件--2018彩票019开奖号码。
· 容器規則使用了平方差的概念(使用16px)
· 內容規則使用了堆棧的概念(頭部堆棧使用2px-|沈阳市财政局财会之窗,葉節點堆棧使用0___诺基亚5800手机软件下载、4||-易投彩票、8|-沈阳国美网上商城、16px具體取決於內容類型)
· 組件規則使用內聯的概念(大多數情況下使用8px_-妇之宝,4px表示關聯關係)
第1C_-01彩票怎么选:容器規則
容器是UI中的框架||_306苹果版下载安装,其中包含內容__-铁瓷,通常這些內容是頁麵永盛彩票网是不是真的、卡片|--云顶注册送25、模態|_|3208c刷机、彈窗等--腾讯车模。由於容器在層次結構中處於最高層次-__亿发彩票,所以我確保所有容器的間距值(在我的例子中是16px)|_|111cc彩票绿源。提示__无字神曲:切勿在任何間距計算中包含邊框||2012年江苏高考数学试卷。
第2C-||偷税漏税处罚标准2017:內容規則
內容存在於容器內部||-雅虎宝贝鱼在线翻译,內容包含_--易发彩票在线:
標題(h1--|国产摩托车价格、h2--|freeborn性欧美、h3-_娱乐彩票网址、h4--_重庆公安局长、h5) 以段落_-|306手机彩票,列表__|2014三中全会,表格_|澳警员遇害案开审,表格的形式穿插數據|艳杀天下。
所有這些內容都是使用頁邊距垂直疊加的|-十女九丝,但字體行高也為指定的頁邊距增加了額外的間距|-|至尊彩平台下载安装。我無法以一致的方式解決這個問題||联众打码,因此我同時考慮了行高和邊距--重庆医科大学校徽,創建了自己的處理堆棧的方法|||芷江租房,以下是我的過程|雷区里的工具:
A)首先解決頭部堆棧
為了簡化這2個選項之間的行高決策-_选票格式,我計算了每個行高比--|黄油嘴型号,並決定使用等於1.5或更高的行高|_|手机qq 2009。對於選擇哪個行高--人形何首乌,我仍然猶豫不決___耳鼻喉科解放军466医院,但是在進行了視覺探索並回顧了設計團隊的結果之後-|_瑞雪胶囊,我們確定了應該采用那個行高選項_||04年双色球事件。
視覺探索的過程
我從頂部的H1開始-_注册送38元彩票主页,嚐試使用2px-_-优彩网网站、4px||芭娜娜小魔仙、8px等的不同間距選項__优博彩票首页。行高為36px的間距選項都很緊湊_-阿拉尔房屋出租,但4px間距與行高40px感覺恰到好處_15分时时彩是真的吗!
然後我在所有標題(H2--135彩票受法律保护吗?、H3_|_银行卡手机充值号码、H4--银通卡怎么用、H5)和列表_|_弘扬民族精神资料、段落_|-198彩票自动挂机软件、表格之間進行了間距值0px_-广珠轻轨票价查询、2px--黄江小顺车行、4px和8px的實驗-亿人娱乐彩票app。2px和4px的間距相差無多_-_鹰彩首页,但是我們在設計團隊內部審查結果時-_北京市委书记是谁,2px的視覺感知更好|_优秀班主任主要事迹,盡可能的堅持隻有一個邊際數值__10万以下越野车大全,因為它簡化了設計和開發過程_|中央教育一台直播。
標題和葉節點間距實驗
標頭堆棧 - 間距為2px和4px
B)接下來解決葉節點堆棧
EHR有4種主要類型的葉節點-|花好月圆夜mp3:
我開始為最簡單的內容類型——段落來處理間距_-今晚中国女排直播。
每個段落內的間距
這非常簡單--|赢彩彩票怎么买不了了,隻需要清空段落中的所有文本行空間|-语信w800,這樣兩行之間就有0px邊距||_黄翘。
Sketch中的排版段落(行高20px是通過視覺探索得出的|_132彩票手机版,並使用WCAG SC 1.4.8進行驗證_artcase,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)
兩個連續段落之間的間距
我第一個想法是使用行高為20px的間距-__广西公需科目考试网,但後來看到了WCAG SC 1.4.8_-觥,其中指出   “段落間距至少要比行間距大1.5倍-_|英豪彩票平台,因此一段最後一行的行高為250%__-小史可,這樣可以保持距離下一段第一行間距更合適||丧尸国度第四季。 假設%值是根據基本字體為13px的大小計算的_-金星啤酒厂,我計算出兩段之間的實際間距應約為(ps - ls)= 13px-|邪恶少年eb的小站,將使用margin-bottom--n79软件下载:13px在CSS中定義_-365彩票上不去。但是13px不是我們在步驟2中確定的間距值之一||-金兜洞兕大王,因此我選擇了16px作為段落底部的邊距_|_潘春春 樊玲。
解釋WCAG SC 1.4.8中的段落間隔規則
在Sketch中多段落排版
如果對計算結果有疑問|--易彩网跟买靠谱吗,我總是用視覺探索進行交叉檢查--_蕉岭网。與其他可能的值相比|038彩票几年了,段落之間的16px間距最佳-销子材料。其實我認為12px間距會更好__集芙蓉以为裳。但是我不想僅為這個用例為整個間距係統添加額外的值-__金丝蓉,另外我們的EHR產品沒有很多段落|__oppo手机a201,幾乎沒有任何連續的段落-_-苏约卡盟。
列表中列表項內的間距
列表是由多個同質數據項組成的數據結構-_仲博彩票平台靠谱吗,由於列表將所有這些同質數據項組合在一起__4466k,因此列表項不像段落(它們之間有16px)那樣間距很重要_-_易彩网是合法的么。同時列表項仍然需要稍微分開|||临泉二手房网,所以我嚐試了0px和16px之間的間距|-腾翼c70论坛,我隻有3個值可以試驗2花湖会所、4_-众彩网可以赚钱吗、8_|-永盛国际提款安全吗?,總體看起來列表項之間的間距為8px看起來最適合層次結構__金华艾克医院孙尚见。
帶有標簽的2個連續輸入字段之間的間距
表單有連續的輸入字段-|-摩托车价格,一個接一個地疊加在另一個之下__248彩票网可靠吗。
無標簽2個連續輸入字段之間的間距
無標簽對於可訪問性來說並不是一個好的處理方式_|银彩登录网址。然而在某些情況下___海安新闻,標簽最好不要顯示||_苏珏,這些情況是-|众发彩票可靠吗?:
第3C|致富经2012:組件規則
組件有按鈕|-掌上足球世界杯、輸入字段|--清新壁纸、圖標等-_|瑞士鹿喜微断食,這些組件通常放置在一起(內聯)|_霍启仁antonia。此外所有的組件的尺寸均為4的倍數(也是8的倍數)|_快板网,因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框--_门德尔松随想回旋曲,整體高度為26px)-_|北京市统计局信息直报网。當組件能完美利用好基準網格|氨糖为何橄固力牌最好,並且按規則設置間距時|_-美甲点笔,整體布局才會完美和諧|_电子邮件号。
2個組件的間距
我用了一個簡單的規則__富士康总裁,即在大多數時候任意2個相鄰組件之間使用8px間距||_金山抢票软件。在少數情況下使用4px來顯示兩個組件之間更緊密的關係(格式塔的接近性原則)-_|安桥506。
組件內部間距
我對組件內部的任何左/右填充都使用了8px__|朴政珉。
圖標在組件內部間距
根據格式塔的接近性原則|-|宏基s220,將圖標放在組件內|_复古宫廷装,將他們的間距設置為4px-|-花印药妆,而不是通常的8px|_-2628彩票登录网站。
外部圖標與組件間距
如果圖標與組件關聯組合-||注册就送199的彩票网站,則其與組件間距為4px以顯示其關聯關係(格式塔的鄰近原則)_|诺基亚6120ci软件下载。但是如果圖標與一組組件關聯__-挠脚心漫画,那麼它與最後一個組件間距8px|-聚美优品网站打不开,以表明它不僅僅是與最後一個組件關聯_--108娱乐彩票正规吗,而是與整個組件關聯|_-掌上彩票投注下载。

藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__2019黑彩打击力度,為期望卓越的國內外企業提供卓越的UI界麵設計|__重庆力帆少东家、BS界麵設計 __-2元彩票网、 cs界麵設計 |-2018大乐透多少期、 ipad界麵設計 -__优衣库视频完整版下载、 包裝設計

標簽: ui 間距 合理性 « Feed流設計-|张翰郑爽2017金鹰同台:那些容易被忽略的圖片適配知識 | 如何利用走查表驅動設計改版»


訂閱Rss