界面颜值哪家强?

杭州/设计爱好者/7年前/883浏览
界面颜值哪家强?

从产品界面美观、用户体验、商业逻辑等,方面进行碎碎念,希望都大家有用。

首语篇


论颜值,那当今社会妈呀,动不动就削个骨,打个玻尿酸,割个双眼皮呀等等貌似不去趟韩国都不还意思出来混社会。真是社会如此多娇引无数妹子竟掏腰“包”,怎么现在想想兴风作浪的都是女性呢,一股子冷风吹向我这个2月份刚来杭州打拼的西北汉子,虽然步步维艰但我依然熬着疲惫的身躯坚持写着点点文字但愿能给亲们一些闲余之时的消遣和围观若有些支持我就更开心了,汉子还单身哈想来撩的随时欢迎哈哈。


兴风作浪的为什么都是女性呢?据统计互联网达成消费90%以上都是女性完成的,哇呜,太可怕了很多企业的产品运营思维多是女性思维,为嘛活跃度高嘛产生交易转化率干嘛,是不是觉得败家娘们儿超多。


别介...这就是我们的用户体验和界面为什么要有超高颜值谁让她们只看脸。


那么界面设计中什么元素重要并且能大大提升界面的美感,我认为是ICON,小小的点缀气质不同会给予界面超不一样的气质界面也会因此提升一个level,不信我举几个栗子。



我通常会在使用一家APP时点进去一眼就比较关注bottom的icon,一旦icon过气或者不是最新元素的设计风格我会职业病的反应这家公司肯定不咋滴,有创新基因活力的互联网公司不会是这么纵容自己产品邋遢不堪的样子。


1)发现:用户能否发现页面上的图标;
2)识别:用户能否识别图标的意义;
3)预知:用户能否猜到图标点击会发生什么;

4)统一:图标是否协调统一;

5)吸引:图标是否美观;



发现

用户是非常懒得设计师需要用醒目的设计辨识度让其发现页面上图标。


识别

用户余光扫到这个图标时就大致明白这个图标的行业属性着是相当重要的。实际上,即使用户不知道这个图标是什么/叫什么,只要用户知道图标所代表的功能就够了。


预知

预测性测试不是简单地问用户图标代表了什么功能,而是当图标点击后,用户期望发生什么。不像理解性测试一样,在理解性测试中,需要向用户简单(但尽量少)描述一下图标所在系统/页面。


统一

界面icon统一性需要保持增强整体设计语言和整个产品的塑造。


吸引

标需要进行吸引力测试,因为最普遍目标是使用图标来增加用户的吸引力,但不能保证所有图标的吸引力都很好。在图标吸引力测试中,既要进行单图标测试,也要进行图标组测试(一个产品或页面会有多个图标,一个产品或页面的所有图标称之为图标组)。



这是咪咕爱看评选参赛APP的几个作品icon的对比下:



哪个UID体验好?

NO1:中高饱和度,线性状态偏向复古西域风。

NO2:轻量化中低饱和度圆融设计风格给人以亲切感。

NO3:简平单色块缺少设计感陈旧元素。


我钟爱NO2.为什么呢,我要说看颜值你会打死我是不?


来点专业客观的评价:

1.咪咕爱看用户群体主要年龄段为25~45岁,用户趋于年轻化。核心用户聚焦在年轻的移动用户上(比如说95后或00后),新的高阶的设计元素不可避免。

2.咪咕爱看的slogan是:咪咕爱看,敢想敢干。对标产品有芒果TV、优酷、爱奇艺、天翼视讯等。

3.NO1偏于二次元理解性差,NO3过于单调不够神气缺乏活力。


是不瞬间明白了什么?跳跃轻快简明的颜色变化有趣不失严肃。这样会更好的吸引用户留住用户。


带大家看看最热APP的界面设计语言和调性聊聊用户:(为什么这么设计)?


陌陌用户:基于百度指数通过百度海量网民行为数据为基础的数据分享,对“陌陌”这个关键词在百度以及不同时间段内的搜索数据观察,不难发现:陌陌的目标用户年龄段在20-49岁区间,而处于此年龄段的用户,正是当下互联网的消费主力军;地域则更多集中在广东、北京、浙江、江苏、四川、上海等省市;性别则显示陌陌中男性用户比例远高于女性用户。这帮年轻人大量身在互联网浪潮中的一代人对新鲜的事物和有趣的设计独有较高的敏感度和认知稍微丑陋点的东西都留不住他们。


