了解8pt栅格系统,快速而统一地完成界面布局

此文意在帮助设计师快速而统一地完成界面布局。尤其对尺寸固定的移动界面有帮助,但对响应式web设计也有帮助。与一般的设计指南相比,此文更适合一边设计一边阅读。


此文意在帮助设计师快速而统一地完成界面布局。尤其对尺寸固定的移动界面有帮助,但对响应式web设计也有帮助。与一般的设计指南相比,此文更适合一边设计一边阅读。

了解8pt栅格系统,快速而统一地完成界面布局

1. 设计入门

代码>原型

设计软件和原型工具让你创造界面看起来最好的样子。但是对于数码产品,原型的目的是向老板和开发者进行清晰的方案沟通。最后,只有开发者的代码,能够让这个方案成为产品。

现在,几乎你在设计工具上做的所有东西都可以用代码创造出来,但是总有些因素让设计方案很难实施(可能是可用性、加载时间、展示效果等)。

不论如何,最重要的是你的设计能通过代码在用户的设备商运行。所以应该优先考虑在使用Sketch和Photoshop时,尽可能缩短在思考方案与编程之间的时间。

了解8pt栅格系统,快速而统一地完成界面布局

Box模型

Box模型是一种描述物体尺寸和空间的形式,其包含四种信息:边框、外边距、内边距和元素本身的尺寸。

边框

元素边边缘轮廓线的粗细。大部分的设计工具不允许其影响整体的空间和尺寸。

内边距

元素与其包含的子元素之间的空间。

外边距

元素边界与其相邻物体之间的空间。

什么是pt

pt(point的缩写)是一种与屏幕分辨率相关的空间度量单位。最简单的解释就是在“1×(1倍)”分辨率下,1pt=1px。

在“2×(2倍)”分辨率下,1pt=4px,因为屏幕分辨率是X和Y坐标相乘的结果。

在“3×(3倍)”分辨率下,1pt=9px,如此类推。

1倍分辨率(@1×)

请注意,这里的所有东西都是以1倍分辨率设计的。因为其它倍数的分辨率可以很容易地从1倍分辨率计算获得。

例如,如果想要从2倍分辨率转化到3倍分辨率(假设线条的粗细是偶数),你需要将设计稿缩小到原来的50%(来获得1倍分辨率),然后再扩大到300%。

1倍分辨率设计则能够很容易地被放大到任何倍数。

可以在各个分辨率分别添加图标等细节,但是这种做法并不常见。大部分情况下,为了速度和方便,在1倍分辨率工作是最理想的。

了解8pt栅格系统,快速而统一地完成界面布局

使用像素栅格

你创建的每个界面元素都应该对齐像素栅格。这个概念一般被成为像素拟合,它确保所有元素在用户设备上显示清晰明确。

文本在这方面是个例外,为了能够清晰阅读需要一些反锯齿效果来让形状有一定模糊度。所以不要担心文字的每个点都对其到栅格上。

了解8pt栅格系统,快速而统一地完成界面布局

文本元素

像文本这样的段落元素几乎永远都是界面中最重要的部分,但是像文字尺寸和行高这些东西却不像其它元素一样,能够在保持纵向节奏和可读性的情况下,轻易地遵从界面栅格。

使用基线确定文字底部是提高纵向统一性的好方法。通过排布每行文本的基线,可以很容易地让所有的界面元素处于和谐的纵向节奏中。

我喜欢将我的8pt界面栅格和4pt基线栅格合并使用。这种配对保持了数学上的简单清晰,又提供了足够的选择余地来适应多种文字风格。

大部分平台(Android、IOS等)的设计指南有基础原则,但如果设计师从默认字体开始打破一些东西,能够获得更加独特的结果。所以可以在排布文本时做一些处理,然后将之做外排布其它元素的基础。

了解8pt栅格系统,快速而统一地完成界面布局

 2. 如何使用

8pt栅格

基础理论

使用8的倍数来定义块元素(block elements)和和内联元素(inline elements)的尺寸、填充和边距。

当块元素的唯一内容是文本时(如按钮),通常应将文本尺寸设置为与界面其它部分/特定平台规范一致。

如果是通屏宽度的元素,使用内边距来确定元素高度(最小高度)和上下外边距来确定宽度。

两种方式

8pt系统实际上主要有两个版本:一是将元素放到8pt删格中(称之为“硬删格”),另一种方式是仅测量元素之间的距离是8pt的多少倍(称之为“软删格”)。

硬删格的要点是将透明的背景切分为前景元素,然后只要关注每个元素的外边距和内边距,并将它们像砖块一样放到栅格上。Material Design(使用4pt删格)就符合这种方法。

了解8pt栅格系统,快速而统一地完成界面布局

硬栅格

软删格的要点是,当用代码编写界面是,不可能真的使用删格,因为程序语言不适用这种结构(恐怕会被丢弃)。因为快速达到高质量、可编程的模型是最优先的,相比需要管理额外层级的硬删格,结构更流畅、轻量的软删格也许更有优势。像iSO这种界面元素没有被删格限制的系统可能更喜欢这种删格版本。

了解8pt栅格系统,快速而统一地完成界面布局

软删格

为什么重要

界面统一

当所有尺寸遵循同一规则,界面自然而然就能更加统一。

减少做决定的次数 = 缩短时间

使用8pt删格就好比在以往每8个尺寸选项中,减少了7个。你减少了无足轻重的东西,那么编码时间也会下降。

