追求卓越一諾千金

藍藍設計__2019年万达广场南阳,2011年成立|青年宫电影院影讯,主創清華團隊--帅同文学,專注軟件和互聯網ui設計開發杨幂被非礼的图片。擅長企業信息化管理||雷克泥浆泵、監控|-莫露露人体月饼、大數據軟件UIUE谘詢和設計開發服務|__杨幂11分钟。立足UI-_云顶至尊为什么便宜,好好學習|_妖精的尾巴洒洒,天天進步-198彩区域代理!


如何合理創建間距係統--陈翔卡通图片,來更快的實現設計方案__河马家老总。

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


如果您想訂閱本博客內容-众发赌博为什么不抓,每天自動發到您的郵箱中--众发娱乐输钱, 請點這裏

讓設計師和開發團隊有意識的利用好間距係統|铃兰高校校服,可以提高產品的可讀性和一致性___助赢官网。

Cheatsheet總結了我的方法


我最近致力於為電子健康記錄(EHR)產品定義間距係統__-山西环法尊道长,以改善產品頁麵的可讀性和一致性--|肝病康复网。我提出了3個間距規則(3C規則)和以4為基準的間距網格||陆地巡洋舰摩托车,並且這些規則與新的印刷係統配合得非常好|__强心脏20110823。


存在的問題


當定位垂直元素時_|艺考生百日冲刺,設計師不應做出隨意或者任其自然的判斷--synergykm。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量|_小爸爸优酷网:“根據實際情況來決定使用5px或10px_-|亿彩彩票怎么提现。”這種方法雖然是10的倍數並且可用_--苏州吸脂,但是它不符合任何印刷要求的規範-||阿里170号段预约网站。

——Robert Bringhurst_|斗战神宇文公在哪里,著有《印刷風格元素》一書_-掌上时彩下载。


  • 我們在EHR產品中使用了5px||_大冶热线、10px|-儿女传奇宅门娘子、15px_--意大利凯撒卫浴、20px的邊距/填充-_框架尺寸,但是在何時何種情況下使用這些間距-365彩票平台可靠吗,我們並沒有一個嚴格的規範|--11086分分彩。

  • 邊距/填充隻是間距係統的一部分||-短号查长号,字體行高也會增加額外的高度空間_-_周星驰电影大全国语版全集,但目前我們沒有為現有(舊的)文字樣式創建行高規範_-15分时时彩是真的吗。

  • 相似的組件和內容在產品中看起來不一致_168彩票网官方版苹果,這造成了EHR產品的整體樣式不統一_二手丰田普锐斯,並且因為數據疏密程度不同_仙剑奇侠传5 破解,造成了閱讀體驗的不流暢-|诺森德草药有哪些。

Image title



解決問題


步驟1-106福利版彩票:確定文本行高(確定基準網格)

首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果-|计算机一级试题,因此在實驗中_-|造梦西游3极品号源怎么用,我把基準主體字體大小設置為13px|-|阿凡仔,行高設置為8的倍數即16px或則24px然後看看這兩個行高規則是否有用--众发彩票合法吗?。如果沒用-|_众发彩票计划法网站,則意味著8點基準網格是不適用的-_-包塑轴承。

Image title

然後我將基準字體大小設置為13px_爱肺金雪茄,並在16px和24px之間的偶數尋找行高值|-28彩票投注app官方下载。開始我將它與18px(6的倍數)匹配金鹏图,如果成功那就意味著我采用了6點基準網格_|3g计划网时时彩,也就是6的倍數(間距會是3-|-078彩票苹果、6||范特华特官网、12-|中考百日誓师誓词、18|||英女侠新形象、24)-|雅鲁藏布江地图。後來我嚐試了20px的行高--甲申日,使用起來效果很好|_|weddingdress歌词,所以我采用了4點基準柵格(也就是間距為2-|装甲车电影、4-_|长沙广益中学、8--注册送18彩金apppk10、12|--银潮谷、16__李斯丹妮李茂、20等)||15分时时彩。

Image title


步驟2__徐子淇八字:用希克定律和幾何級數來確定間距值


“隨著可選擇數量的增加__2019年天下彩开奖结果,做出決定的難度將會增加|_横扫天下升阶数据。”

——希克定律


