追求卓越一諾千金

藍藍設計-_|冬泉豹幼崽怎么获得,2011年成立-_掌中投2018苹果,主創清華團隊|-_105彩票网是正规的吗,專注軟件和互聯網ui設計開發|沪通铁路规划图。擅長企業信息化管理_|12选5开奖结果辽宁、監控_云顶怎么赚钱、大數據軟件UIUE谘詢和設計開發服務_运城特产。立足UI_||约克公爵夫人萨拉,好好學習|||拳皇雅典娜h,天天進步-_云顶娱乐平台大全!


如何合理創建間距係統_尹斗俊 孙娜恩,來更快的實現設計方案|__皮肤病大王。

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


如果您想訂閱本博客內容__|国家德比直播地址,每天自動發到您的郵箱中__沈阳调料市场, 請點這裏

讓設計師和開發團隊有意識的利用好間距係統-_钟学敏,可以提高產品的可讀性和一致性-_星岛田阳子。

Cheatsheet總結了我的方法


我最近致力於為電子健康記錄(EHR)產品定義間距係統||-冯绍峰qq号,以改善產品頁麵的可讀性和一致性---锐捷aaa认证。我提出了3個間距規則(3C規則)和以4為基準的間距網格-_众博国际怎么样,並且這些規則與新的印刷係統配合得非常好--|蛇行一亿年。


存在的問題


當定位垂直元素時|-|怎样开店,設計師不應做出隨意或者任其自然的判斷_|_许绍峰。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量__亿发彩票犯法吗:“根據實際情況來決定使用5px或10px__叶扬眉。”這種方法雖然是10的倍數並且可用|盘锦dj,但是它不符合任何印刷要求的規範__小米1s锤子rom。

——Robert Bringhurst__破解小黄车密码方法,著有《印刷風格元素》一書|_永州八记的作者。


  • 我們在EHR產品中使用了5px-诺基亚3600s拆机、10px|-长春校服、15px_|-160彩票网站、20px的邊距/填充-|言兑网,但是在何時何種情況下使用這些間距---连锁销售在中国,我們並沒有一個嚴格的規範-褫。

  • 邊距/填充隻是間距係統的一部分-||卓越网客服电话,字體行高也會增加額外的高度空間__-京东机票网,但目前我們沒有為現有(舊的)文字樣式創建行高規範__副镇长辞职。

  • 相似的組件和內容在產品中看起來不一致||-08vip,這造成了EHR產品的整體樣式不統一_|诸沁微,並且因為數據疏密程度不同|35彩票35cpcc,造成了閱讀體驗的不流暢-__百里挑一于淼。

Image title



解決問題


步驟1_|赢太多钱博彩公司会追杀吗:確定文本行高(確定基準網格)

首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果|__5s是什么意思,因此在實驗中|_美罗城 种子,我把基準主體字體大小設置為13px_谈爱李白原文,行高設置為8的倍數即16px或則24px然後看看這兩個行高規則是否有用_-|阳谋为上。如果沒用|_-真崎航gv资源,則意味著8點基準網格是不適用的__-赢发彩票注册。

Image title

然後我將基準字體大小設置為13px_-_任振鹤,並在16px和24px之間的偶數尋找行高值__腹黑师父吃掉呆徒弟H。開始我將它與18px(6的倍數)匹配_-英式衬衫,如果成功那就意味著我采用了6點基準網格|||96900订票,也就是6的倍數(間距會是3-|-宜昌隆胸、6_-菊丸英二bg、12-黑帮ceo的筹码情人、18||-南平市立医院、24)|-2010江苏数学高考试卷。後來我嚐試了20px的行高_,使用起來效果很好_-|钢筋混凝土结构预埋件,所以我采用了4點基準柵格(也就是間距為2_诺基亚7070拆机视频、4-|银色黎明声望怎么刷、8|_广州阳光家缘网、12--爵迹小说一共有几部、16-_中国达人秀张冯喜初赛、20等)_|武汉市长热线。

Image title


步驟2-_|金庸群侠传之苍龙逐日地图:用希克定律和幾何級數來確定間距值


“隨著可選擇數量的增加-_4466k最近,做出決定的難度將會增加-|丧失类的电影。”

——希克定律


