追求卓越一諾千金

藍藍設計|-永盛彩票wwwys36com,2011年成立|_霸王evd,主創清華團隊|__郭美美欠赌债,專注軟件和互聯網ui設計開發|||95598网上营业厅。擅長企業信息化管理__芭芭卡伦、監控-|尊宝娱乐平台app、大數據軟件UIUE谘詢和設計開發服務|_金华诸葛八卦村。立足UI078彩票合法吗,好好學習|狱乐营影视基地,天天進步_-|麻仓优迅雷种子!


如何合理創建間距係統-_广东电大成绩查询,來更快的實現設計方案|北京466耳鼻喉。

2019-3-29 泥人張 設計思維


如果您想訂閱本博客內容_|038彩票赚钱吗,每天自動發到您的郵箱中||相逢是首歌下载, 請點這裏

讓設計師和開發團隊有意識的利用好間距係統|_wow致命一击,可以提高產品的可讀性和一致性--_至尊时时彩票平台。

Cheatsheet總結了我的方法


我最近致力於為電子健康記錄(EHR)產品定義間距係統_六爻预测彩票,以改善產品頁麵的可讀性和一致性|--深圳网吧牌照。我提出了3個間距規則(3C規則)和以4為基準的間距網格--_话不投机三句多,並且這些規則與新的印刷係統配合得非常好-|i9300i9500。


存在的問題


當定位垂直元素時-_成人奶妈网,設計師不應做出隨意或者任其自然的判斷-_|苟在松。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量|表彰大会主持稿:“根據實際情況來決定使用5px或10px-_注册送3868彩金。”這種方法雖然是10的倍數並且可用___cctvbox2012官方下载,但是它不符合任何印刷要求的規範||-来个身份证号码。

——Robert Bringhurst_-_2019年万达广场南阳,著有《印刷風格元素》一書_|挟货要5倍运费。


  • 我們在EHR產品中使用了5px--|360手机游戏大厅、10px|-高林生的歌、15px-盈彩网下载、20px的邊距/填充_|125期富婆看图肖特,但是在何時何種情況下使用這些間距_|-永安彩票正规,我們並沒有一個嚴格的規範-__唐山铁通宽带。

  • 邊距/填充隻是間距係統的一部分|_1分钟时时彩网站多少,字體行高也會增加額外的高度空間|-约彩彩票怎么注册不了,但目前我們沒有為現有(舊的)文字樣式創建行高規範__迪吧现场图片。

  • 相似的組件和內容在產品中看起來不一致|-风单子,這造成了EHR產品的整體樣式不統一-|_陆贞身世,並且因為數據疏密程度不同_-|快乐大本营任重姚笛,造成了閱讀體驗的不流暢|_11086移动时时彩官网。

Image title



解決問題


步驟1--|长乐市人民政府网:確定文本行高(確定基準網格)

首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果-ella和言承旭,因此在實驗中煤气灶风门,我把基準主體字體大小設置為13px-_铁路安全管理条例,行高設置為8的倍數即16px或則24px然後看看這兩個行高規則是否有用__|雪碧真我飞扬 放言真我。如果沒用|_南京江宁金盛路,則意味著8點基準網格是不適用的_货车司机罢运最新动态。

Image title

然後我將基準字體大小設置為13px_||优盈彩票合法吗,並在16px和24px之間的偶數尋找行高值-|女孩一年做5次人流。開始我將它與18px(6的倍數)匹配_--中成快递,如果成功那就意味著我采用了6點基準網格_|众赢计划,也就是6的倍數(間距會是3--屈臣氏 化妆品、6---苏岑博客、12--永城彩票平台、18__361彩票官方网站登录、24)_--永安彩票真假。後來我嚐試了20px的行高-gn基地,使用起來效果很好|-_4d游戏,所以我采用了4點基準柵格(也就是間距為2|__中乌建交连体钞、4|__模特李娟、8-|快视影院百度影音、12__永宁政府公众网、16--万峰网、20等)---234彩票登陆。

Image title


步驟2__-2019四不像生肖图108期:用希克定律和幾何級數來確定間距值


“隨著可選擇數量的增加---360彩票网官网走势图,做出決定的難度將會增加|渔米库。”

——希克定律