我們要想出一個可感知的間距係統來簡化設計決策|-22彩票是黑平台吗,另外將所需值的數量保持在一個最小範圍內|-求购血粉。

  • 間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格)-__256平台彩票什么情况,因此我的間距值為4點基網格(2|||柏木美玲、4_|菊丸英二bg、8_20l8最新期金牌调解、12--_赢钱彩下载、16__电话订票几点开始放票、20乔任梁遗体、24_小时代快乐大本营、28…)

  • 一般來說_|cad2004官方下载,4–-5個間距值已經為產品設計提供了足夠的差異性-_-由美回春素,即使對於複雜的企業產品也足夠了-_英冠附加赛,但是在實際過程中可能需要靈活的在規範中增加間距值|-38在线彩票。

  •    我決定使用4點基準網格|注册送100彩金,因為它提供了更好的視覺可感知區間-|头顶锅盖身披麻袋,對於層次結構的展示來說非常好|-强度电影,因此間距值應該是(2-|18彩app官方下载、4_-历届德甲冠军、8_|_360全国彩票开奖号码、16)-|_永盛国际靠谱吗。

Image title


如何以可預見的方式應用這些間距值_-众购彩票网址多少?3C法則來拯救你__-小明的储蓄罐。

我深受Nathan Curtis上麵文章中介紹的Insets|-|英国商人,Stacks&Inline等間距詞彙的影響--_陈水扁发烧就医。我決定在其基礎上構建一個額外的詞彙組---口交图,以便我的團隊更容易理解每個詞彙的使用環境||贵阳传销。我將所有的間距規則分解成3個C|-言承旭ella:容器-掌上彩票安卓版、內容和組件__刘一冰。

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

· 內容規則使用了堆棧的概念(頭部堆棧使用2px|_2004009期双色球的开奖,葉節點堆棧使用0|阳光炫舞、4-|-纳税人管理码是什么、8||索爱u5i刷机、16px具體取決於內容類型)

· 組件規則使用內聯的概念(大多數情況下使用8px_-_美爆潮品官网,4px表示關聯關係)



第1C-云顶娱乐网址:容器規則

容器是UI中的框架-|平码四中四,其中包含內容|||鹿氏断食法,通常這些內容是頁麵-|古力特奥特曼、卡片_105彩票软件、模態__-曹淳亮、彈窗等__-336时时彩平台下载。由於容器在層次結構中處於最高層次||碳棒生产厂家,所以我確保所有容器的間距值(在我的例子中是16px)-__成人网1234。提示-|盈彩是正规平台吗:切勿在任何間距計算中包含邊框|-意彩娱乐诈骗。

Image title


Image title


第2C-_阿姆斯特丹机场购物:內容規則

  • 內容存在於容器內部_|许家印专机,內容包含__-福州市数字青少年宫:

  • 標題(h1-_|如来陈涛、h2|-_空间6 0、h3|-|芊芊家、h4_|106官网彩票可以提现吗、h5) 以段落__106官方彩票,列表--|诸葛智彩软件安全靠谱吗,表格_|注册六给彩票图片,表格的形式穿插數據-永不瞑目床戏在第几集。

所有這些內容都是使用頁邊距垂直疊加的|__雪狼狗图片,但字體行高也為指定的頁邊距增加了額外的間距|_|11选五中奖规则及奖金。我無法以一致的方式解決這個問題__0808彩票,因此我同時考慮了行高和邊距_-3cp官方彩票,創建了自己的處理堆棧的方法|_-哈尔滨群力新区楼盘,以下是我的過程-_-难报三春晖ppt:


A)首先解決頭部堆棧

  • 如下圖|_-穆勒故意跪倒,我通過使用2個選項來獲取標題的行高_|_陈蓉冷月。

Image title


  • 為了簡化這2個選項之間的行高決策_|永盛彩票手机,我計算了每個行高比_||哈雷摩托价格,並決定使用等於1.5或更高的行高_-_11086移动彩票客服号。對於選擇哪個行高---殷世航,我仍然猶豫不決-|天越星,但是在進行了視覺探索並回顧了設計團隊的結果之後_打屁沟,我們確定了應該采用那個行高選項_|众盈彩票能赚钱吗。

Image title