抖音APP:抖音是今日头条衍生出来的新物种。抖音一开始就深耕中国市场,产品和运营,完全依照中国年轻人的口味来打造。对中国年轻人创意能力的自信,也得到了回报:抖音的很多玩法和挑战,都是普通用户开创的。事实证明,中国的年轻人,同样可以玩转炫酷的音短,而且创意无限,炫的飞起。仗着母公司今日头条的算法优势,抖音在内容推荐和分发上,让去中心化更彻底。就算是一个没有任何粉丝的普通人,只要拍的好,一样能收割大量关注度,成名15秒。越来越多的普通人愿意在这个地方玩,在这里表达自我。于是抖音火了,火在中国。当然在玩法上抖音也是越来越有趣,所以朋友说抖音有毒,我想我已经中毒身亡。


美拍APP:年轻女性用户居多,占比81.7%,80.1%的用户不到三十岁。

同为美图公司旗下的美图秀秀、美颜相机在美拍用户中的渗透率。

高于全国移动网民至少30%,偏好明显 。

用户地域分布:根据2017年4月1号的百度指数显示美拍用户主要分布区域为华东、华南、华北; 所在省份主要为广东、浙江、北京; 所在城市主要为北上广深。可以看出一线城市用户居多。


一直播APP:针对90/95后年轻人。

包新模式——优惠券模式;

场控功能——直播间管理员,增加主播和观众间话题和互动;

话题模式——提高观众的参与感,另一方面划分主播类型;


吐槽大会开始:

我也一直在困惑为什么在从事2年左右的朋友做的产品的设计也是那么丑,简直是让人不忍直视,到底为什么?我想大多是没有深度思考总结学习设计方式方法其实设计是有章法可寻的,也是一个更新迭代比较快的行业需要不断地学习新的流行趋势。


创业型公司前期资金不充裕可能找不到比较好的UID/UX设计师,那以产品为重点的发展路径是比较关键的,创业,一定是不完美的,一定是不容易的,所以还是老话,分清主次,把钱花关键地方。


网站网页风格展示:

01简洁范儿(无印良品)


02卡通风格(腾讯动漫)


03科技范儿(锤子科技)


很少使用重力悬浮的界面效果,赚足了眼球展现锤子科技的对产品独特性的把握和理解。


04黑白范儿

05朋克范儿


06古典风情


01几何图案与全屏背景图相结合

全屏背景图的设计,是最受欢迎的背景风格之一,利用大图将用户的视线集中是最合适不过的了。在多数情况下,利用全尺寸图像作为主页的背景,文字和导航菜单,CTA按钮或信息等会布置在图像的顶部。

如果想实现更有趣的视觉效果,我们可以在图上使用重叠几何图案的技术。设计师可以添加各种各样简单的样式和形状。

做好这项工作,就要记住目的是利用几何图案。视线集中的几何图案重叠的部分,如果能促使用户进行特定的行为就更好了。在黑色或黑暗系等沉重的背景之中加上颜色,将会起到非常棒的引导视线的作用。


02灰色的应用

加入大面积的灰色,让页面显得更加简约干净有空间感,不管网上加什么元素都会凸显出来产品的优点。

 

灰色不像白色对于空间的展示时过于刺眼灰色反而更加柔和舒服有想象空间,无论你如何选择颜色和灰色,你应该记住他们的工作是帮助用户感受颜色。例如,上面的例子,保罗·瓦伦丁,给淡粉色的组合给了一个柔和的印象,投资组合网站的Dallyn展示了一个现代的氛围。


03瀑布流应用

现在大多数的网站(信息类)都在采用瀑布流展现方式,更好的展现信息的内容从而更方便读者阅读浏览体验的感觉更舒服,例如:Pinterest作为一个图片聚类展示平台(现在已经扩展了视频内容),图片源往往是来自于用户的上传以及互联网上的收集,图片大小和长宽比例肯定不能整体统一。那么就像整理实体照片一样,把一个主题的图片工整的摆在一起,按照其比例和分辨率确定每一张图片的占地面积。这不是非常好吗?Ben Silbermann使用瀑布流为女朋友精心挑选了结婚戒指,也为互联网带来一种新的图片展示模式。这种模式火了之后,随之而来的便是有意或者盲从的大量抄袭,最后成为一种潮流。如今瀑布流已经开始流行,Google和百度等图片搜索结果也开始用瀑布流呈现。

04网页APP、H5页面图片如何选取?

这类的平台的图片应该更多的贴切平台内容元素达到更好视觉的契合程度,为什么我们发现优秀的网站APP都很有调性他们都在每一个细节处清晰的表达着品牌气质元素形成整体统一的平台风格从而更好地传递出设计者想要表达的思想。


05什么是设计原则?都有哪些?哪个更加重要呢?

简单点说就是设计时要遵守的必要准则。而很多时候设计规范内的设计必须遵守之外的产品设计完全是有设计师说了算,如果产品经理非要死皮赖脸的让你改动设计风格调性,你一定要提前把很多问题沟通清楚了别让他玩来玩去这样你的内心将会是无比痛苦的。

 

