网站首页| 资中县| 经开区| 网络电视| 新闻中心| 内江新闻| 国内国际| 房产| 旅游| 教育| 美食| 汽车| 医卫| 体育| 娱乐| 团购| 囧图|

移动设计入门4节课:表单、列表、布局、一致性

【发表时间:2019-12-31 03:54:29 来源:】

移动设计入门4节课:表单、列表、布局、一致性

数十万互联网从业者的共同关注


移动设计入门4节课:表单、列表、布局、一致性

本文由译者@s2dongman翻译并投稿早读课。

@s2dongman:移动互联网后台产品汪,大数据经验者,健身控。

微博地址:http://weibo.com/s2dongman

banner制作:早读堂-Jenny


移动设计第1课:如何设计好移动表单


本文来源于一本书《MobileDesignBook》,是在浏览每日新产品时发现的,当在其网站注册了邮箱后,就会每2天发送1个课程邮件,内容摘抄自书中的章节。在此特意进行整理和翻译,留存学习。

移动设计入门4节课:表单、列表、布局、一致性
OKcupid

还有什么比一款约会APP更能知道如何填写表格?

第8章:表单——OKCupid是一款免费在线约会APP。这款APP提供社交网络和网络约会的功能。

在填写约会清单时,你通常需要输入关于你自己的大量信息。OKCupid会让这一切变得更简单。在你的个人详情页,你会面对一些常见填写项,比如你多高,你的宗教信仰以及你是否喜欢猫猫狗狗。我们都知道表单是一种(设计)禁忌;是互联网的害群之马。但是,你可以做很多事情来让这一切更容易。写表单写的越轻松,其完成正确率就会更高。

在OKCupid的例子中,所有的表单项都是选择菜单,这样就能使你填写变得更容易。这款APP会让你从预设的选项中进行选择,而不是空想。这样就能减少用户在认知方面的负担,从而让表单填写更容易。表单本身由于其简约的设计而具有美感;从设计上,它采用了细微的灰色投影,良好的排版,以及对留白和图标的充分利用。和iOS默认的表单设计相比,它有它自己的设计风格。

因为表单看起来好看,就有更多用户愿意填写。风格一致的UI元素让表单看起来整齐;视觉设计也不会喧宾夺主。每个表单项都有简单且明亮的图标来表示它可编辑。如果你有个答案没选,就会出现一条短线告诉你有答案没写,用这种显示方式效果很好。所有的文本都是细体字,这样也会让文本更易于识别。表单很长,但也易于理解。

总结:表单填写对每个人来说都是乏味的;采用一种干净整洁的风格设计表单,会让用户用起来更容易。

你认为在设计一款APP时,是否应该重视表单设计的方案?重视表单设计有多重要?

移动设计第2课:如何设计出色的列表

现如今,照片已成为一种十分常见的沟通媒介。

移动设计入门4节课:表单、列表、布局、一致性

第5章:Stellar-Stellar是一款让人们创造图片和视频故事的APP

列表适合在两种情况下使用,一种是导航链接,另一种是有规律的文本列表项目。Stellar使用基于图片的列表作为其各种品类的导航(人们称这个为群集)。近期的设计趋势是将列表项置于整齐的背景图上。图像的视觉呈现效果很好,因此当它和列表设计在一起时,二者相得益彰。此外,图像通常用来帮助提升用户体验,对于Stellar这款基于图片的APP而言,这样做似乎是个合适的选择。当你想要很自然地浏览通过导航展示在面前的各类群集时,每个群集都采用一副漂亮的图片作为背景。尽管使用图像作为单个群集背景的的方案非常简单、显而易见,但仍旧是个好主意。图像是很有冲击力的,所以为什么不把图像用作更有冲击力的导航呢?

图像比单独的文字更有冲击力。作为导航辅助,图像也让用户易于理解。看一看那些群集图像,然后告诉我你是不是希望看到更多呢?人们喜欢高质量的图像,因此使用高质量的图像还可以打造更愉快的体验。此外,如果Stellar使用从用户那里收集的图像,他们就具有了社会属性。对于一款APP而言,表现出关心他们的用户,是一种很重要的态度。如果你故事中的一张图片被采用了,你会因为你的照片代表了一整个群集而感到很高兴。这感觉很棒,这就是所谓的快乐和喜悦感。

总结:对于那些像超链列表那样的琐碎条目,图像作为提升用户体验而言,是一种很好的方法。


移动设计第3课:一致性的重要度

(设计上的)不一致仅仅是看起来很难受,还是它真正降低了用户体验?

移动设计入门4节课:表单、列表、布局、一致性
SleepCycle

SleepCycle能通过分析你的睡眠模式,把你在最佳时间叫醒。

这款APP收集了很多关于你睡眠的信息。但是,这些信息并不是以最美观的方式呈现的。整个页面被分成了行间距很窄的列表项。顶部是张曲线图,接着第一组模块展示了很多内容,比如你花费在床上的时间,以及你前一晚的睡眠质量。造成这组模块视觉效果很差的具体原因有两点。首先,没有标题说明这是一组什么样的内容集合。第二,行与行之间的留白也很奇怪,SleepSecure占据了更多的上下留白空间,而同样都是列表项,没有理由给SleepSecure留更大的空间。此外,在列表中还有一个大红点,以及一个微笑的方块,这些奇怪,而且看起来很突兀。

总之,这个列表让人毫无兴趣,不愿意多看一眼。统计数据的展示风格和曲线图的风格不一致。第二组关于你的睡眠模式——如最长睡眠夜晚的统计数据,仍旧在内容可视化上采用了完全不一致的风格。减少这种情况下的设计不一致的方法很简单:在整个页面上统一设计风格。一个清晰的设计风格,需要使用相同的留白、上下间距、颜色、字号和粗细度,甚至在图标设计上,也应当确保一个整洁的显示风格。这样就会看起来更好更整洁。

总结:视觉上的不一致会使列表项看起来很难看。这会让用户查看内容感到很困难。


移动设计第4课:如何进行页面布局

当所有页面元素汇集在一起时,那效果美极了,不是么?

移动设计入门4节课:表单、列表、布局、一致性
纽约时报

纽约时报(NewYorkTimes)是一个众所周知、受人尊敬的新闻机构,同时也拥有自己的APP。

在纽约时报APP的新闻信息流整体设计中,对留白、排版、对齐、甚至颜色的使用都很出色。这款APP中有很多正在发生的新闻事件,但你不会感到杂乱,因为你可以很轻松地略过它们。就像你在看一篇文章时,能注意到很清晰的标题,但除此之外还有一些额外的内容。因为这些额外的内容采用浅灰色字体,同时也用了更小的字号,这都会减少眼睛的阅读困难。无论谁留意到布局的留白和垂直排版间距,都会对其印象深刻,因为尽管文字很多,却易于阅读和浏览。

最后,关联每篇文章的缩略小图会被挤到边上,文章的标题支持这种布局,并且这种布局并不碍事。你可以很容易地略过不同标题,直到你找到你感兴趣的内容,而不是被每行标题间的图像所分神。把图片变小,挪到边上,是一种又聪明又合适的做法。所有这些设计决策加起来,会达到一种很奇妙的效果,并且易于追踪信息流。

总结:当在屏幕上显示很多信息时,优化信息流就是个很重要的事情。


互联网早读课
每天八点,风雨无阻
专注产品、设计、交互、运营
投稿:mm@zaodula.com
QQ群:281331186
加群密码:职位-地区-昵称

移动设计入门4节课:表单、列表、布局、一致性


相关阅读:
新恒生股票配资 www.22221.cn
最新新闻
图片新闻
新闻推荐
TOP