視覺探索的過程

  • 我從頂部的H1開始|_|衡水热线专业聊天室,嚐試使用2px--36选7好彩3复式缩水、4px__怎样在淘宝开店、8px等的不同間距選項-_上海调料市场。行高為36px的間距選項都很緊湊|柯米诺,但4px間距與行高40px感覺恰到好處__|2019六开彩开奖记录!

Image title

 

  • 接下來我解決了H2問題--新七天电器直销网,在我們的產品中-智能手机,H2恰好是白色頁麵的第一個標題_众发娱乐提现靠谱吗。所以根據容器規則-__解放军胸章,最上麵的H2在頂部有16px_-索爱w550c刷机。我決定在所有H2標題上麵給出16px間距高度(最大允許間距值)_-许若月,因為這個值使得層次結構非常清晰-__英皇娱乐彩票平台。

Image title

 

  • 然後我在所有標題(H2---淘宝差评师、H3-_新秀丽汽车座套、H4-北水手机、H5)和列表--_234彩票、段落__|至尊争霸彩票邀请码、表格之間進行了間距值0px-_亿乐彩页面网址、2px||男科悍医、4px和8px的實驗-||超导空调。2px和4px的間距相差無多|-|重庆医科大学校徽,但是我們在設計團隊內部審查結果時_--外地车进京限行,2px的視覺感知更好|_铁将军防盗器电路图,盡可能的堅持隻有一個邊際數值-|淘宝企业开店流程,因為它簡化了設計和開發過程--注册盈彩安全吗。

標題和葉節點間距實驗

標題和葉節點間距實驗

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


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

EHR有4種主要類型的葉節點|||腾讯包钢股份:

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

我開始為最簡單的內容類型——段落來處理間距-_-注册彩票平台送彩金。


每個段落內的間距

這非常簡單_广州网货交易会,隻需要清空段落中的所有文本行空間||-038彩票不能提现提现,這樣兩行之間就有0px邊距_-柯达经典广告。

Image title

Sketch中的排版段落(行高20px是通過視覺探索得出的-|101号宠物恋人2,並使用WCAG SC 1.4.8進行驗證|-|2M彩票2m永久费资料,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)


兩個連續段落之間的間距

我第一個想法是使用行高為20px的間距_--铁路公安改革,但後來看到了WCAG SC 1.4.8__职工福利费会计分录,其中指出   “段落間距至少要比行間距大1.5倍||货车司机罢运最新动态,因此一段最後一行的行高為250%--ovi套件下载,這樣可以保持距離下一段第一行間距更合適-|16级台风什么概念。 假設%值是根據基本字體為13px的大小計算的__注册开户送38彩票彩金,我計算出兩段之間的實際間距應約為(ps - ls)= 13px-|_瘦儿鞋,將使用margin-bottom-|补补补歌词:13px在CSS中定義__-丁丁网上海。但是13px不是我們在步驟2中確定的間距值之一|||川师附中初中部,因此我選擇了16px作為段落底部的邊距_沈阳洗浴特服。

Image title

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

在Sketch中多段落排版

在Sketch中多段落排版


如果對計算結果有疑問-2019注册微信绕过手机,我總是用視覺探索進行交叉檢查|_|掌上彩票安卓版。與其他可能的值相比__-东环广场电影院,段落之間的16px間距最佳__|爱玩毛线球。其實我認為12px間距會更好__-鳌太线。但是我不想僅為這個用例為整個間距係統添加額外的值--步步高i508手机游戏下载,另外我們的EHR產品沒有很多段落-_|金山抢票软件,幾乎沒有任何連續的段落|民办教育促进法。

Image title

列表中列表項內的間距

列表是由多個同質數據項組成的數據結構--polo 机油,由於列表將所有這些同質數據項組合在一起_中央1台在线直播观看,因此列表項不像段落(它們之間有16px)那樣間距很重要__168彩票手机版。同時列表項仍然需要稍微分開_||芦竹根,所以我嚐試了0px和16px之間的間距|英国女主播直播中脱胸衣露乳出镜,我隻有3個值可以試驗2|x小爸爸、4_--定陶县教育局、8-vivos7t手机报价,總體看起來列表項之間的間距為8px看起來最適合層次結構--雅漾防晒霜保质期。

Image title

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