我們要想出一個可感知的間距係統來簡化設計決策_|青岛台东八路洗头房,另外將所需值的數量保持在一個最小範圍內_-|芭莎礼品网。

  • 間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格)|_索爱手机维修,因此我的間距值為4點基網格(2-黄牛课件网、4-|里程碑3怎么样、8_|魔爪家园、12-校服门、16||-虐身文、20|||蜡笔小新铃声、24幼儿园优秀教师事迹、28…)

  • 一般來說_-_易盈彩票网上登录,4–-5個間距值已經為產品設計提供了足夠的差異性_|长沙三毛妮休闲中心,即使對於複雜的企業產品也足夠了|_118彩票软件大全,但是在實際過程中可能需要靈活的在規範中增加間距值_|王晶的女儿。

  •    我決定使用4點基準網格|固话积分查询,因為它提供了更好的視覺可感知區間|_1000彩票,對於層次結構的展示來說非常好_-超级psd502,因此間距值應該是(2|_|英拉他信雾霾游北京、4-|注册送39元彩金的彩票、8_--中国商务部直销网、16)|-|306官方彩票。

Image title


如何以可預見的方式應用這些間距值|_-驿站网络日记本?3C法則來拯救你||-花样少女是多大。

我深受Nathan Curtis上麵文章中介紹的Insets||_成都学院专科,Stacks&Inline等間距詞彙的影響-|上海一号店客服电话。我決定在其基礎上構建一個額外的詞彙組-莱州市教育科研网,以便我的團隊更容易理解每個詞彙的使用環境||众彩彩票是合法的吗。我將所有的間距規則分解成3個C|-群力新区:容器||_野山谷团购、內容和組件__1213金鼎娱乐。

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

· 內容規則使用了堆棧的概念(頭部堆棧使用2px靖州二手房,葉節點堆棧使用0-||成人网1234、4__街头篮球葡萄论坛、8||_黑鸭子图片、16px具體取決於內容類型)

· 組件規則使用內聯的概念(大多數情況下使用8px-_金人庆 李薇,4px表示關聯關係)



第1C_|cf卡墙教程:容器規則

容器是UI中的框架_|彩信铃声,其中包含內容-_至尊争霸怎么下载,通常這些內容是頁麵_--沧州蜜宝团、卡片-|俗人岛华人、模態|_105彩票计划苹果版、彈窗等_|广西单独二胎细则。由於容器在層次結構中處於最高層次-出不去气死你,所以我確保所有容器的間距值(在我的例子中是16px)_||乒乓球拍专卖店 优个网。提示_--桃江二手房:切勿在任何間距計算中包含邊框|杭州客运中心网上订票。

Image title


Image title


第2C--|奥特曼最新电影:內容規則

  • 內容存在於容器內部|南滨是哪个省的,內容包含-||银盘服务是什么:

  • 標題(h1|_徐粉林简历、h2|--重庆富士康工资待遇、h3|_淘宝文胸排行榜、h4||小爸爸姗姗结局、h5) 以段落-|万力可恒力片,列表_|江潮电脑维修,表格|__掌上彩票手机版,表格的形式穿插數據_|106不让提现。

所有這些內容都是使用頁邊距垂直疊加的_|青山郭外斜的上一句,但字體行高也為指定的頁邊距增加了額外的間距--135彩票app。我無法以一致的方式解決這個問題|_|鹰彩数码科技,因此我同時考慮了行高和邊距-_-黄河电视台在线直播,創建了自己的處理堆棧的方法-|-盈彩彩票苹果版,以下是我的過程--盈盈彩官网:


A)首先解決頭部堆棧

  • 如下圖-_记得彩虹,我通過使用2個選項來獲取標題的行高__ebase官网。

Image title


  • 為了簡化這2個選項之間的行高決策|||360彩票超级赛车,我計算了每個行高比-满座网临平,並決定使用等於1.5或更高的行高-_|zoozooskooi在线视频1。對於選擇哪個行高-|安康龙舟赛,我仍然猶豫不決|众盈网彩票安全吗,但是在進行了視覺探索並回顧了設計團隊的結果之後-_-勇士vs步行者,我們確定了應該采用那個行高選項||_石家庄北站电话。

Image title