多屏设计

无论形式如何,大部分屏幕尺寸至少有一条边可以被8整除(通常不止一条),并且有些平台的设计规范(如 Material Design)本身就是4pt或8pt删格的。

有些屏幕的尺寸很难使用栅格(iPhone 6 的375*667pt),但是解决方式其实非常简单。只需保持原有的内边距和外边距不变,减小每个块元素本身的尺寸来填充多余的空间即可。为了保持栅格的统一,可以有一个元素的尺寸与众不同。基础你的用户可能永远看不到你所用的测量方式。

了解8pt栅格系统,快速而统一地完成界面布局

最常见的屏幕分辨率

如何使用

吸附到网格

几乎每个设计应用程序都有一个“对其删格”选项。如果你使用硬删格方法,这个功能一定会使你的工作更容易。如果的话,请确保“对其删格”功能已开启。

Rem单位和变量

如果你将基本文字尺寸设为16,那么就可以以0.5rem(rem是一种css尺寸单位)为基础构建8pt删格。

如果你不想这么做,或者不喜欢rem单位,你可以使用CSS或预处理器来处理布局,同时保留变量的可维护性。

定义你的栅格

大部分设计工具允许你设置你自己的“大微调”值。我使用一个叫 Nudge.it 的程序,我将我的 Sketch 设计从10改成了8。这个很简单的应用程序能够让你的整个工作流程更加快速容易。

快捷键

许多应用程序都有快捷方式,方便快速微调、修改尺寸并适应栅格。我推荐大家去学一学(尤其是微调和尺寸适应)。

给图标增加框架

图标通常具有不同尺寸,这样才能保持相同的视觉重量。使用统一的框架围绕它们,类似硬删格那样,同时允许它们在框架内自由变化。

放大缩小

如果你一直将页面放大到1600%,你可能会对视觉节奏有些误判。相对的,如果你一直用50%的尺寸看你的页面,你可能会错过重要细节,例如像素拟和(pixel-fitting)。所以要经常调整缩放尺寸以确保你看到了完整的视角。

 

原文地址:https://spec.fm/specifics/8-pt-grid

译者:雨涵_Zoe

译文地址:http://www.jianshu.com/p/80c1ae9ffe84

本文由 @雨涵_Zoe 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24766/

(0)
CatherineCatherine
上一篇 2017-05-09 15:05
下一篇 2017-05-09 16:55

相关推荐

  • 腾讯高级交互设计师的自我总结

    ——关于转岗、给新人的建议、交互与产品设计、腾讯ISUX的总结 1.能聊聊您从网页设计师变成前端工程师再转为交互设计师的过程么,有什么建议能给和您一样自学交互的同学呢? 答:回想起来挺有意思,过程很丰富,说明…

    交互设计 2015-12-01
  • 设计师升维:集创思维构架设计逻辑

    现时代的设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态(集创思维)。体验分析_方案1_产品提供的原始方案
    方式:点击条目>输入数值或点击加减>点击确定完成
    最大操作次数23次:点击条目1次,点击21次+号到最大值,点击确定1次,少数用户会使用此方式。
    常规操作次数6次:点击条目1次,点击输入框1次,输入数值3次(如3.5),点击确定1次。
    最小操作次数3次:点击条目1次,点击+号随即完成1次,点击确定1次。体验分析_方案2_提前防止用户出错
    方式:点击条目>滑动弹窗>点击完成
    最大操作次数4次:点击条目1次,滑动到最底部需要2次,点击选择1次。
    最小操作次数2次:点击条目1次,无需滑动,当前已有他要的选择,点击选择1次。体验分析_方案3_减少操作
    方式:点击数值选择
    最大操作次数1次:直接点击选中
    最小操作次数1次:直接点击选中
    屏占比:半屏
    扩展性:低
    操作点击次数降低,但屏占比过多,且不适用于当数值更大时(如果以后数值扩展到100%,那么整几屏都是按钮)体验分析_方案4_减少操作,防止出错
    方式:拖动圆点选择
    最大操作次数:1次
    最小操作次数:1次
    屏占比:低
    扩展性:高
    操作次数低,效率高,屏占比少,具有适用性,可以多个此类操作叠加使用

    2017-05-17
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23
  • 译|构建用户体验地图的时机和方法

    用户体验地图结合了两个强大的工具—讲故事和可视化 ,以帮助团队了解和解决用户需求。 虽然体验地图会根据不同的场景和商业目标采取各种各样的形式,但通常都包含一些元素,并且有很多可以遵循的潜在基本规则,使得用户体验地图为设计提供帮助。定义:用户为了实现目标而经历的过程的可视化,它用于了解和解决用户的需求和痛点。

    2017-04-29
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 和华为交互设计师一起聊聊“如何让别人认可你的设计”

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈。什么鬼?辛苦完成的工作,又要重新改过。这感觉就像自己的价值被否认,没存在感。马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而久之可能会迷失自我,失去对设计的敏锐嗅觉,不敢贸然做出决策。甚至慢慢变得上级要求你什么,就做什么,毫无想法,沦为设计的“工具”。

    2017-06-05
  • 收福利!5个不为人知但干货超多的交互设计公众号

    这两年随着自媒体时代到来,越来越多的设计师开始注重个人品牌运营,比如发作品到各大平台,总结项目经验,翻译国外文章等等。无论哪种方式,对提升国内设计学习氛围都大有裨益。

    2017-07-08
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20