8pt栅格系统 - 1. 设计入门

介绍

此文意在帮助设计师快速而统一地完成界面布局。尤其对尺寸固定的移动界面有帮助,但对响应式web设计也有帮助。

与一般的设计指南相比,此文更适合一边设计一边阅读。

代码>原型

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

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

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

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界面栅格和4pt基线栅格合并使用。这种配对保持了数学上的简单清晰,又提供了足够的选择余地来适应多种文字风格。

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

入门到此结束,下半部分才是重点。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏儿童编程

“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例

“心中有剑,落叶飞花,皆是兵器”是武侠世界中武功的超高境界。这句话用来形容Python动画也是非常合适的。从最原始的手工动画到现在的好莱坞动画大片,动画原理都一...

30820
来自专栏极客编程

Material Design Lite ,简洁惊艳的前端工具箱

本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。

20330
来自专栏BestSDK

如何为App图标挑选合适的颜色

image.png 在之前我已经研究过了从app描述、截图、名称到国家/地区的所有东西。最能勾起我兴趣的是app的图标,但苦于不知如何去对此进行有效的研究。 ...

29090
来自专栏大数据钻研

编写难于测试的代码的5种方式

什么是弹框? 弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不...

34980
来自专栏申龙斌的程序人生

零基础学编程017:画出我的公众号LOGO

在《零基础学编程014:小海龟做画》和《零基础学编程015:画些有趣的图案》里,我们已经可以用编程中的循环结构,加上turtle中的前进、转向等指令画些有趣的图...

32060
来自专栏数据小魔方

think-cell chart系列6——不等宽百分比堆积柱形图

今天跟大家分享的是think-cell chart系列6——不等宽百分比堆积柱形图,学名也叫Mekko(%)图。 ? 当然这个图同样也是之前专门讲过excel中...

55360
来自专栏互联网杂技

你的布局设定方法靠谱吗?

本文不适合采用天才设计(Genius Design)方法的人士。 有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的,越细致...

39570
来自专栏阮一峰的网络日志

排版六原则

几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。

10720
来自专栏黑泽君的专栏

去除高清视频锯齿几个方法

  在使用DV拍摄制作视频时,经常被网友问到一个问题——为什么我拍出的视频在电脑上播放时会出现锯齿现象?有人认识是电脑配置太低,有人认为是摄像机出了故障,有人认...

2.7K30
来自专栏生信技能树

谁来拯救你 我的屁屁踢

审美的重要性 美究竟有没有一个标准这里不敢讨论。但是在长期的实践当中,人们大体总结出了一些形式美的规律,比如平衡、对称、对比、统一、变化以及黄金分割等。 做好P...

380100

扫码关注云+社区

领取腾讯云代金券