我們要想出一個可感知的間距係統來簡化設計決策_语笑今生,另外將所需值的數量保持在一個最小範圍內|||赢彩彩票是正规的吗。

  • 間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格)夹心取力器,因此我的間距值為4點基網格(2|_|金瓜钺斧朝天蹬、4|-dnf战争英雄之无双太刀、8|-众赢彩票计划软件、12|青海省公安厅副厅长、16|-234彩票苹果版、20_||我们约会吧李飒、24||_长虹手机解锁、28…)

  • 一般來說_|水观音擦皮鞋麦词,4–-5個間距值已經為產品設計提供了足夠的差異性|诺基亚n85软件下载,即使對於複雜的企業產品也足夠了|阿凡提物流查询,但是在實際過程中可能需要靈活的在規範中增加間距值__镇江老兵事件最新进展。

  •    我決定使用4點基準網格|-118彩票怎么安装,因為它提供了更好的視覺可感知區間_149什么规律,對於層次結構的展示來說非常好_-云鼎彩票捷豹,因此間距值應該是(2_|-258竞彩官网、4--移动彩票提不了款、8||汤唯在韩国视频、16)--|阿拉酷。

Image title


如何以可預見的方式應用這些間距值-088彩票是正规平台吗?3C法則來拯救你---钱货两讫。

我深受Nathan Curtis上麵文章中介紹的Insets_|-长乐市人民政府网,Stacks&Inline等間距詞彙的影響-_-高清无码在线苍井空。我決定在其基礎上構建一個額外的詞彙組_|novela机械碟刹,以便我的團隊更容易理解每個詞彙的使用環境-易旺彩票是合法的吗?。我將所有的間距規則分解成3個C-_女士毛衣编织款式:容器-_|花都区教育局、內容和組件-娱乐天地点检怎么下载。

· 容器規則使用了平方差的概念(使用16px)

· 內容規則使用了堆棧的概念(頭部堆棧使用2px_|-众博彩票app,葉節點堆棧使用0|-|广西单独二胎细则、4_-_七品芝麻女鞋、8||_花雕鸡是哪里的菜系、16px具體取決於內容類型)

· 組件規則使用內聯的概念(大多數情況下使用8px_-国产suv哪个好,4px表示關聯關係)



第1C-_为啥人们啪啪后会感到悲伤:容器規則

容器是UI中的框架||-山寨机游戏下载,其中包含內容_|悦花越有刘玉龙坐牢,通常這些內容是頁麵||掌上彩票客户端、卡片--248彩票投注软件、模態-_2019年每期正版四不像、彈窗等|-_1960彩票。由於容器在層次結構中處於最高層次-_379虎嗅网,所以我確保所有容器的間距值(在我的例子中是16px)|__锦州铁通影院。提示||008彩票平台网址:切勿在任何間距計算中包含邊框_|-上海癫痫病中潭医院。

Image title


Image title


第2C|__青岛华东葡萄酒庄园:內容規則

  • 內容存在於容器內部_|-纳粹大战僵尸,內容包含||-水烟是毒品吗:

  • 標題(h1--|顺贷网、h2-_-反间谍工作的主管单位、h3__长安街英菲尼迪、h4--最近电影院上映的电影、h5) 以段落金瓜钺斧朝天蹬,列表||_中央6,表格|-芜湖市地税局网上申报,表格的形式穿插數據-|020彩票。

所有這些內容都是使用頁邊距垂直疊加的-_苏州工业园区三中,但字體行高也為指定的頁邊距增加了額外的間距||狩猎狂狮。我無法以一致的方式解決這個問題_--淘宝画报,因此我同時考慮了行高和邊距_-306官网彩票安卓版,創建了自己的處理堆棧的方法||-最新理财产品,以下是我的過程||_256手机彩票时时彩计划:


A)首先解決頭部堆棧

  • 如下圖_--恩施天气,我通過使用2個選項來獲取標題的行高_istoway。

Image title


  • 為了簡化這2個選項之間的行高決策-|-绍兴三味影院,我計算了每個行高比_||244影城,並決定使用等於1.5或更高的行高-衡阳县红网。對於選擇哪個行高|_金在中妹妹,我仍然猶豫不決|-_03wa论坛,但是在進行了視覺探索並回顧了設計團隊的結果之後||电子邮件号,我們確定了應該采用那個行高選項-|硅酸铝绳。

Image title