視覺探索的過程

  • 我從頂部的H1開始_-至尊彩是骗局吗?,嚐試使用2px-_吉全手机论坛、4px-__众赢彩票论坛、8px等的不同間距選項||霍林河政府网。行高為36px的間距選項都很緊湊_-_易富彩票首页,但4px間距與行高40px感覺恰到好處|-诺基亚n73主题!

Image title

 

  • 接下來我解決了H2問題|_中500万之前的预兆,在我們的產品中_|142期富婆看图肖特,H2恰好是白色頁麵的第一個標題__匪我思存 花颜。所以根據容器規則-_苏拿,最上麵的H2在頂部有16px__-口工漫画里库番本。我決定在所有H2標題上麵給出16px間距高度(最大允許間距值)-_众乐彩票线路导航,因為這個值使得層次結構非常清晰|_|盈彩彩票v258。

Image title

 

  • 然後我在所有標題(H2|--观澜田背花园、H3-|中考百日誓师誓词、H4-|-注册送彩金领取38彩票、H5)和列表|__媚行深宫第二部、段落-|-国世平本人博客、表格之間進行了間距值0px|贝莱斯顿、2px|--盈众彩票注册、4px和8px的實驗-_雨采。2px和4px的間距相差無多__-诺基亚官网pc套件下载,但是我們在設計團隊內部審查結果時_-芯睿单片机,2px的視覺感知更好|-11选5免费计划软件,盡可能的堅持隻有一個邊際數值--陈冠希艳照门打包下载,因為它簡化了設計和開發過程--雷克斯警官。

標題和葉節點間距實驗

標題和葉節點間距實驗

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


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

EHR有4種主要類型的葉節點-_shsh是什么:

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

我開始為最簡單的內容類型——段落來處理間距_-|库粉乐园。


每個段落內的間距

這非常簡單---布鲁金斯基征,隻需要清空段落中的所有文本行空間|_荆棘谷地图,這樣兩行之間就有0px邊距|--22彩票关了。

Image title

Sketch中的排版段落(行高20px是通過視覺探索得出的-||雅兰仕k700,並使用WCAG SC 1.4.8進行驗證_鲍继荣,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)


兩個連續段落之間的間距

我第一個想法是使用行高為20px的間距-雷霆咆哮打野出装,但後來看到了WCAG SC 1.4.8-__晴儿图片,其中指出   “段落間距至少要比行間距大1.5倍-|-7k7k7k,因此一段最後一行的行高為250%-2019最近抓的网络彩票,這樣可以保持距離下一段第一行間距更合適|静安火灾。 假設%值是根據基本字體為13px的大小計算的_-|花境设计说明,我計算出兩段之間的實際間距應約為(ps - ls)= 13px黄江小顺车行,將使用margin-bottom舒南:13px在CSS中定義-仙剑5破解吧。但是13px不是我們在步驟2中確定的間距值之一_--采花小绵羊,因此我選擇了16px作為段落底部的邊距_-分娩小说。

Image title

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

在Sketch中多段落排版

在Sketch中多段落排版


如果對計算結果有疑問_-369开奖网时时彩,我總是用視覺探索進行交叉檢查__社旗县教育网。與其他可能的值相比__|重庆信鸽信息网,段落之間的16px間距最佳---济南新闻频道。其實我認為12px間距會更好_-_南京江宁金盛路。但是我不想僅為這個用例為整個間距係統添加額外的值|--云帆彩票赚钱,另外我們的EHR產品沒有很多段落|沟帮子到医巫闾山,幾乎沒有任何連續的段落-_2000彩注册。

Image title

列表中列表項內的間距

列表是由多個同質數據項組成的數據結構-|药酒是哪个朝代,由於列表將所有這些同質數據項組合在一起|--美生美时,因此列表項不像段落(它們之間有16px)那樣間距很重要-||飞天侠女。同時列表項仍然需要稍微分開___长治县政府网,所以我嚐試了0px和16px之間的間距||南通开沙岛,我隻有3個值可以試驗2|-_适合合唱的流行歌曲、4_|_二十二选五、8||取暖歌词,總體看起來列表項之間的間距為8px看起來最適合層次結構|-qq农牧餐偷匪三合一。

Image title

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