1. 清晰的设计思路

2. 高效的用户体验操作

3. 设计语言的一致性

4. 给与用户意想不到的设计细节

5. 留有产品迭代的空间


06界面设计包括哪些细节、如何深入?

·  界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。

·  像素精确,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。

·  界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影

·  图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸

·  文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等

·  别直接使用 Windows 自带宋体/黑体里的英文!!!这个不解释

·  谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉

·  适当的留白,留白是个很好的东西,尤其是当老板 / 客户 / PM 要求你做一些“大气”的设计时候能成为一个很好的说辞,但是留白同时也很难掌握度,过度的留白有时候会起到反作用,让我们的作品看起来没有细节、内容空洞。就跟那些学画画的同学在电脑上画图经常水平镜像检查画面一样,有时候我也会把做到一半的设计去色、然后反白,看看那时候画面里的黑色会不会产生一种令人恐怖的感觉(好吧,我承认我是个很感性的同学,很多设计思路和方法都不够科学)。。。(引用:JJ Ying)


聊聊我产品设计的经验:

第一阶段:三年前的我由于大学对担任学记者团团长对传媒摄影设计采写编都接触的比较早工作的同时对设计有着浓厚的兴趣但我不知道我到底能不能从事这个行业是不是这块料,其实我比较纠结,一个人对我当时影响比较大傅盛360安全卫士的产品经理,当时互联网的影响力确实是巨大的当然我们身在其中也会很感兴趣产品是怎么一步步做出来的。抱着这种的极度好奇的心态,我下定决心一定要从事这个行业做出牛瓣的产品来因为大学是学计算机的写写代码也正常但是总是感觉找不到创造一个产品的那种极高的成就感,而设计一款产品成了我做完以后就会有超级高的成就感所以选择UID设计从大三就开始了,当时也是在找了一家专业的培训机构学了半年感觉很是受用每天苦练技术看Dribbble Behance上面的大神的作品临摹学习配色、构图、排版等等甚是充实。这是一个突破很多知识点的瓶颈期。

 

第二阶段:工作了在实习阶段也是在一家传媒公司做设计但也会做一些平面的毕竟当时是职场新人么有锻炼的机会还是非常珍惜的。你会发现这个阶段的提升是非常之快的但东西确实是惨不忍睹至少现在看之前的作品实在是不忍直视,但这样说明你的审美设计思维都不在提升,就连前段时间工作我在看我上个月的作品和项目时都会觉得很丑还有很多要提升的地方。这种感觉是对的。

 

第三阶段:正式开始做大的项目的时候你会在思考全局和用户体验的流程思路上会有更高的提升,当时我接了一个800万的项目网站的所有的页面交互都是我一个做这时候的压力真的是会让你辗转反侧,就连睡觉都会思考每一处的细节会怎么设计提升大量用户人群的理解和喜爱,哪一个设计版块是不应该有的,在没有数据支撑下的用户体验我们正站在了用户的角度思考问题时不一定是对的。这时候客观的理解和做相应的用户调查是必要的,这样会大大提高我们自身的设计水平,这就需要不断地学习新的理念和思维。

 

第四阶段:成熟期会在设计上做减法,会时时刻刻思考产品站在公司实现商业化和满足用户体验中权衡利弊这就需要大量的实践案例来说服自己做选择判断。当然你要想在众多设计产品中显得与众不同就要再设计的方式方法上建立自己个人设计名片让自己设计具有独特性和一种不一样的风格和感觉。

 

在作品视觉维度,产品树立独特的风格,让别人更容易记住你。

 

记得当时有个设计师,不满当时Facebook的设计界面直接设计一套在网站因此获得了该公司的offer,努力孩子上天是会看到的相信我。



如何在细节上打动用户?

当我们在评价一个产品设计的好坏时或者在行外人时没办法从专业的角度评价,他们普遍的 话语是:“这个感觉怎么怎么样”?没有专业的语评,所以在细节的专业性直接决定他们眼里的好与坏。


比如说怎么达到统一性?

  1. 外轮廓线条像素一致性;

  2. 色块布局的均匀程度;

  3. 每个icon长宽高比例是否在规定的大小盒子内;

  4. 转角的圆融比例;

  5. icon色调、渐变、风格baochi一致


比如说设计如何语言呼应?

  1. 字体颜色同色系

  2. 相同颜色是相对应的防止失重的版块



3.百度重新设计构建的黄金比例:


矫情下:

熬了很久才写的差不多,当然还有很多是需要我在慢慢的打磨的包括语言组织和思考的深度等等。谢谢大家阅读我会一直努力学习每天晚上坚持写自己对产品的理解和思考,对设计的感悟和总结不足之处希望大家多多支持大康小茧,希望我们都会一直努力,谢谢。



41
Report
|
23
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in