表單有連續的輸入字段-|战狼彩票全天实时计划,一個接一個地疊加在另一個之下_-|28彩票平台注册。

Image title

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

無標簽對於可訪問性來說並不是一個好的處理方式-_-星岛田阳子。然而在某些情況下-|-360彩票网官网60彩票,標簽最好不要顯示|爱肺金雪茄,這些情況是|_-鹿氏断食法:

  • 當多個輸入字段一起表示1個對象時(例如在下麵的地址部分||12579彩票吉祥数字是什么,“地址”字段包括街道地址1__群主被砍死,街道地址2-_-上海配汽车钥匙,城市__3M彩票首页,州_365精彩每一天论坛,郵編)
  •   當標簽過於明顯/重複且無法拚寫時||中博彩票注册邀请码,例如搜索__永盛国际登录网站。

Image title

 

第3C|-尹国驹:組件規則

組件有按鈕_-尊彩app下载苹果、輸入字段-|方舟降压仪多少钱、圖標等___花为眉男主角,這些組件通常放置在一起(內聯)_||梦回大唐之萧瑟流光。此外所有的組件的尺寸均為4的倍數(也是8的倍數)||震荡波补丁,因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框--台中市邮编,整體高度為26px)-_刘玉玲电影flypaper。當組件能完美利用好基準網格-|-晋城五人,並且按規則設置間距時_-|小提琴座套,整體布局才會完美和諧-_河间吧。


2個組件的間距

我用了一個簡單的規則|||众发娱乐是不是赌博,即在大多數時候任意2個相鄰組件之間使用8px間距_-成人奶妈网站。在少數情況下使用4px來顯示兩個組件之間更緊密的關係(格式塔的接近性原則)|-索爱刷机软件。

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


組件內部間距

我對組件內部的任何左/右填充都使用了8px|_优彩彩票是正规的吗。

Image title

圖標在組件內部間距

根據格式塔的接近性原則__安万克,將圖標放在組件內_-|掌上彩票安卓版,將他們的間距設置為4px--西安地铁1号线,而不是通常的8px|||河南马桶解说。

Image title

外部圖標與組件間距

如果圖標與組件關聯組合--|金瑞希,則其與組件間距為4px以顯示其關聯關係(格式塔的鄰近原則)__金箍didi。但是如果圖標與一組組件關聯-魔泥官网,那麼它與最後一個組件間距8px极地海洋世界团购,以表明它不僅僅是與最後一個組件關聯__安泽征婚,而是與整個組件關聯|-_长沙市消防支队。

Image title


結論

  • 你將提出一個具有有限數值和有明確使用規範的間距係統_|-陆贞传奇48,這非常易於使用並且合乎邏輯記憶-_青岛糖球会2016。
  • 在UI中使用間距--|韩版恶作剧之吻收视率,使其信息層次結構更加合理清晰-_永盛彩票网靠谱吗,並遵守可訪問性指南WCAG1.4.8|石家庄银泉酒家,這有助於不同能力的人更好的掌握和理解信息_-_十字星是什么意思。
  • 開發工程師了解間距係統_-|船位船讯网,並且熟悉其應用的場景和規則-__永盛彩票iOS,這樣可以讓設計和開發之間的溝通更順暢|_狗狗书籍txt下载,工作效率更高等|-20元公益彩票赚钱。
  • 設計師不再需要對所有內容進行排查|-成都天府新区规划图,開發工程師不再需要花時間檢查Zeplin等其他工具中樣式問題||家门的荣光百度影音。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-|_208622如意,為期望卓越的國內外企業提供卓越的UI界麵設計-_-怎么在淘宝开店、BS界麵設計 __-168极速赛车开奖结果、 cs界麵設計 -我要看一级片、 ipad界麵設計 |-_图文日志、 包裝設計 _-皆喜网、 圖標定製 |--好看的美国大片推荐、 用戶體驗 |--注册送彩金彩票cp、交互設計-老师漫画之无翼乌全彩无遮、 網站建設 _弹珠传说玩具、平麵設計服務-|qq2011最新版官方下载。

« 設計中的5大漸變趨勢|_36选7复式9个号多少钱,以及如何有效地使用 | 快速提升設計感的7個版式小妙招»


訂閱Rss