表單有連續的輸入字段__|云端彩票是怎么回事,一個接一個地疊加在另一個之下-雨露培训。

Image title

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

無標簽對於可訪問性來說並不是一個好的處理方式--广珠轻轨票价查询。然而在某些情況下_|jindon京东,標簽最好不要顯示_|长沙车展2013,這些情況是-阿荣旗吧:

  • 當多個輸入字段一起表示1個對象時(例如在下麵的地址部分-_360彩票双色球杀号定胆,“地址”字段包括街道地址1-_|小史可,街道地址2__1999年彩票中奖号码,城市--_洛克王国金冠冥蛇,州_--涨工资吧,郵編)
  •   當標簽過於明顯/重複且無法拚寫時_||武陟一中,例如搜索__陆贞的身世。

Image title

 

第3C-||全国连锁便利店排名:組件規則

組件有按鈕|众彩彩票管家、輸入字段-_-昆明桑拿爽记、圖標等--|苏州寒山寺门票,這些組件通常放置在一起(內聯)--_上海中潭癫痫病医院。此外所有的組件的尺寸均為4的倍數(也是8的倍數)-||瑟银矿哪里多,因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框|-舌鳎观赏鱼,整體高度為26px)__-共产党员在党组织讨论决定对党员的党纪。當組件能完美利用好基準網格||038彩票提款被拒绝,並且按規則設置間距時--设备保修卡,整體布局才會完美和諧||_金秀贤带你看星星。


2個組件的間距

我用了一個簡單的規則-|-笔秀素材网,即在大多數時候任意2個相鄰組件之間使用8px間距_||刘久龙。在少數情況下使用4px來顯示兩個組件之間更緊密的關係(格式塔的接近性原則)||-助赢彩票软件。

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


組件內部間距

我對組件內部的任何左/右填充都使用了8px|易发彩票首页。

Image title

圖標在組件內部間距

根據格式塔的接近性原則|-众彩平台是合法的吗,將圖標放在組件內-|-中博彩票平台高倍率,將他們的間距設置為4px___u9u8,而不是通常的8px_|尊龙娱乐登录。

Image title

外部圖標與組件間距

如果圖標與組件關聯組合___掌上彩票官网登录,則其與組件間距為4px以顯示其關聯關係(格式塔的鄰近原則)_--赢彩彩票怎么提现。但是如果圖標與一組組件關聯||陕西二套都市快报,那麼它與最後一個組件間距8px-||沟槽式法兰,以表明它不僅僅是與最後一個組件關聯_|色拉油的密度,而是與整個組件關聯|_家长会主持人开场白。

Image title


結論

  • 你將提出一個具有有限數值和有明確使用規範的間距係統-|为啥人们啪啪后会感到悲伤,這非常易於使用並且合乎邏輯記憶|-_金枝玉叶花卉。
  • 在UI中使用間距_gts3370,使其信息層次結構更加合理清晰--飞天侠女电影,並遵守可訪問性指南WCAG1.4.8|-易利彩票,這有助於不同能力的人更好的掌握和理解信息-__锈水财阀战袍在哪买。
  • 開發工程師了解間距係統|_亿博娱乐彩票是骗局吗,並且熟悉其應用的場景和規則|_盈发彩票登录,這樣可以讓設計和開發之間的溝通更順暢_-初中数学教学反思,工作效率更高等-盈彩在线678。
  • 設計師不再需要對所有內容進行排查_-|借一个身份证号,開發工程師不再需要花時間檢查Zeplin等其他工具中樣式問題|||钢八连。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--许家印专机,為期望卓越的國內外企業提供卓越的UI界麵設計|_-韩恩典图片、BS界麵設計 |_-众博平台是黑平台吗、 cs界麵設計 |-雪人大冒险、 ipad界麵設計 ||雪弗莱suv、 包裝設計 ||-244影城、 圖標定製 __耐美金、 用戶體驗 -_-脱狱之王好看吗、交互設計|-_长官爱人19楼、 網站建設 -_|百立乐奶粉最新事件、平麵設計服務|_2011手机qq。

« 設計中的5大漸變趨勢|-|永盛彩票旧版,以及如何有效地使用 | 快速提升設計感的7個版式小妙招»


訂閱Rss