首页 » 网页设计 » 向苹果新系统iOS11学设计

向苹果新系统iOS11学设计

host 网页设计 64 次浏览 没有评论

 

向苹果新系统iOS11学设计

苹果的这一新系统的发布,可能也将带动卡片设计风格的重新流行。秒秒学小编就趁这个机会,跟大家重温下卡片式风格的几个设计小技巧。无论是网页设计还是APP界面设计,我们都可以用得上。

1、从黑白色的轮廓开始设计

向苹果新系统iOS11学设计

听起来很容易是吗?从黑色和白色的线框开始设计。考虑清楚每个版块要承担的作用,要表达的内容,做成卡片后,哪个部分将被点击或者可以点击……确保卡片能被有效的识别和使用。

设计的时候把每个卡片想象成扑克牌,调整牌与牌之间的间距,安置好牌上的图像、文字等元素,这样每个卡片都自成一派,但又能看出来是一个整体——这样形成一个直观明显的框架规划。

接下来就要思考用户如何使用卡片。用户点击哪里可以引发行动?点击模式和产生的结果是否清晰?怎样返回或下一步?……这些操作的提示是否足够明确,要如同原先网页上“点击这里”的红色按钮一样明显,用户一看就知道如何操作。

2、巧妙使用空白空间,保持较宽的间距

向苹果新系统iOS11学设计

卡片式设计最大的挑战是如何让布局紧凑但又不显得杂乱。留出一定的空白空间(留白)是个很好的办法,留出更多的呼吸空间,使整个界面看起来更宽敞,阅读体验也会更好。

这个空白间距如何把控呢?一般来讲,你可以将平日里排列图片的间距X 2,额外的空间可帮助设计师更有条理地组织内容。

卡片使设计能够很好的适应各种尺寸,不仅能适合手机的小屏幕,也能适合平板或台式机的大屏幕。

3、添加自然色和阴影

向苹果新系统iOS11学设计

下一步就得考虑颜色和阴影了。卡片的阴影和样式尽量模仿真实,想象一个真实的卡片看上去是什么样的,放在屏幕上和握着它看起来应该是差不多的。

1)光线应该在背面和底部投下阴影。

2)正常时候光线从上面来,设计最暗的部分应该在底部。

3)将卡片与用户的接触点(比如“点此购买”等号召行动的语句处)设置为焦点,并且要容易互动。

4)一张卡片对应一条信息。

4、字体尽量简单

向苹果新系统iOS11学设计

说到排版,简单的无衬线字体是用得最多的。字体选择避免过细过长。大多数卡片最好准备两种字体选择(最好是同一个系列,如粗黑体和黑体),一种作为正文字体,另一种给标题或者引导语使用。

为了便于阅读,可以使用大量的对比。比如字体之间的对比,背景之间的对比,每张卡片文本元素的对比。

5、不要用过多的UI元素

向苹果新系统iOS11学设计

这里再强调一下:一张卡片对应一个行动。这就意味着不需要使用到那么多的UI设计元素,比如说按钮。甚至有时候在卡片式设计中,根本不需要用到按钮。

但是如果你考虑到用户可能需要一个视觉上的提示,那么一个按钮足够了——尽量设计得简单一点。

卡片式设计,不仅能够完美契合不同设备尺寸,对用户来讲也是非常友好。不管这次苹果的iOS11会不会让卡片设计再火一把,大家都可以根据设计情况来使用。

义乌电脑维修,技术咨询QQ:404099828
       查看详情

义乌奥美电商,转载链接。

本文永久链接: http://host.ywbb.com/4833.html

发表评论

Go