收藏本站 关于我们

形式与内容的关系 - app的视觉美成因分析(原创文章)

发布时间:2017-04-18 13:49:54   来源:PS教程   人气:0

前言:本文9733字,你可以上个厕所回来再看。_(:зゝ∠)_ _________________________________________

本文9733字,你可以上个厕所回来再看。_(:зゝ∠)_

___________________________________________



Hello各位看官,我(终于)来更新了,你们有没有想我呢?

经过上一篇文章之后,陆陆续续开始有一些编辑和读者问我是否有出书的意愿。关于出书这件事情,我不知道作为一名UI转产品设计师的视角去写的一些产品和交互方面的东西逻辑是否能站得住脚,也不知道会不会毁人不倦。

但是上一篇百度外卖的文章写完之后,百度外卖交互的同学加我QQ告诉我:

\


那这里有一个关键的问题就出现了,为什么有些app,普通用户一打开就自然而然的觉得它很美?用户这种“觉得他很美”的意识到底是从哪儿来的?


在此之前,我先来说两组哲学概念:


意识是主观形式与客观内容的内在统一。(马克思主义哲学)

内容决定形式,形式反作用于内容。(黑泽尔唯心主义哲学体系)

(看不懂也没关系,反正我就是写来装逼的。_(:зゝ∠)_)


为了阐述用户这种“觉得他很美”的意识到底是从哪儿来的,就必须要了解app中“内容”和“形式”之间的关系。那我们不妨来看一下什么叫内容,什么叫形式:



PART 2 – 内容:



如果我自己斗胆给app设计工作中的“内容”下一个定义的话,我大概会说:内容是集成在app中,所有可被感知图片、文字、声音合集。(这里之所以说是可被感知,主要是从用户层面上看,忽略了用户不可感知的“代码”层面。)


那么我们必要搞要清楚的是,一个app的内容到底是如何产生的?也就是一个app到底是如何产生的?


那这里我不妨展开一下,假设我是一个产品设计师,有一天CEO告诉我最近想做一个电商app(这里我假设我们公司很有实力,忽略了市场和运营、渠道和资金上的问题,只考虑产品设计方面。)

那这个时候我问老板:老板你做电商类app,是想做平台类的呢还是做垂直的呢?你可想好了啊,你做平台类的想要从淘宝京东分份额的话那你必须要有自己的特色。(比如国内app“xx”、“xx”和“xx”、他们都有自己的特色)或者说你是想做垂直一些的么?(比如“xx”是专门做化妆品领域的,比如“xx”是专门做美食的,比如如“xx”和“xx”是专门打擦边球做情趣的)然后老板被我一番“驯化”之后得出的结论是我们来做一个美食电商吧,但是这个美食电商不会对标“enjoy”那样的高档人群,其实想做成类似于“什么值得吃”这样的大众场景。

好,故事讲完了,现在我化身为这个产品设计师,简短片面的阐述我的思考过程:首先我拿到的目标是“做一款什么值得吃app”,他的目标人群是更加广泛的全中国吃货,且要满足吃货推荐,评价和在线下单支付(前期无法做渠道的话需要跳转淘宝京东链接)功能。



那这个时候我开始思考这款app的MVP状态应该需要什么功能:

\

左边是氧气的原UI,右边是我做的对比图。显然,关于文字优化辅助视觉对焦这一点,氧气的设计师显然深谙此道,它们没有按照右边那种传统办法设计这个页面,而是把每一个深夜话题的题目都变成了一张图,变成一张图还不算,还在这张图上面用浅绿色“划了重点”,这样虽然加大了设计师的工作量(其实也还好就是给到话题title换个字出张图而已),但是这个页面正是因为这样的处理,能让用户第一眼聚焦到标题title上:

关于内容的视觉优化我已经说完了,说了这么多,大家看到这里也不容易,有没有混乱呢?我来总结一下吧:

app内容是集成在app中,所有可被感知图片、文字、声音合集。那么内容的视觉优化主旨在于通过图片,文字,图形(icon)等的优化,去使得app更加易读,易用和美观。


说完了内容的视觉优化,我们再看一下形式的视觉优化案例,按说只要内容都已经优化好了,表现内容的形式只要不是排得特别烂,应该展现出来都不错。我们再重复一遍形式的定义好了:app中更好去承载内容,使内容更好被感知的方式称为app的形式。

我们该如何去排列不同的内容让它们更好的被感知呢?


这里面最常见的方法就是UI组件化设计,我个人把一款app里面同样形式排列但是不同内容的单元叫做UI设计中的组件。这样的例子不胜枚举,我们每天都见到的最常见的一个组件化设计是微信里的每一个tableview:

大家可以打开你们的微信,看到其实微信的聊天列表的每一个单元都是由固定的内容组成的,内容包含一张图(头像),两段Text(名字和最新信息),一段时间组成。

再比如另两个页面:

先看左面这个页面,虽然第二个品牌故事被遮挡了很多,但是由于我们看到了第一个GUCCI的之后,用户心理预期就有了,用户左滑一下屏幕大概率出现的也是这样形式的不同内容。

再看右边这张图,一个app的每一个专题都是以一本杂志的形式呈现的,所以当你看到这个页面的时候,用户心里会有预期我左滑右滑都是一本专题书。



在设计过程中,我们往往会把相同属性的内容设计成同一形式。这样做有什么优点呢?最大的优点是减少用户认知负担,使得内容更好的被感知。

举个大家都懂的格式塔的例子:

上图A,大家都知道接下来一个一定是正方形,上图B,下一个别说你们不知道是什么,我也不知道。格式塔相似律告诉我们,人们在知觉时,对刺激要素相似的项目,只要不被接近因素干扰,会倾向于把它们联合在一起。


那么我们就很容易解释下图:

大家看到这里是不是很熟悉?联系上下文,现在应该知道为什么市面上的app都这么设计了吧?还不就是为了让用户更好接受信息。



PART 5 – 总结


一切UI设计本质上是为了更好的展现信息。

更好的展现信息是为了更好的指引用户完成交互操作,从而让用户更好的去接收信息并完成一定功能目的。


本文一直在讲述app信息呈现上的视觉优化。其实视觉优化也好、逻辑优化、交互优化也罢,都是为了使得app更加好用、易用、有效。


在我刚开始接触UI设计的时候,也是曾经沉迷dribbble,不断模仿那些大师们的惊艳界面,还长达一两年的学习和工作中,我一直认为UI设计师的本职工作就是画一个漂亮的壳子,把信息装进去然后能让app变得更好看而已。

但是后来我完全不这样想,如果现在让我评价一款app的UI,我可能真正最看重的那个维度已经不是“视觉感觉”上的好看,而是“视觉逻辑”上的严谨和“视觉风格”上的一体化。比如分割线,比如icon的样式,比如tableview的设计,比如字体的主次对比等等。



当我没有理由的画一条分割线,只为了分割两个也不知道是啥的元素时

当我没有理由的就是想要为卡片化组件加上一个boxshadow时

当我没有理由的设计一个奇怪的交互方式还硬说它特别好用时



我都在警醒自己一句话:每一个UI界面的设计都应该被赋予应有的理由。


希望以此共勉。




· 下期预告

一个人和一块触摸板到底能衍生出多少种交互方式?

每一次点击和每一次滑动的背后心理学逻辑又是怎样的?

下期我想说说人在使用app过程中是如何和屏幕进行互动的。

敬请期待。


(下一期可能也是一万字左右,所以中途我可能会穿插三期的《交互闲谈》,谢谢关注。


本文来自PS教程网www.46PS.com,转载请注明!关键词:GUIGUI教程原创自译教程


PS教程