当前位置:首页>生活 >生活小常识>正文

如何处理界面细节:iOS14 中「时间控件」的设计

2023-12-03 责任编辑:未填 浏览数:10 科学技术网

核心提示:iOS6和iOS7设置界面的比照「卡片式布局」是被Google推重起来的,其时有款产品叫「GoogleNow」(现在现已下线),这个产品可以语音互动自动提示(飞机、路况、竞赛比分、突发新闻等等)信息内容给到你,包括的信息内容多样且杂乱,用了卡片规划去处理了信息多而不乱的问题,信息和信息之间互不受到影响。米勒规律的示意图咱们比照下「提示事项APP」中的日历挑选,间隔处理确保了日期间隔是比外面小的,日历看起来便是一个全体可操作的控件状况,假如拿「格局塔理论」和「米勒规律」来看的话都是在合理范围内,现实感触也是


防杠阐明1:接下来聊的体会纯我的「片面感触」,比照剖析也是根据过往的经历来聊,没有数据也没有其他支撑,交谈为主,无他意求放过。

防杠阐明2:苹果在「日历APP」和「提示事项APP」这2个APP规划一定有考虑过,文章朴实从外部视角去聊体会感触,不聊APP的场景战略定位。

一、iOS14的「时刻控件」长什么样
二、开端做3个视点比照比照1:日历间隔处理

全体来看「时刻控件」中的「日历」是问题最大影响体会最大的当地,「日历」中的日期和日期之间的间隔是大过日期和左右屏幕的间隔,这会导致日历看起来比较散不是一个全体,见下图中黄色符号和蓝色符号。

这类型的问题归于「格局塔理论」中的「LawofProximity挨近规律」,间隔没有起到把相关元素粘起来的效果,相反把元素离散,有种信息量许多鳞次栉比的感触。


「日历APP」中日期之间间隔和屏幕间隔比照

详细「LawofProximity挨近规律」的意思是:彼此挨近的事物被以为比相隔较远的事物愈加相关。


格局塔理论中的挨近规律示意图

这儿鳞次栉比的感触还有另一个理论基础「米勒规律」,因为人一起处理信息大约是「7±2」条信息,当信息量超出这个数量后呈现,本能上一定是先排挤的,咱们回想下假如你要填写一个杂乱表单时期的场景,便是这样的感觉。


米勒规律的示意图

咱们比照下「提示事项APP」中的日历挑选,间隔处理确保了日期间隔是比外面小的,日历看起来便是一个全体可操作的控件状况,假如拿「格局塔理论」和「米勒规律」来看的话都是在合理范围内,现实感触也是这样


「日历APP」和「提示事项APP」日历进行比照

比照2:上下层级联系处理

日历APP时刻控件打开后感觉是「碎裂」,抱负应该右侧这样块状的层级结构打开。

再来比照「提示事项APP」中的层级联系,整个「时刻控件」左右都有缩进,左上和上一级的联接处置割线也做了处理,加上上一级日期标题前有个「日历ICON」,很天然在视觉上就呈现了上下层级联系呈现,内容相同看起来明晰简练许多。


「提示事项APP」顶用缩进和风格线去体现层级联系

比照3:页面布局上的比照

再把视角放到页面布局中,「日历APP」选用的是边到边布局(EdgetoEdge)方法,「提示事项APP」选用的是卡片式布局(Card)方法。

在iOS体系中「边到边布局」是从iOS7后苹果开端选用的方法,优势是把极大添加了屏幕空间运用率,可显现内容添加,其时主打机型是4英寸屏的iPhone5s,,屏幕空间有限。


iOS6和iOS7设置界面的比照

「卡片式布局」是被Google推重起来的,其时有款产品叫「GoogleNow」(现在现已下线),这个产品可以语音互动自动提示(飞机、路况、竞赛比分、突发新闻等等)信息内容给到你,包括的信息内容多样且杂乱,用了卡片规划去处理了信息多而不乱的问题,信息和信息之间互不受到影响。


GoogleNow主界面,卡片规划为主

回到这两个页面布局比照中,不过不打开「时刻控件」这样比照来看两头布局并没有很大的问题,详细看是要更多「容纳」仍是要「屏效」。

不过这儿咱们比照的是「时刻控件」,这部分看来「卡片式布局」是更适宜的,布局能容纳不同杂乱的信息,块和块功用和功用之间是愈加清楚,不会引起紊乱。

现在许多产品也都在考虑「卡片式布局」,像「手机淘宝」这两年基本上现已彻底改形成「卡片式布局」,我了解是因为手淘信息流杂乱特性,相片和元素的呈现都不是固定的,用卡片作为「容器」去容纳「内容」,让界面有次序。

但这儿仍是要提一嘴信息流不要「无脑」追「卡片式布局」是最好,比方媒体为场景的APP,明显「边到边布局」明显更适宜,比方Instagram,要给相片以更多的展现空间,也比方电商中对产质量量有决心的,那也合适「边到边布局」,比方SNKRS,对球鞋质量体现的愈加到位。

先了解再去规划「合适自家产品」的风格是个挺重要的事,究竟一个产品风格会用好久,改动本钱很高。


三、最终总结一下

真的是抱着「提心吊胆」的情绪去做的比照,苹果规划一向都是职业标杆,这次是想趁聊比照时「抛砖引玉」聊聊「界面细节是怎么决议规划质量」,这些东西十分小,协作上下游也不一定介意,觉得差不多就好。现在产品迭代速度飞快,留给规划师的时刻也不多,怎么样可以快速有效地把细节处理好,是一个值得长时间评论的论题。

最终抽取一些文章中的「关键词」做个总结:

间隔操控:有些规划师出稿或工程师开发检验时会疏忽「间隔」的价值,其实「间隔」对规划质量影响十分大,背面规划理论支撑是「格局塔理论」,假如对「间隔」不灵敏,那要多操练操练去找好的产品规划去调查和感触。

米勒规律:许多人看界面觉得乱,为什么感觉乱背面可以经过「米勒规律」做规划理论支撑,人在同一时刻处理信息程度是「7±2」个,数量越多越乱。

层级联系:表单或杂乱页面中的界面须要把层级联系体现到位,否则界面会杂乱无章,在iOS11时期苹果现已注意到这一点而且现已发起过,阅览了解「iOS11规划理念和3个规划方向」。

边到边布局:一种屏幕功率运用高的界面布局,在iOS7开端后被运用

卡片式布局:一种可以把杂乱信息有序交融在一起的布局,更多容纳和扩展

好了,今天和咱们就啰嗦到这。

作者:icojump,微信大众号:边规划边办理

本文由@icojump原创发布于人人都是产品司理,未经作者答应,制止转载

题图来自Unsplash,根据CC0协议

阅读上文 >> 网约车到底多赚钱?滴滴终于公布账本了
阅读下文 >> 红杉资本投资PP租车 豪赌“黑车”合法化?

版权与免责声明:

凡注明稿件来源的内容均为转载稿或由企业用户注册发布,本网转载出于传递更多信息的目的;如转载稿涉及版权问题,请作者联系我们,同时对于用户评论等信息,本网并不意味着赞同其观点或证实其内容的真实性;


本文地址:http://www.whst.com.cn/whstsh/227397.html

转载本站原创文章请注明来源:科学技术网

友情链接