視覺探索的過程

  • 我從頂部的H1開始-_触动陷阱,嚐試使用2px|-应用宝5 0、4px__新浪团购、8px等的不同間距選項|--腾讯tt3 8。行高為36px的間距選項都很緊湊-环境举报电话,但4px間距與行高40px感覺恰到好處__-152彩票网站邀请码!

Image title

 

  • 接下來我解決了H2問題-|-菜菜互联,在我們的產品中_柳焚余,H2恰好是白色頁麵的第一個標題___奇瑞b14。所以根據容器規則--|28256手势舞教程慢慢的,最上麵的H2在頂部有16px_|双城市政府网。我決定在所有H2標題上麵給出16px間距高度(最大允許間距值)_118主图库免费红姐图库,因為這個值使得層次結構非常清晰-__钨矿。

Image title

 

  • 然後我在所有標題(H2-_|大老虎周永慷、H3-|qq2009下载、H4_建行活期存款利率、H5)和列表_-娱乐菲律宾15、段落--张家界工商局长、表格之間進行了間距值0px_2019哪款app可以买足彩、2px_-_让我取暖歌词、4px和8px的實驗__|16岁打英雄联盟入迷。2px和4px的間距相差無多---北京西站中铁快运,但是我們在設計團隊內部審查結果時--|黄梁txt,2px的視覺感知更好|_洪秀全公园,盡可能的堅持隻有一個邊際數值-_|p44小游戏,因為它簡化了設計和開發過程|优彩登录。

標題和葉節點間距實驗

標題和葉節點間距實驗

標頭堆棧 - 間距為2px和4px


B)接下來解決葉節點堆棧

EHR有4種主要類型的葉節點_-_河北职称信息管理系统:

  • 表單(幾乎50%的產品)
  • 列表(幾乎30%的產品)
  • 表格(可能是產品的15%)
  • 段落(可能是產品的5%)

我開始為最簡單的內容類型——段落來處理間距||_雷神 豆瓣。


每個段落內的間距

這非常簡單-_|众赢国际网络诈骗,隻需要清空段落中的所有文本行空間__中国商务部直销网,這樣兩行之間就有0px邊距_|反间谍工作的主管单位。

Image title

Sketch中的排版段落(行高20px是通過視覺探索得出的|_木人桩价格,並使用WCAG SC 1.4.8進行驗證|-上海老庙黄金今日金价,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)


兩個連續段落之間的間距

我第一個想法是使用行高為20px的間距|-_注册账号送200体验金,但後來看到了WCAG SC 1.4.8-_南京卫校分数线,其中指出   “段落間距至少要比行間距大1.5倍__|锦旗格式,因此一段最後一行的行高為250%__杭州sn,這樣可以保持距離下一段第一行間距更合適_--钻眼 莫言。 假設%值是根據基本字體為13px的大小計算的|-金庸群侠传2修改器,我計算出兩段之間的實際間距應約為(ps - ls)= 13px|-|永诚彩票,將使用margin-bottom||-阿花王子:13px在CSS中定義-_-金华烟草电子商务网。但是13px不是我們在步驟2中確定的間距值之一||-金鼎轩团购,因此我選擇了16px作為段落底部的邊距|_-手机qq2011通用版。

Image title

解釋WCAG SC 1.4.8中的段落間隔規則

在Sketch中多段落排版

在Sketch中多段落排版


如果對計算結果有疑問-歌手高林生,我總是用視覺探索進行交叉檢查|_阳光工资标准。與其他可能的值相比-_|30码期期必中特141期,段落之間的16px間距最佳__106官网彩票所有苹果版。其實我認為12px間距會更好_安溪野山谷。但是我不想僅為這個用例為整個間距係統添加額外的值_|众赢国际是个什么平台,另外我們的EHR產品沒有很多段落__|广州话正音字典,幾乎沒有任何連續的段落|__云顶国际官网客服。

Image title

列表中列表項內的間距

列表是由多個同質數據項組成的數據結構--兰州商学院长青学院教务管理系统,由於列表將所有這些同質數據項組合在一起|武汉华云桑拿,因此列表項不像段落(它們之間有16px)那樣間距很重要_青铜粉。同時列表項仍然需要稍微分開--_105官网彩票平台,所以我嚐試了0px和16px之間的間距-__101号宠物恋人2,我隻有3個值可以試驗2|_电影频道6、4_||诺基亚6120ci主题下载、8||-2011qq,總體看起來列表項之間的間距為8px看起來最適合層次結構|_-3cp彩票注册。

Image title

帶有標簽的2個連續輸入字段之間的間距

表單有連續的輸入字段_|-007a私募内线,一個接一個地疊加在另一個之下_|qq下载2011正式版官方下载。

Image title

無標簽2個連續輸入字段之間的間距

無標簽對於可訪問性來說並不是一個好的處理方式-|-浪漫刺客片尾曲。然而在某些情況下--_雷公根粉,標簽最好不要顯示-_360全国彩票开奖公告查询,這些情況是|-|花将军的女伶:

  • 當多個輸入字段一起表示1個對象時(例如在下麵的地址部分-|云顶娱乐游戏4118,“地址”字段包括街道地址1|碣石佳俊车行,街道地址2_|038彩票提款被拒绝,城市_-舒卡股份,州||_3号彩票的软件,郵編)
  •   當標簽過於明顯/重複且無法拚寫時-|_宋茜me2day,例如搜索||-隆昌县地图。

Image title

 

第3C_--12期富婆看图肖特:組件規則

組件有按鈕_-名人带路 sjm、輸入字段__-赢彩网是正规平台吗?、圖標等--_射阳县高级中学,這些組件通常放置在一起(內聯)_花果园业主论坛。此外所有的組件的尺寸均為4的倍數(也是8的倍數)-_五个人火了,因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框--125摩托车改装,整體高度為26px)|_-永盛投国际。當組件能完美利用好基準網格-||诺基亚ovi,並且按規則設置間距時||_钨矿,整體布局才會完美和諧|_昆明三夫妇。


2個組件的間距

我用了一個簡單的規則__-汉草荟灵芝养生壶,即在大多數時候任意2個相鄰組件之間使用8px間距-|沂源一中。在少數情況下使用4px來顯示兩個組件之間更緊密的關係(格式塔的接近性原則)--|22彩票是什么网站。

內聯間距為8px(玫紅色)和4px(橙色


組件內部間距

我對組件內部的任何左/右填充都使用了8px-|石家庄43中电话。

Image title

圖標在組件內部間距

根據格式塔的接近性原則|_众博彩票不出款,將圖標放在組件內|-东莞一条龙服务流程,將他們的間距設置為4px_|-兰州最好的摸吧,而不是通常的8px-|中科彩票靠谱吗。

Image title

外部圖標與組件間距

如果圖標與組件關聯組合|--乌莎玛妮 维泰雅侬,則其與組件間距為4px以顯示其關聯關係(格式塔的鄰近原則)-|_徐娇电影。但是如果圖標與一組組件關聯-易彩票安全吗,那麼它與最後一個組件間距8px___陈雪明,以表明它不僅僅是與最後一個組件關聯-|_星光龙门阵,而是與整個組件關聯___新观兰。

Image title


結論

  • 你將提出一個具有有限數值和有明確使用規範的間距係統||-铁通宽带影院,這非常易於使用並且合乎邏輯記憶-奥术扰动。
  • 在UI中使用間距-|_魔兽地图大唐双龙传,使其信息層次結構更加合理清晰|||玩趣乐品,並遵守可訪問性指南WCAG1.4.8|_-说话犀利是什么意思,這有助於不同能力的人更好的掌握和理解信息_|五家渠政务网。
  • 開發工程師了解間距係統吊唁通知,並且熟悉其應用的場景和規則-|陈俊任,這樣可以讓設計和開發之間的溝通更順暢_|-雳剑电视剧 全集36,工作效率更高等--青岛订婚风俗。
  • 設計師不再需要對所有內容進行排查-_365彩票注册,開發工程師不再需要花時間檢查Zeplin等其他工具中樣式問題-_金之彩包装。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_-wifi密码破解工具,為期望卓越的國內外企業提供卓越的UI界麵設計|_张柏芝约谈谢霆锋、BS界麵設計 __01彩票是不是真的?、 cs界麵設計 --_临县秧歌2013贺升亮、 ipad界麵設計 --永盛app、 包裝設計 -_赢咖娱乐赢钱提现不了、 圖標定製 ___郭世宏、 用戶體驗 __|至尊传奇官方网站、交互設計|_-掌上彩票下载苹果手机、 網站建設 ||范党育原型、平麵設計服務|-一见钟情简谱。

« 設計中的5大漸變趨勢||108娱乐app新3d是什么,以及如何有效地使用 | 快速提升設計感的7個版式小妙招»


訂閱Rss