首页

公司业务全景可视化展示赏析

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏


转自:站酷

作者:Eric孙


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服

有用性,可用性,实用性:为什么对设计师如此重要

涛涛

今天,我们来谈谈有关使用的三个概念的含义:有用性,可用性和实用性。前两个术语,:有用性,可用性,在用户体验和设计方面被广泛使用,而第三个术语,实用性,很少被提及。然而,我们将会提到,在三个术语中,实用性可能是对设计师和企业来说最重要的一个。

Author/Copyright holder: MsSaraKelly.


有用性


一个有用的产品能让用户完成一个任务或目标。这些任务或目标只有在一些情景中才是明确且意义重大的,其他情境中则不行。


例如,用户使用文字处理程序包,如微软的Word或者LibreOffice中的Writer能够制作文字文件,包括信件、报告、整本书等等,但任务是明确的,结果是看得到的。我能用这个工具写信吗? 是的,你可以。对于任何想使用文字处理程序包的人来说都可以。


另一方面,一件艺术品可能对某个人是“有用的”,可以照亮他们的工作室,但可能对另一个人就没用了。艺术具有主观性,这意味着不同的人对“点亮工作室”这个任务有着不同的要求,可能需要极为不同的产品来达到这个“有用的”标准。


然而,无论提到哪种有用的形式,重要的是有许多潜在用户认为产品有用。(从商业角度来看,至少要有足够的用户才能让产品盈利)。


任何用户都不可能接受没用的东西。

Author/Copyright holder: Alastair Cook.


可用性


可用性针对的是某个特定产品。可用性说明产品不仅具有有用性,它还要仔细考虑产品的使用方式,以及确保用户愉快、简单(或尽可能简单)且有效地使用产品。


大卫·麦奎琳曾在《达尔文》杂志中发表文章《可用性》,里面提到;“可用性与人类行为有关。它承认人类是懒惰,情绪化的,不愿投入大量的精力做事,比如,获得一张信用卡,他们通常更喜欢做容易的事,逃避难做的事情。”


许多“有用的”产品并不具有可用性。想象一下,有一扇门,外面有个把手,上面写着“只能推”。门肯定是一种有用的产品——它把里外分开,可以确保人们有效地使用空调和暖气,还能降噪,等等……


但是一个需要指示的门可用性有多大呢? 其实,一扇门也就只能推或者拉。从用户的角度来看,当他们看到门时,他们应该清楚地知道需要采取什么行动——如果不能而且需要一个标志来解释; 那么这个门的可用性太小。


值得注意的是,对于一个产品来说,即使可用性小也没关系,但要不具备有用性才是真的糟糕。你看当今世界上有很多带有“推”或“拉”标志的门,这就说明了这一点。可用性较低通常只是一个小麻烦(你可能会抱怨那扇门有多不灵活,但你可能不会去修——因为付出太多回报甚微),而不会影响全局。


然而,许多品牌(如苹果)已经建立了整个产品线,设备比他们的竞争对手更具可用性,即使用途实际上是一样的。例如,iPod并不是世界上第一个MP3播放器。然而,从用户的角度来看,这是当时最好用的MP3播放器。正是良好的可用性让iPod从一众MP3里脱颖而出,成为世界上最畅销、最受欢迎的播放器。

Author/Copyright holder: Aido2002.


实用性


一个产品既具备有用性又具备可用性,但仍然不能被使用。设计的最终目标不是让产品具备这两种性能,而是让用户能用上这个设计。如果没有用户使用,这个产品就是失败的,不管它的设计有多好——它仍然是个败笔。


在个人交通领域有两个有名的案例。第一个例子可能对于大多数读者来说非常陌生遥远—辛克莱C5。克莱夫•辛克莱爵士(Sir Clive Sinclair)是计算机行业的一位领军人物,他普及了计算机并使千家万户都用上了这款产品。他旗下的ZX Sinclair系列电脑卖出了数百万台,全世界的家庭里都传出磁带游戏的嗡嗡声,十分快乐。


成功后,克莱夫爵士决定公布他的酷爱的一个项目—单人电池供电的环保汽车。(尽管它在营销文献中被称为“辅助踏板自行车”)。克莱夫在C5产品的投放市场时投入了数百万英镑。这款产品既具备有用性,也具备可用性,但遗憾的是,人们讨厌它。没有人使用C5,英国电视和媒体经常嗤之以鼻。该产品最初的产量为14000台,结果直到公司破产前,只售出了5000台。


第二件事就比较新。“赛格威”是一种个人交通工具,可以让用户用两个轮子去(几乎)任何地方,它于2001年推出,2002年投放市场。它的发明者迪安·卡门(Dean Kamen)预测在世界各地销售上百万台。事实上,在投放市场后的6年里,它的销量还不到3万部。该公司已经出售和转售多次,自从它推出,虽然赛格威满足了少数人的需求,取得了些成功。但事实却是,人们不使用这种工具。


为什么这两个具备有用性和可用性的产品没有得到使用?在Sinclair C5的案例中,产品未能满足特定的需求。正如BBC最近提到的,如今公众的环保意识十分强烈,Sinclair C5产品可能非常受欢迎,但在C5发布的时候,环保问题还没有这么迫切。

Author/Copyright holder: Aido2002.


以赛格威为例,《连线》杂志说:“但这根本没用: 赛格威在技术方面无人能及。可惜这毫无意义。“该公司未能确保产品在发布时通过过相关法律规定(在许多地方在公共场合使用它们不是合法的,现在仍然是不合法的)。”早期的使用者也报告说,他们因为使用赛格威电动车而遭到嘲笑,形象受到诋毁那么销量肯定无望。


一个成功的产品肯定要得以应用。就算生产了一个具备有用性和实用性的产品,但用户仍可能不想使用它。


如果要使用一个产品,它必须是有用的。但如果没有得到使用,它就没有意义,这意味着它永远不会成功。一个产品也应该具备可用性,以增加使用的机会——一个产品的可用性越大,用户用起来就越舒心,也会更容易说服别人使用它。然而,就算具备可用性和有用性,也不能保证一个设计得以使用。除了可用性和有用性之外,还有其他的考虑因素会影响产品的市场普及度。

文章来源:站酷   作者:马克笔设计留学

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

产品出海如何做好设计?

涛涛

国内互联网近几年发展迅速,在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈,很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示,2020 年 Q1 全球移动互联网应用下载量达 336 亿次,同比增长了 20.3%。

产品出海如何做好设计?来看这篇近6000字的总结

产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品,只完成不同语种的翻译是远远不够的。在产品设计的过程中,我们需要考虑两个方面:国际化与本土化。

国际化+本地化的策略,也就是“glocal—global+local”,指的是结合国际统一和地区差异。这种策略在统一的前提下,通过灵活配置保障地区的个性化体验,既能满足统一维护提升产品效率,也能保障当地用户的特殊诉求,是一种性价比很高的设计方案

产品出海如何做好设计?来看这篇近6000字的总结

产品设计的国际化

产品的国际化,即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。

产品出海如何做好设计?来看这篇近6000字的总结

△ Chrome 的不同地区首页功能与样式基本一致

一套通用的设计系统和设计规范,既可以帮助我们在产品的国际化设计中 树立产品调性,又可以保证操作的一致性,同时提升设计的高效性。阿里旗下面向东南亚市场的购物平台 Lazada 在开发之初,通过使用 Fusion Design 的设计系统,大大节省了设计的时间。在如此复杂的电商业务场景之下,整套产品的设计最终仅 3 靠个设计师就完成了。

产品出海如何做好设计?来看这篇近6000字的总结

△ 设计系统对产品研发成本的影响

除此之外,一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象,增强品牌的识别度与知名度。

产品设计的本土化

想要让产品在某一个市场上站稳脚跟,对于本土化的思考是必不可少的。本土化的核心是 因地制宜,根据地区差异相应调整产品策略。

产品出海如何做好设计?来看这篇近6000字的总结

△ UC 浏览器在不同地区的首页布局

为什么说本土化对于产品的出海非常重要?其原因并不难理解。Charles Eames 说过,“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。

针对海外设计研究的思维框架

在考虑产品的本土化时,我们需要关注到用户的需求是什么、是否仍然成立,用户的行为模式是什么样的,以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践,总结出了一套“环境-人-需求“的研究框架,列出了可以去调研的多个方面。

产品出海如何做好设计?来看这篇近6000字的总结

△ 蚂蚁金服-“环境-人-需求”出海产品设计研究框架(做了小部分修改)

1. 需求(价值)

首先,我们要做的第一步判断就是原来的用户需求是否成立。产品在原市场想要解决的问题,是否在新的市场仍然存在,即我们的产品是否 有用?这个问题的答案决定了原先的产品是否对于该市场的用户是有价值的。如果有价值,那么就可以深入探索如何让用户用起来;如果没有价值,那么就需要进一步判断是否要继续开拓这个市场,以及如果继续开拓这个市场,在原有的产品形态上,我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的新价值?

达到了“有用”的标准,我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件,产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中,我们可以关注以下几个层面的影响因素:

生活形态、价值观

生活环境与社会环境会塑造当地用户的生活形态与习惯。

下图分别是日本和北美地区的新闻资讯类 App。同样是推送新闻资讯,两者在表现形式上却大相径庭。可以看出日本的新闻 App 布局紧凑、信息量大、页面坪效很高;而北美的新闻 App 则更注重突出重点内容,信息密度相对来说并不高。

产品出海如何做好设计?来看这篇近6000字的总结

△ 日本-新闻资讯类 App

产品出海如何做好设计?来看这篇近6000字的总结

△ 北美-新闻资讯类 App

这种差异的背后,其实是两地上班族生活形态的差异。日本城市小、人口密度大,上班族通勤大多会选择地铁。而北美地区面积大,大部分人会驾车上班。驾车的人双手需要长时间控制方向盘,同时开车也需要持续注意路况,只能在间隙中查看新闻内容;而乘坐地铁的人双手更加自由,也有较长的通勤时间需要消磨,故可以接受更多的信息,也能够接受更繁琐的操作。

产品出海如何做好设计?来看这篇近6000字的总结

△ 北美(左)和日本(右)各自的生活形态

有时候,某个地区的用户长期习惯的操作模式,会与主流的操作模式有所差异。设计师 junu 在个人博客中讲述了他为 Melon(一个韩国主流音乐播放器)进行体验优化的一段经历。他发现 Melon 当时的播放操作逻辑比较冗长,用户需要先点选列表中的多首乐曲,再点击底下的播放键,此时 Melon 会将用户所选歌曲自动生成一个列表并进行播放。这和当时 Spotify 等音乐播放器“点击即播放”的主流交互逻辑相比,要更复杂和麻烦,尤其是在用户只是想要立即听到某一首歌曲的时候。因此,junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后,却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈,最终,他们采取了一个折中的方案,既保留了原先的复选框作为多选操作的区域,让用户仍然能够选择乐曲生成列表并且播放;同时又引入了点击单曲直接播放的操作。相比第一版优化方案,用户的接受程度有了明显提升。

产品出海如何做好设计?来看这篇近6000字的总结

△ Melon 播放器的点选操作逻辑

设备环境

10 年前,高端大屏幕手机在东南亚和非洲市场普及率并不高,因此产品出海时需要考虑当地常见的设备是什么,并作出相应的适配。近几年,随着市场经济的发展以及中国手机的成功出海,即使是东南亚和非州的发展中国家,高端移动设备的普及率也已经很高,这为设计师在考虑通用性的过程中减轻了不少负担。不过,在为每个地区的用户做产品设计时,仍然需要调研清楚当地设备的使用情况,比如什么样设备更流行、普及率更高;如果某一地区的设备不够发达,那么设计的操作也需要考虑到设备不同所造成的差异。

业态/监管

在不同的国家或者地区,各个行业的标准与制度也可能存在很大区别。例如财会软件行业中,在北美和英国占据了重要市场份额的 Quickbooks、Xero 等公司,却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下,欧洲本土的企业显然会对当地的政策和制度更加熟悉,也更容易设计出符合当地企业与会计需求的财会产品。

2015 年,Airbnb 进入中国市场。在最初的市场调研和用户调研之后,针对本土化,他们所迈出的第一步就是根据中国的业态环境对产品的前 10%和后 10%做了改造。其中,产品的前 10%指的是登录这一类用户开始使用产品所需要进行的步骤,而后 10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时,其功能流程基本相通(搜索地点、挑选房间、浏览信息等),不需要做过多的改变;但产品的前 10%和后 10%则决定了用户能不能把产品用起来并不遇到障碍。因此,针对登录的部分,爱彼迎将原先的 Facebook 等第三方登录替换成了微信与微博账号的登录;而在支付的部分,爱彼迎引入了支付宝与微信支付的方式,打破了中国本土用户进入产品和完成订单的壁垒。

产品出海如何做好设计?来看这篇近6000字的总结

△ Airbnb 产品中国本土化的“前 10%与后 10%”策略

社会经济

社会经济环境的不同代表着社会阶层状况的不同,它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现,当地拥有银行账户的人口仅占了总人口的 34%,同期中国拥有银行账户的人口则占了总人口的 85%。而这 34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾,大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘,继而影响了产品各个层面的设计。

文化/宗教

在各个文化/宗教里存在着不同的意象,也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为,在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外,在不同的文化/宗教语境下,人们会有不同的行为模式与价值取向,这里我们会引入一个模型——霍夫斯泰德文化维度模式,来对这一问题进行更详细的解读。

霍夫斯泰德文化维度模式

霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解,从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度:

权力距离指数(power distance index,缩写为 PDI):指在家庭、公司、社区等组织机构中地位较低的成员对于权力分配不平等的接受程度。权力距离指数高的文化,组织更中心化、有特定的等级秩序、更容易听从领袖的决策;而权力距离指数低的文化,组织更扁平化、主张人人平等、更倾向于自己做判断而不易受控制。

个人主义(individualism,缩写为 IDV):与集体主义相对,指个人融入集体的程度。个人主义越高的文化,自我意识更强烈,更看重依靠个人努力获取利益和价值,追求隐私保证和自由;而个人主义程度越低的文化,会期望得到“团体”的照顾,更忠诚地依赖于群体和熟悉的社交关系,更倾向跟随主流价值观做决定。

不确定性规避指数(uncertainty avoidance index,缩写为 UAI):指社会能在多大程度上容忍不确定性。不确定性规避指数越高,人们会更遵循规则,恐惧变化、喜欢熟悉,并且习惯通过已知经验推演事物逻辑。而不确定性规避指数越低,人们会更有更强的安全感,对变化的包容性更强,有着更轻松的生活态度,鼓励冒险,对风险的承受度更高。

男性化(masculinity,缩写为 MAS):与女性化(femininity)相对,指人们(不论男女)更富有竞争精神,自信与野心,注重财富和社会资源的积累,而女性化社会责注重人们之间的关系和生活的品质。故男性化程度高的社会,人们会更加自信、进取、好胜,追求英雄主义,关注物质成功及权利地位;而男性化程度低的社会,人们会更加注重合作与谦和,信奉中庸共识主义,更享受生活、关爱他人。(注:男女平等)

长期导向(long-term orientation,缩写为 LTO):最初名为“儒家动力”(Confucian dynamism),指社会对未来的重视程度。长期导向的社会,注重坚持不懈和节俭,愿意计划未来生活,也会设定长期目标;而短期导向的社会,会认为活在当下更重要。

放任与约束(indulgence vs. restraint,缩写为 IVR):指社会成员在多大程度上意图控制自身的欲望。放纵指数越高的社会,人们会更加乐观、积极、冲动,认同随心所欲的观点,更倾向自我欲望的满足和表达;而克制指数越高的社会,则会在心态上更加严肃、严谨、审慎,会有更严格的社会规范制度,而认为休闲娱乐不重要。

使用他们官方网站( https://www.hofstede-insights.com/ )上的 Culture Comparison Tool,可以查询到各个国家的文化维度指数,也可以选择不同的国家进行对比。

产品出海如何做好设计?来看这篇近6000字的总结

△ 日本与荷兰的文化维度指数对比 – hofstede

在为特定地区的用户设计产品时,我们可以从这些维度去解读他们的行为倾向,并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时,根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。

产品出海如何做好设计?来看这篇近6000字的总结

△ 墨西哥地区的文化特征指数

产品出海如何做好设计?来看这篇近6000字的总结

△ 滴滴墨西哥的本土化设计策略

这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上,“按照销量排序”是一个被高频使用的功能,消费者们认为什么产品买的人多,什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上,我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择,他们不认为他人推荐的就一定是好的。

产品出海如何做好设计?来看这篇近6000字的总结

△ 国内外电商平台对比

在企业即时通讯工具行业,国内的主流产品,如企业微信、钉钉等,都选择了蓝色这一比较沉稳的颜色作为主色调,在产品功能的形态上也偏向于严肃。而海外的办公产品 Slack,视觉色彩更加丰富;整体的产品定位也更加活泼欢乐,常常会有“不严肃”的表达,比如在界面多处都使用了 emoji。这样的产品形态差异,其背后是两种文化在放纵(享乐)/克制(严肃)这一维度上的差异。

产品出海如何做好设计?来看这篇近6000字的总结

△ 企业微信与 slack 的产品风格对比

内容本土化

除了功能框架上的设计需要考虑本土化外,产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《Designing for Belonging: Why Image Localization Matters》一文中,记录了他们对于内容本地化的一些经验和思考。同样,内容的翻译仅仅是本土化的第一步。在地区之间区别不大时,完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单( Songs to sing in the shower)”的播放列表,列表上的文案一经翻译,就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时,仅仅翻译是不够的。在看到这张图片的时候,其他人种比如亚洲人可能就不会产生很强的代入感,也会缺少对产品的一种归属感(这个产品并不是为”我“设计的)。

产品出海如何做好设计?来看这篇近6000字的总结

△ Spotify “Songs to sing in the shower” 歌单

下图展示的是 Spotify 另一个歌单—— “快乐时光( Happy Hits)” 的封面在不同地区的呈现形式。可以看到,面对文化差异更大的群体时,Spotify在保持了统一的样式风格的基础上,针对每一个地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户,也能够让用户产生更强的连结感与共感。

产品出海如何做好设计?来看这篇近6000字的总结

△ Spotify “Happy Hits” 歌单

结语

回到那句话 —— “Recognizing the need is the primary condition for design.”产品的出海其实只是我们在设计中会遇到的一种场景,在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步,那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计,我们始终应该保持对用户的好奇,让最终的设计实现我们期望达成的目标。

文章来源:优设   作者:酷家乐UED

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

2020—2021 UI色彩趋势总结

鹤鹤

本文对2020-2021的色彩趋势做了浅显的总结与运用分析,希望能对大家有所帮助,欢迎一起交流与探讨!全文阅读大概需要12分钟。

文章来源:UI中国   作者:贰元

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

2021的10大UI/UX设计趋势解析

鹤鹤


2021趋势已悄悄来袭,还不赶快来看这些落地实例...

前言

在这艰难又魔幻的2020年的尾声,有必要系统汇总下关于UI/UX的设计发展方向,为接下来的2021的开篇带个好头。本文在了解这些趋势的同时,分析特点并举例落地实例,来帮助大家启发创意设计工作的思考切入点。

流行趋势跟人们所处的环境密切相关,从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物,扁平设计霸屏的这几年,设计风又向更立体、丰富、更有层次感的方向发展,所以说趋势就是一个轮回。设计风格没有绝对的好坏,在审美达到一定疲劳时,就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考,本质都是为了提升更好的交互体验。 

而在进入下一个十年的过程中,我们对数字产品和体验的依赖将日益增长,预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计,5G技术的发展,它将重塑了我们以前无法想象的交互方式,这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。

(注:图片来自网络,均标明出处及作者,若有侵权请告知删除)





1、3D与UI结合

随着高效且易用的3d软件工具的出现,3D 元素已经开始变得越来越受欢迎,而在这之前,UI界面一直被平面设计所主导。与 2D 不同,它提供了更为逼真的立体效果,从插画、动效、电商到平面视觉,在所有的设计类型中都能找到它,3D现实主义已是各个领域的大势。

圈中也出现了很多免费或付费的3D预设元素及场景组件,帮助3D小白更快地搭建出具有冲击力的视觉组合。


特点:

• 直观感受;

• 立体真实;

• 形态丰富;

▲Izmahsa


▲Mike


▲Tran Mau Tri Tam ✪


▲Vikiiing


https://www.awwwards.com/inspiration/3d-hover-number-reveal



实例应用:

各大厂都开始纷纷尝试在产品中加入3D元素,将自家IP立体化,植入到各个品牌静态页面,加深品牌印象渗入。3D技术虽然已经出现有一段时间了,但是为了保证速度和性能表现,较少应用到产品中,随着软件技术的提升,立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。

▲闲鱼、QQ、花椒直播的3D启动页


▲得物(毒)的3D空间动效


▲乐无登录页


网易云音乐每年的音乐总结报告都追随着最新的设计潮流,今年还可以自由选择人物形象,增强了用户的主观代入感,以下是每年的设计风格变化:

▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景


▲2020-总结陈词H5


▲总结报告Banner的动效


其中IP立体化最多的当属K12教育领域,除了制作IP周边外,3D效果能适应丰富的运营场景,高度还原现实世界,给小朋友带来最真实的学习互动体验。

▲洪恩识字(3D学习场景)、腾讯开心鼠英语ABCmouse


▲IP在播放儿歌时的互动


值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化,图标还加入了3D维度的拟物视觉层次。

苹果的 mac OS 的人机交互指南中也明确指出:“图标不仅是装饰性的,而且在与用户交流中起着至关重要的作用,它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合,将又要引领一波设计趋势。





2、软渐变(Soft gradients)

过于强烈的渐变不再是趋势,大多数设计师都开始喜欢使用非常简单和微妙的渐变,如果产品的目标用户人群需要轻松温和的视觉环境,那么此风格再适合不过。

软渐变包括背景、阴影、反光,常与线条平面图形结合,应用于界面、网站、图标、icon等设计中。


特点:

• 低调温和

• 微妙渐变

• 清新愉悦

 


2.1、柔和背景

在设计网站中我们已经看到了许多非常精致,明亮柔和配色方案,混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦,其中画面内容是主要视觉焦点。

▲Vladimir Gruev


▲Sajon


▲Anton Mikhaltsov


▲Ghani Pradita


实例应用:

▲咔咔、美柚


https://takearecess.com/



2.2、柔和阴影

柔和的彩色阴影使UI有了更微妙的深度变化,在图标设计中经常需要渐变或阴影来塑造物体,柔阴影使设计元素更丰富立体,并且它们有助于区分内容之间的层次结构。

▲Ghani Pradita


▲Sèrgi Mi


▲Taro Huang


实例应用:

▲有道数学(已下架)


▲Uki




3、玻璃拟态(Glassmorphism)

去年新拟态掀起了一阵狂热,但这种模拟受到挤压的塑料效果(凹/凸层次感),在用户的阅读性上可能会出现问题,新拟态更适合用在局部的少量元素点缀,无法完整地使用在整套应用程序中。

▲Alexander Plyut


伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布,新的拟物风格正式回归大众视野,整体风格应用了新拟态(Neumorphism)的设计思路,利用大量的毛玻璃质感和大量投影纵深感,能很好的突出前景信息,中和了扁平化图文带来的生硬不立体感。而Big Sur最新的图标也加入了 3D 质感设计,设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因,主要是希望「降低视觉的复杂度,让用户能够将注意力集中在内容上」。

而最新的玻璃拟态则更加注重垂直空间 z 轴的使用,背景多鲜艳色彩,在上空使用隔一层高斯模糊的毛玻璃质感,模糊的边界有细微的浅色边框,整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用,用户可以看到物体间的层次关系,哪一层在哪一层之上,就像物理空间中真实的玻璃一样。


特点:

• 透气磨砂

• 层级空间

• 简洁拟物

▲引领新拟态风格的Alexander的最新作品也朝着玻璃拟态变化


▲Kostia Varhatiuk


▲Ghani Pradita


▲Ibrahim emran


▲Queble


实例运用:▲毛玻璃视觉可追溯到2007年发售的Windows Vista,而当时的 OS X Yosemite 也大量使用了这种设计语言

▲最新的MacOS Big Sur操作系统


▲图标的变化




4、暗黑模式

暗黑模式是白色界面的相反版本,适用于午夜时分。之前用了很长时间微信的暗黑模式,突然切换成白色界面后,就像吸血鬼见到太阳光般刺眼,果然暗黑模式用久了还是比较舒服的。

 暗黑模式和之前经常提到的夜间模式是有区别的,简单来说暗黑模式可以在任何场景下使用,并没有降低对比亮度;夜间模式则专为夜间场景设计,重在降低对比度,以降低在暗光环境下屏幕对人眼的刺激。

 

特点:

• 突出内容

• 减轻干扰

• 沉浸体验

▲Tom Koszyk


▲Victa Wille


▲Golo


https://www.awwwards.com/inspiration/3d-hover-number-reveal


▲Tran Mau Tri Tam ✪


实例应用:

▲有道词典


▲爱范儿(ifanr)


最常使用暗黑模式的车载系统:

▲小度车载


暗黑模式的灵感最早引起大家注意的应该是抖音,在这之前大部分的应用都是白色为主,抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的,在这之后也相继出现了以黑色为主的APP设计:

▲MOO音乐(可手动切换颜色模式)


▲Space FM





5、多彩高对比度界面

受Material Design调色板的影响,2020年用户界面趋势的一定不能少了亮色和荧光色的,可以作为主色也可以作为辅色,简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格,我个人就非常喜欢荧光色,现在要是谈到该风格的受众主力军可是90后啊。

颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一,对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力,这种风格已经成为清新、酷炫、数字时代的代名词,而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。

 

特点:

• 活泼大胆

• 对比鲜明

• 潮流科技

▲Amy Martino


▲Halo Mobile


▲Anastasia


▲Paolo Spazzini


在网站设计中的应用:

https://www.theartcenter.nyc/


https://www.squadeasy.com/en/


https://takeboost.com/


实例应用:

▲GoFun出行


▲开言英语





6、抽象几何元素

从上世纪初开始,抽象构成中的简单几何形状就已经用于视觉艺术中,多用于主背景主题或色彩细节,使用钢笔工具编辑最简单的形状(正方形,圆形、椭圆形),加上不同的颜色或渐变,让设计看起来既规则又有趣。

几何图形可以运用到UI设计中 ,将它们混合在一起以创建马赛克的效果,形成具有品牌意向符号的记忆点。


特点:

• 规则组合

• 品牌印象

• 重复记忆

▲Johnny Nova


▲Vladimir Gruev


实例应用:

最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格,那就是SHINee的正规六辑合辑《‘The Story of Light’》,采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化,带来极具视觉冲击的音乐色彩与魅力。

▲专辑的主视觉


当然,几何形状不止用于色彩图案细节,在UI界面布局中经常使用大块面图形,这种设计方法受到越来越多的关注。





7、极简风

极简设计的前身是2010年代中期精巧又花哨的设计,这种设计已经存在很长一段时间了,但在2020年,人们每天需要消化的信息量越来越多,所以现在用户想要尽可能避免“视觉垃圾”,这也是为什么我们会选择更简洁专一的界面。


特点

• 专注信息

• 清晰易用

• 简单操作

▲RonDesignLab


▲Quan


▲BAOLIN


▲Gregory Loshakov


https://snp.agency/en


谈到极简主义,就不可避免会涉及到无键趋势,因为按键越少就意味着设计越简洁,而这种简化过的设计将让手势操作和语音交互更为流行。

▲Taras Migulko


▲Gleb Kuznetsov✈


实例应用:


▲夸克浏览器的夸克宝宝





8、将视频应用到UI中

在 2020 年,信息的触达的速度将会变得更快,而视频是很好的载体,各个年龄段的用户都喜欢观看引人入胜的动画,无论是选择通过短视频还是电影的方式来推广产品,都很好地灌输品牌理念,建立与受众群体的关系,加强用户忠诚信任感。


特点:

• 营造氛围

• 类型多样

• 品牌调性

▲Fireart Studio


▲Ehsan Rahimi


实例应用:

▲moo音乐登录页

▲虾米音乐欢迎页




9、插画与3D的界线越来越模糊

艺术插图从2017年开始到现在仍然很流行,几乎适用于任何类型的设计行业,是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事,为了把故事讲好,我们可以创造出一个品牌人物,赋予他人格,为他制造一些故事和冲突,最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础,至于讲故事的方式,在 UI 和 UX 中都有使用,原理一样只是落地方式不同。 

在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合,艺术家保留了人物在美式漫画中的的线条笔触,把“手绘”的细节和质感都放大到了荧幕上,在剧中还采用对比强烈的大色块扩大了视觉张力,分分钟把漫画书甩到面前,让人忍不住惊呼,索尼的艺术家们是怎么把片子做得这么酷!

▲3D人物的画笔触感


▲画面光源处由波普圆点组成的背景


▲纸本漫画书中的“声音词”


▲漫画经典线条


▲Entei Ryu在3D建模使用插画质感


▲Minh Pham ✪在ui界面中的尝试


实例应用:

腾讯旗下音乐平台JOOX最近的概念宣传片,从MG、三维、定格、插画多个风格之间来回切换,给我们带来了一个多元的音乐世界。各大视频网站还搜不到,不能直接链接视频地址,喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。


在3D开始迅速发展的阶段,二维与三维之间的界限变得越来越模糊,插画作品也可以具备强互动性,而3D插画与动效的结合提供了一种奇妙的新方法,希望能够看到未来插画更多的可能性。




10、更多的微交互动效

最后一点,还是要强调动效在UI中的的作用,微交互最早出现在 2018 年,让用户更好地理解系统如何工作,并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀,从点击反馈、加载等待、导航交互等等,为用户界面设计增加了动态性,交互性和直观性。

 

动效起到的作用:

• 引起人们对应该做什么或接下来将要发生的事情的关注;

• 创造流畅和视觉愉悦的过渡;

• 带给使用者美观的享受;

• 指导我们进行复杂的操作;

• 确认用户使用旅程中的操作。

▲Jakub Antalik


▲Forever D.


▲Kingyo


▲Eugene Paryhin


▲Leo Natsume


▲Taras Migulko

实例应用:

▲GoFun选择车辆后的页面转场动效




结尾:

2020的趋势在满足用户的美学要求上,侧重内容和感情表达,还会根据不同设备载体、新的技术而变化,为用户提供最大程度的丰富体验。

借用Adobe设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求,打造真正人性化、多元化与包容性的设计。

设计趋势还在快速增长变化,有些趋势总能长期霸屏,未来还将迎来更多新技术,每个设计人员都可以找到自己喜欢的方向,不管哪种趋势最受欢迎,最重要的是如何学习并合理地运用到产品中,以产生最大的设计商业价值。

文章来源:UI中国  作者:_阿丹a_

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


云店通SaaS系统(B端)

前端达人

这个项目在2019年立项,在2020年完成,项目进行中又几番变动,万幸最终还是完成了!
非常感谢团队中的小伙伴给予的帮助,能够与你们一起共事非常幸运!

------------------------------------------------------------------
*本次输出非100%与最终上线稿件相同,有部分设计因开发成本与项目预算原因未能实现!
*部分商品图片来源于网络,仅作为展示与交流使用!
------------------------------------------------------------------

收藏
收藏
收藏
收藏
收藏
收藏


转自:站酷

作者:火龙果_pitaya


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服

手机appUI界面设计赏析

前端达人

移动互联网的迅速崛起,让移动网页,移动客户端越来越重要,客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化,但却始终 很有限,因此,在APP的界面设计中,精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量,而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑,用户看着顺眼了,才会真正的喜欢。

接下来为大家分享精美的app UI设计案例:

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计,用户研究、交互设计等服务。

jhk-1615795023016.pngjhk-1615795030849.pngjhk-1615795030849.pngjhk-1615795058578.pngjhk-1615795128660.jpgjhk-1615795162438.png

--手机appUI设计--

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服

B端设计规范如何落地?

涛涛

“B端设计规范怎么落实下去是困扰很多设计师的一个问题,我总结一套从制作到落地的全部流程“。

在B端设计中,设计规范怎么建立才能落实下去之前一直困扰着包括我在内的广大设计师老铁们。设计师期望参与产品的每一个角色(产品,设计,前端开发,测试)都能遵循设计规范,结合设计规范内的内容,保证前端开发页面的还原度。因此从目标来说,其实设计师小伙伴与研发小伙伴的目标是一致的,但是实现起来其实并没有想象中的简单。在业务初始阶段对业务不熟悉,盲目就着手建立规范其实并不是一个明智的选择,很多B端的萌新小朋友会在业务尚未明确情况下就从第一个版本就开始制定设计规范,这会蕴含巨大的风险在里面,也不易推动落地。在初期有限的研发资源里只有了解了业务的实际场景,针对场景进行深度思考与分析,与规范涉及人员进行深度沟通统筹各方面资源,才能最后形成一套可以落地执行满足设计标准和业务需求的设计规范。


目录


01.B端设计为什么要制定设计规范?

02.什么阶段适合建立设计规范?

03.推动规范需要像需求一样去迭代!

04.B端的设计规范需要整理那些东西

05.搭建组件库你需要知道的几件事!

06.如何输出规范?

07.整理设计规范对个人的影响!






对产品来说

搭建原型可直接调用组件库,能搭建出高保真的原型。与设计师沟通更加顺畅,小的修改可以直接和开发沟通不需要通过设计师出图,极大增加了前期的节奏。



对设计师来说

当同一个项目由多个设计师共同协作时,由于设计理解不一致等各种原因都会出现设计控件使用混乱等问题,此时为了保证设计各方面统一性需要一份设计规范做引导。



对开发来说

按照设计规范建立好公共组件库,开发效率提升有了明显的提升,可复用的东西确定了下来不会频繁改动,设计走查的问题也会逐渐减少。



对测试来说

模凌两可的交互可以有地方看交互样式了,不需要再询问设计师。有更多的时间专注于测试功能上的问题了。






过往,设计师一般默认在启动一个项目的初始阶段进行设计规范的制作,具体时间点跟着版本节奏走。在1.0版本之前就着手规范的制作,其实这是很欠缺考虑的做法,其中蕴含着极多的风险因素在里面。此处分享个人工作中两个比较建议的规范建立时间点供大家参考。


2.1 业务处于探索期

在初始版本开发并未制定相应的业务组件。规范主要涉及到色彩,字体,间距,布局,栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点,由于尚未搭建特殊的业务组件(当领导想要突然调转方向也不会很慌,改动较小就可以完成整体的规范转向)此时搭建规范组件库需要考虑到预留后续更改的空间。 


优点:灵活,满足业务随时更换的需求

缺点:体量小,仅能支持初步业务场景



2.2业务处于成长期

当业务已经迭代几个版本后,整个团队对业务的理解都不可同日而语。产品也正到了较为稳定的版本,此时若提出搭建组件库可以结合业务设计出符业务场景的样式,每个符合当前业务的组件逻辑和样式都不是初始阶段凭空想象出来的,当产品有一定的发展,有足够的业务逻辑,积累足够的业务场景,才能设计出有着自身业务的完善组件库。


优点:可以依据反馈沉淀组件库,发展到一定阶段整体变数不会太大

缺点:0-1阶段需要设计师对整体业务设计有比较足的把控力



我们公司在2020年初开启的项目,目前已经过了探索阶段处于向成长阶段过度,当时正值疫情高发整个项目都由我个人负责。现阶段整个公司在今年第四季度把系统性的产品和服务竞争优势提上了日程,毕竟没有设计规范对整个业务底层设计架构进行指引是很难做好产品差异化和规范化。也是趁此机会,设计可以针对性对现有的业务组件库以及规范进行一次全面的复盘,迭代出一个新的版本,在团队内推动落地以便更好适应产品的发展。




3.1做好产品定位

在B端的项目评审时,设计师就需要做好B端的用户画像,弄明白产品的目标用户以及使用用户的区别,他们通常并非同一类人。除了目标用户的差异外,不同用户的使用场景也是不一样的。只用弄清楚了各个角色的关系以及功能设计的逻辑,具体用户年龄,解决什么问题,才可以产出符合用户需求的设计。


3.2整理规范的内容和分类

在制定规范前,需要明确产品中主要有哪几种分类,将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化,可以借鉴但是切忌生搬硬套C端的设计规范。




3.3排优先级嵌入版本迭代内

一套完整的规范蕴含内容是非常丰富的,将程序小哥的头发全部薅完也难以在1个版本迭代里面改完的。因此我们需要将自己作为设计规范这个项目的产品经理,针对现有的需求进行拆分,并排出优先级分版本迭代进产品里面,我们可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排,影响小的后排。那么针对我们业务优先级排序是:设计准则>框架布局>组件>控件>场景。当然设计规范的制定不单单局限于设计团队内部,在嵌入版本里面时可与产品和开发多沟通,以便达到更好的落地效果。



上面的场景是否很熟悉,开发小哥每天都得忙很多的事情,如果不用线上文档进行同步的话,他们可能转头就会忘记哦~





4.1 页面布局


统一设计尺寸

据统计,目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话是一个比较合适的尺寸,向上适配或者向下适配误差会比较小。



页面框架

主流页面框架主要分为左右栏布局和上下栏布局。


左右布局:顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放。

上下布局:顶部菜单栏为固定结构,主体内容进行动态缩放,需定义两边空白区域宽度



栅格布局

栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格常采用 12和24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

  • 网格(Grid)

  • 栅格总宽度(Container)

  • 列和槽(Column&Gutter)

  • 边距(Margin)

  • 区块(Col-n)



我们的产品是在1440px的框架下进行设计的,采用左右布局的形式,将左侧菜单栏(100px)以及间距(24px)减去以后,就是自适应的内容区域(1292px)



4.2颜色/字体


颜色

主色的选择,需要依据使用人群,目标用户,使用场景,产品属性等因素综合进行考虑,在颜色使用上B端与C端的目的并不相同,C端颜色使用更大胆自由一些,以抓人眼球为主。而B端端使用则是以辅助产品功能为主,需要遵循对比原则,提升产品易读性。

小例子:以我们产品举例,在定义主色之前我向产品要来了关于用户人群的调研报告以辅助我去推测目标人群以及使用场景,并通过相关平台(七麦网)(艾瑞网)去找到竞品的行业报告。这些资料不仅可以帮你定义产品使用的颜色,还可以辅助你进行风格的定义,将这些报告放入评审的会议里面可以极大增强设计说服力和专业性。



通过鲸准与艾瑞网等数据相关网站可以轻松获取行业内的一些基本数据,这些数据足以让我们进行用户画像的初步建立了。



在规范好颜色以后,需要与前端进行同步,将颜色赋予单独的编号,方便双方就颜色上达成统一。如下图所示,一个编号对应一个RGB色值。



字体

B端页面可读性很大程度是由排版所决定端,而在排版中文字更是重点中的重点。


字体选择

在参考相关线上的成熟产品后,发现字体的渲染是一个很复杂的过程,首先我们需要知道在Web世界中存在着五大字体家族,江湖人称font-family:serif、sans-serif、monospace、cursive和fantasy。

font-family规定元素的字体系列,可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。



在实际使用场景中,用户的电脑一般是PC和Mac,但是这两个平台的屏幕材质、渲染方式都不一样,所以使用的默认字体也是不一样的。PC默认使用微软雅黑,而Mac默认使用苹方。

当我们打开一个网站,浏览器会读取font-family中的字体名称,并去检索用户电脑系统中的字体,如果有的话就显示,没有的话检索下一个。



字号与字重

字号的选择有多种方式进行参考,比如等差递增和等比递增的方式。我们自身在字体选择上选择由4为基数进行等差递增方式,在定义字号大小时默认采用偶数。



字重的功能是为了在文本种突出重点强调内容,在文本中常采用3种规格的自重(regular,Medium,Smlbold)

设定标题一律采用Medium

正文一律采用Regular,强调内容采用颜色区分大于字重去区分。

在使用字体时,我们需要判断其与背景色的对比度是否符合WCAG2.0的最低标准,即3:1,此处我们可以在创建文字样式时将标准标注进去。当我们使用文字样式的时候就可以随时提醒我们不要滥用。


4.3分隔与间距

在日常工作中,会常常出现多个小伙伴协同工作时采用的间距不一致的情况。虽然之前有进行口头上的统一(采用8px为基数)进行设计,但是还是会出现同一情况间距不一致的问题。在参照现有的成熟系统以后,依据亲密性原则与格式塔原理整理出符合现有业务的间距规范。




我会将间距分为竖向间距与横向间距。为了方便管理与沟通我会将他们进行尺寸上的区分(XS、S、M、L、XL)。


竖向间距:常用于模块与模块之间,一般采用24px,32px,48px

横向间距:日常设计中使用频率最高的间距,一般出现在组件与组件之间




4.4 图标规范

B端设计和C端设计里的图标无论是从功能,应用场景,图标的状态等方面都有非常大的差异,如果按照C端的方法去绘制B端的图标那简直是费力不讨好。在之前做C端的图标时常常需要考虑精致感与氛围营造,而B端图标功能则是降低用户认知为优先。为了方便图标端管理我将图标分为两大类型,分别为基础图标和业务拓展图标。且图标规定在3种尺寸分别为:XS=12px / S=16px / M=20px / L=24px以方便业务随时调用,且遵循偶数原则。


基础图标 :常规图标,复用性高且出现地方多

业务拓展图标:依据不同业务场景进行定制化的图标,常常跟着业务走


图标尺寸规范

与间距类似,将图标同等进行划分等级。12号字体搭配外框为12px 图标;14号字体请搭配 16px 的图标;16号以上的字体搭配 20px 图标,以达到更好的视觉效果:



keyline

通过keyline我们可以保证绘制不同形状的图标的一致性,在keyline的基础上画图标时基线可以给予我们一定的参考避免图标的比例失衡。可以说keyline是图标的栅格也不为过。



业务图标制作规范

除了常规基础图标外,针对业务场景制作的定制化图标如果不加以限制就会显得五花八门非常杂乱。当图标数量增加到一定程度时就会出现同一表意图标有不同的样式结果。因此有必要在保持图标美观易读的前提下对业务图标进行规整。




图标命名规范

随着业务增多,团队内之前的随意命名的习惯也开始凸显出弊端。在图标规范中,业务图标需要将每个业务区分开,每个业务都有着单独的后缀,这样可以让公用图标与业务图标更方便的溯源。



图标的图层整理

着业务线拉长,涉及的团队人员也越来越多。简洁整齐的图层不但能提升团队效率还可以让会影响接手工作小伙伴的心态。所以图层整理还是得纳入规范内的,此处不进行具体规范仅做提醒和警示作用。



图标交付/iconfont

在与前端开发沟通达成共识,图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)





5.1组件库到底是什么?

组件库常可以类比于常玩的乐高玩具,每个组件都是积木,而产品相当于我们拼好的模型。我们可以根据业务需求,以“搭积木”的方式,让“模型”快速拼起来。但是并不是说我们可以随心所欲搭建积木,至少需要看一看“说明书”,而这“说明书”就是设计规范。产品、组件和规范差不多就是这样的关系。


5.2搭建组件库前需要知道的小知识


原子设计/拆分

在业务已经发展到一定体量情况下,需要将项目中具备服用行以及拓展性的模块进行拆解,对于B端产品来说筛选的时候会依据之前迭代的版本内容,把页面一一罗列出来,将可替换与相似的模块提取,并利用思维导图的方式统一归纳,并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换,避免了线上组件不一致导致体验问题。

以我们产品为例:

依据产品类型将组件拆分为:基础组件 、业务组件、数据可视化组件、常用模块。




原子设计

将产品拆分后,此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面

  • 原子(元素、要素)

  • 分子(组件)

  • 组织(模块)

  • 模板(原型)

  • 页面(填充内容)

从原子开始重新依据定好的视觉规范进行更改,再由原子组成新的分子。



盒子box

在与开发小哥沟通设计规范制定的过程中,常提到他们写CSS样式的时候是采用盒子(box)去写的。通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。


走查时使用浏览器我们也可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。



5.2按钮

按钮设定有五种类型:主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。设计师可以依据自身业务属性,针对性修改按钮的圆角大小与描边,圆角曲率越大越柔越小越硬朗。除了按钮状态,在制定规范时还需要考虑到按钮的其他情况。比如按钮在放大使用时圆角曲率的变化。



按钮的尺寸规定

常用的按高度可设定为:24px、32px、40px、48px,超出48px的按钮都属于特殊按钮,需要进行单独设置的,宽度随着内容区域自适应。常规的按钮可分为:主要按钮(Primary Button ), 次要按钮(Secondary Button),虚框按钮(Dashed Button),失效按钮(Disable Button ),危险按钮(Danger Button),文字按钮(Text Button)等,对照着不同使用场景灵活运用即可。



按钮的自适应

按钮与按钮间的间距随着网页尺寸变化而变化,常设定几种断点规格进行选择。



5.3表单

表单承载着采集数据信息的功能,是用户在数据输入的核心模块之一。表单基础单位是由标签,输入框,填写提示,操作按钮构成。一行行列表单位组成表单界面。


常见的组合样式

据统计,表单内常见的组件样式有:文本框,文本域,选择器,开关,checkbox,radio,步骤条,上传/下载,标签页等。组件类别繁多,在选用组件时需要考虑其排布形式,在多列表情况下会着重描述这一点。


单列表单与多列表单如何选择?

在web页面内,在左侧导航条较小情况下会导致右侧输入区域空间较大,纵向空间不足的情况。若此时业务需求输入内容较多且难以采取分模块,分步骤交互时,采用双列或多列表单的形式提高空间利用率也是可以接受的。(ps:可以参照菲兹定律,采用多列的形式需要着重考虑文本框内容长度以及表单间间距的合理性)下面以自身业务为例子,列举在工作中多列表单出现的一些状态。




多列表单极端情况

采用多列表单后,随着复杂程度提升会出现各种各样的情况,此时设计师还需考虑到极端情况下表单显示问题。如标签过长规则(标签最好在最初阶段进行限制),带按钮如何进行换行,屏幕分辨率改变如何进行处理等。建议由设计师制定规则时与前端小哥进行深入沟通,以保证最终的落地效果。



让表单具有节奏感

之前我在表单宽度没有进行有意识的规范,导致整个表单呈现一种无序状态,通过有意识控制表单的宽度可以使我们对整体页面有着更好对把控,整体对品质感得到提升。可以对现有业务的表单进行梳理,整理出适合自身业务的表单长度单位。此处推荐阅读Ant_Design《整齐划一?不如错落有致》相信你会有更深的理解。



5.4 表格

表格,常用语展示数据,用户既可以在表格里面获取信息,也可以在表格内进行数据输入。相对于表单,表格可以进行多维度的数据整理与分析。其难点在于表格的组件交互联动多,以及数据展示的形式多。表格的信息密度很高是我们在B端页面设计中涉及最多的一个组件。


表格的构成

为了方便记忆,个人将表格分解为2大区域分别是:操作区域以及信息展示区域

操作区域:标题,工具栏,操作单元格

信息展示区域:表头,信息展示单元格,分页控件



表头与单元格

表头:表头分为带选框与不带选框/带icon与不带icon,需要注意的是表头上文字表意要清晰,简洁的表头能让用户更快明白此列的内容。此时需要与业务方沟通限制字数,若字数过长无法删减,则可以考虑使用tooltips。



单元格:在与开发沟通后发现,开发在写表格时并不与我们设计师的逻辑相仿,设计师在设计表格时是依据行与列的思维进行表格的设计,而前端则是通过许多的</tr>标签与</td>标签进行堆砌而成。因此在设计时将单元格规范好,前端将更容易还原好表格。



表格在页面中的样式规范

一般来说,表格内组件功能复杂,为了提升整体表格统一性与设计效率,我整理了业务上几乎所有的表格样式。整理需求后发现几乎所有的表格蕴含序列号与复选操作,故整理了一套通用表格规范以供小伙伴们参考。常规页面通过栅格,由列的数量决定列宽,与现在的主流框架组件一致;特殊页面可以与前端沟通后,在设计稿里面标注某单元格进行固定宽度,其他百分比缩放进行处理。



业务中表格的常见问题

此处仅提出几个个人业务中常见情况,更多的表格问题解决方案推荐查看CE青年《B端设计指南06 - 表格(下) 》。


有些特殊字段采取左对齐不美观该怎么规范对齐方式?

常规文本字段:可点击的字段、普通文本类、数字字母等,此类长短参差不齐的,建议采用左对齐的方式

特殊字段:日期、时间、字符数一致且比较短可控的,建议与表头居中对齐

业务字段:金额、状态标签、类型标识等业务性较强的,可根据相关特性与阅读习惯确定对齐方式


文本内容过长怎么解决?

当表格列数过多或者横向数据过长时,难免出现单个单元格内数据展示不下的问题,此时常采取换行的方式处理。(ps换行处理后的结果需要与后端沟通好,避免出现换行不分字段的情况)



单元格内操作项数量不一致时,该怎么处理?

此处建议采用平铺式进行处理,此方式适用方式比较广,稳定性较高(亲测)

将所有操作按照一定的预设排列顺序进行平铺,这种方式能够适应B端的大多数场景,将操作都简单平铺出来虽然看上去简单粗暴,但是在实际工作中,也是一种不错的处理方式



每一页表单展示多少行合适?

如果你经常与开发打交道你就会发现,开发对表格信息的处理逻辑是通过逐行从上到下进行渲染处理的。如果不对行数进行特定的规范,那么开发可能会采取渐进式加载(用户通过滚轮下滑的方式滚动到末尾再进行下一批量的数据加载)来解决表格内容过多的问题,这就会导致体验上的不统一。可以梳理当前业务,遵循尽量不让用户过多滑动为原则定制每页的行数。


5.5弹窗

B端业务中使用的弹窗主要分为模态弹窗和非模态弹窗,其最大区别在于对师傅会打断用户的操作流程,模态弹窗会要求用户必须给予操作。而非模态弹窗不会打断用户当前操作流程,仅仅起提醒用户的作用,非模态弹窗常常过一段时间会自动消失。



常见的模态弹窗有:对话弹窗,表单弹窗分,分步弹窗等

常见非模态弹窗有:通知,全局提示,警告提示,气泡提示,文字提示等




弹窗依据栅格自适应

为了方便规范系统内等弹窗位置和大小,将弹窗作为一个单独模块进行处理是一个不错的选择,业务中弹窗的性质一般都是横向居中展示。将弹窗纳入栅格体系中。前端小哥可以让弹窗的宽度随着列宽的大小变化而变化。



5.6组件库如何进行迭代

当我们把第一个版本组件库搭建完成后,对于它当更新和迭代需要依据业务当发展不断去维护。建议设计团队内有规划有目地去维护组件库当多样性,以保证组件库能随着业务的发展一起成长起来。因篇幅原因,此处遍不细讲此部分内容,如果大家感兴趣后期可以再单开一篇讲讲组件库的迭代流程,此处附上有赞的组件库迭代流程供大家参考。



小总结:组件库需要保持简洁和清晰,不能为了做组件而做组件。最好的状态是适合业务当前需求的状态,组件在于精细而不在于数量。臃肿对组件库不但不能提升整体团队效率,反而会拖垮整个工作的节奏。





搭建设计规范和我们日常处理工作需求类似,并非输出一份文档就结束了。我们还需要将做好的设计规范推广给包括设计小伙伴,PM和开发小伙伴的团队内外,并且需要得到团队内的一致认可才算是初步完成。


如何推广给PM

利益点:提升协作效率,减少工作成本


在启动设计规范的整理之前,内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。否则也不会分配资源给予时间去搭建整体的设计规范。可以通过提升PM与设计的效率和降低原型搭建成本去切入,通过组件库以及通用模版的搭建PM只需要极低的成本学习一下组件库怎么使用(我们的PM是使用sketch搭建原型)即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与,开发通过原型组件库搭建页面。



设计团队内部如何推广

利益点:提升设计效率,减少人力损耗

设计规范一般由团队内小伙伴共同制定,基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。


Library共享+更新日志

通过Sketch Library 共享组件库,并建立更新日志规范项目流程提升效率。



研发团队内容如何推广

利益点:封装组件,更少的更改,缩短研发流程


需要研发团队认可设计规范,前期前端的参与是必不可少的。在制作规范时设计师了解了前端开发的一些简单原理,前端开发也能及时了解设计师的想法,大家不再是各司其职而是串联起来共同协作,当规范确认下来前端就不会频繁改动组件,而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间,为后面的项目争取了空间。



小总结:本人时常听到一些小伙伴的反馈在公司内部设计师的话语权不够,公司不太重视设计。其实总结下来就是专业性得不到团队内的认可。设计师在工作中如何体现自己的优势是通过一次次的需求业务来体现的,许多小伙伴在做业务时既没有前期调研,也没有进行资料收集仅仅只是闷头开始动手做,往往结果不会太好。在处理需求时团队内部的同事也是可利用的资源之一,多与他们协作获取业务相关的信息,不仅能帮你站在全局的角度去思考这个业务,而且能让团队内部成员具有参与感,输出的结果当然更容易让他人认可。





收集信息能力

通过整理规范,需要收集目标用户,使用场景以及前期调研等众多资料,此时我们需要去发现信息以及整理信息。这一点在日常工作中也常常被使用到,日常中我们在做需要时也需要不断去挖掘相关对信息才能从容解决问题。


归纳总结能力

将收集好的信息进行分类整理,这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级,这项能力无论实在工作还是日常中都有着巨大对好处,可以帮助我们从一堆繁杂的事物中“提纲挈领”,换言之就是“化整为零”,做减法,提取出最关键对因素。


全面复盘能力

将信息归纳整理好后,需要对全局进行思考,全局的交互都需要考虑到位,比如什么情况下适合跳转页面,什么情况下适合给与用户弹窗。大体符合什么交互原则。除了对大体交互需要考虑到位,细节上也不可以忽视,比如异常情况,极端情况该如何去处理,组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能,对项目全局思考的越多,那么对整体项目对把控能力也就越强,与他人合作也会越显得专业。


表达能力

在整理设计规范时,难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助,具备良好的表达能力能迅速帮助我们将问题阐述清楚,我认为表达能力是设计师需要具备的重要技能之一。每次在求助它人或向他人汇报,都需要在全面复盘问题过后做到心里有数,将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰,别人也更容易听懂你说的事情快速理解内在逻辑,那么说服别人推动工作的难度也会越小。


沟通能力

在多次与他人沟通,个人认为是对我本人帮助最大的能力了。我总结了几个和上下游沟通的小技巧希望能帮助到小伙伴们,在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象。


原因里面包含:

包含为什么要进行沟通?(推进项目还是告知)

想要达到什么结果?(自己能做多少妥协,底线在哪)

预判对方对这件事持什么态度?(支持/反对/无所谓)

希望对方做?自己的目的是啥?(求助还是说服)


对象里面包含:

和谁沟通?(上游还是下游)

他们对这件事了解多少?(比我多还是比我要少,需不需要简单讲解一些)

当然在沟通时还需要考虑方式和语气,这些都需要好后斟酌。也遇到过情绪不太好的开发小哥,这个时候反倒我们更不能将情绪激化,一般这些情绪化对态度过一会都会消散,可以采取冷处理等情绪过后换一种方式沟通看看。

文章来源:站酷   作者:Weiyehe 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

产品设计「需求分析」入门简册

涛涛

嗨,朋友们,不知你是否曾遇到这样的处境,听到需求,大家再熟悉不过了,在产品设计的时候,什么是产品需求?什么是用户需求?什么是商业需求?到底怎么进行产品需求分析?

看到这一系列的问题是否一脸懵,一脸茫然,对需求分析和理解不够的透彻。今天,我为大家分享的是关于产品设计需求分析研究,希望可以对大家有所帮助,更好做好需求分析,理解需求分析。

需求到底是什么?

在工作中我们经常提及需求,谈及需求分析,但就一个简单的需求,我们真的了解吗?真的知道什么是真正的需求吗?天天被客户说你没有理解我的意思,你没有了解我的需求。那么什么是需求?百度百科中解释需求指人们在某一特定的时期内在各种可能的价格下愿意并且能够购买某个具体商品的需要。而关于需求也有人解释为需求是由个体在生理上或心理上感到某种欠缺而力求获得满足的一种内心状态,它是个体进行各种活动的基本动力。而产品是为了满足人们的需求而被生产出来的,因为需求的驱动,才会使得用户需要产品。因此需求,既不是功能,也不是产品,不能把功能和需求混为一谈。需求是用户面临的某一个问题,产品或者产品功能只是为了解决用户的需求的解决方案。

基础科普!产品设计「需求分析」入门简册

1. 需求类型介绍

那么产品的需求都有那些类型呢?

需求按照产品属性可以划分为:idea、新增、优化、Bugfix;按照产品职能可以划分为:功能类需求、运营类需求、数据类需求、设计类需求;按照产品价值划分为用户需求和商业需求;按照产品性质划分为显性需求和隐性需求。

基础科普!产品设计「需求分析」入门简册

2. 需求相关理论在产品设计中的应用

基础科普!产品设计「需求分析」入门简册

马斯洛需求层次理论(hierarchical theory of needs),马斯洛,可以说是我们需求理论界的祖师爷,他认为,人的需要由生理的需要、安全的需要、归属与爱的需要、尊重的需要、自我实现的需要五个等级构成。下面我们看看产品设计中的应用:生理需求方面应用、安全需求方面应用、社交需求方面应用、尊重需求方面应用和自我实现需求方面应用。

生理需求方面应用

生理需求即满足人类的最底层,最基本的生活需求,包括衣、食、住、行、用等。生理需求是推动人类生存的动力,只有生理需求得到满足,人们才会追求更高层次的需求。

比如:唯品会、饿了么、美团、百度地图、Wi-Fi 万能钥匙。

基础科普!产品设计「需求分析」入门简册

安全需求方面应用

安全需求即在满足人类的生理需求的情况下,满足人类的安全和社会保障,包括健康、社会秩序、法律、和平、医疗、教育等,人类需要安全感。

比如:支付宝、360、全民反诈、查悦社保、优健康。

基础科普!产品设计「需求分析」入门简册

社交需求方面应用

社交需求即归属与爱的需求,体现在个人渴望得到家庭、团体、朋友、同事的关怀爱护理解,包括友情、爱情、熟人社交和陌生人社交等的社交需要。

比如:微信、Soul、珍爱网、探探、陌陌。

基础科普!产品设计「需求分析」入门简册

尊重需求方面应用

尊重需求即较高级别的需求,满足前几种需求的前提下,用户开始关注高级需求,包括内部尊重和外部尊重。自尊和希望受到别人的尊重。

比如:朋友圈和抖音的点赞、评论,电脑开机助手

基础科普!产品设计「需求分析」入门简册

自我实现方面应用

自我实现需求即最高级别的需求,实现自己的理想抱负,实现自己的追求,成为伟大的或具有影响力的人物。在人生道路上自我实现的形式是不一样的,每个人都要创造机会去完善自己的能力,满足自我实现的需要。

比如:微博认证、知乎认证、网易云音乐会员、QQ 会员、抖音认证

基础科普!产品设计「需求分析」入门简册

圣经人性七宗罪(seven deadly sins),天主教称七罪宗,或称七大罪或七原罪,属于天主教教义中对人类恶行的分类。

最本质的需求是人类原始的本能欲望,在《圣经》中,人类有七宗罪:色欲(lust)、暴食(gluttony)、贪婪(greed)、懒惰(sloth)、愤怒(wrath)、嫉妒(envy)和傲慢(pride)。

基础科普!产品设计「需求分析」入门简册

一款好的产品,需要对人性做透彻的分析,才能完成其设计。

比如:快播、王者荣耀、拼多多、狼人杀、大众点评。

基础科普!产品设计「需求分析」入门简册

3. 需求层次的规律

需求是不变的,变得是满足需求的产品。从古至今,人类的需求几乎没有发生改变,如为了满足人类移动的更快的需求,历史上有马车、自行车、汽车、火车、飞机,互联网的产品则是,摩拜单车、哈罗单车、滴滴出行。

传统产品

基础科普!产品设计「需求分析」入门简册

互联网产品

基础科普!产品设计「需求分析」入门简册

因此,在进行产品设计中一定要:

  • 把控需求来源
  • 提高需求质量

需求如何进行获取?

聊了这么长的需求,那么需求到底如何进行获取?都有哪些渠道和方法呢?小浪郎看了相关的视频和书籍进行了一定的了解,只要路子野,就不会有悲伤!关于需求也有相关的获取渠道和方式。

1. 需求获取渠道

需求的获取渠道,包括内部渠道和外部渠道,通过多种渠道来获取用户需求。内部渠道包括产品、老板、同事和自己,外部渠道包括市场、用户、竞品和合作伙伴。

外部获取渠道

基础科普!产品设计「需求分析」入门简册

1.市场

产品设计需求会受到行业政策的调整而变化,如政策对顺风车业务的需求影响。

2. 用户

产品就是为了满足用户的需求而服务的,需要及时的了解我们的用户,了解我们的目标用户。

3. 竞品

知己知彼,方能百战百胜。在同领域的竞争对手,通常来说两者之间是相爱相杀的关系。我们既要了解直接竞品,又要了解间接竞品。如碎片化时间、场景相同、用户也相同、但需求不同的抖音与快手、微信读书与网易云音乐。

4. 合作伙伴

合作伙伴能够给企业带来资金资源、先进技术、管理经验,提升企业技术进步的核心竞争力和拓展国内外市场的能力,推动企业技术进步和产业升级的国内外先进企业之间的合作。

内部获取渠道

基础科普!产品设计「需求分析」入门简册

1.产品

通过用户使用产品时所产生的行为数据,来进行产品战略规划和设计,因为用户的行为即是用户的需求。

2.老板

产品设计在满足用户需求的同时必须兼顾企业的战略需求。而这方面需求通常是由老板或公司的高层来进行掌舵的。

3.同事

产品的开发流程,从产品规划到需求分析,从需求分析到产品设计,从产品设计到产品开发,从产品开发到产品测试运维等,涉及了很多的同事,他们对用户也有所理解,间接了解用户的需求。

4.自己

作为产品人,我们也应该成为产品的用户,成为产品的目标用户,这样才能不断为用户思考,为用户解决需求。

2. 需求获取方式

需求的获取方式,包括内部方式和外部方式,通过多种方式来获取用户需求。内部方式也同样包括产品、老板、同事和自己,外部方式包括市场、用户和竞品。

外部获取方式

基础科普!产品设计「需求分析」入门简册

1.市场

通过了解国家的法律法规、政策方针、了解市场的行业动态和数据报告。

2.用户

通过用户调研和用户反馈来进行了解用户的需求,从而为用户进行服务。常见的用户调研包括有:观察法、单人访谈法、焦点小组、问卷法、头脑风暴法、自我陈述法和实验法。常见的用户反馈包括有:论坛、贴吧、微博话题、Appstore 的产品评价等。

3.竞品

需要持续性的进行相关竞品分析,了解优势与劣势,了解相同与不同。查阅相关的竞品分析报告,进行快速了解。

内部获取方式

基础科普!产品设计「需求分析」入门简册

1.产品

通过一次次的数据埋点产生的用户行为数据,有效的用户行为数据分析,出具有业务价值的数据分析结论。

2.老板

及时与老板进行高效沟通,结合企业的战略定位与战略规划,明确产品的战略规划。

3.同事

与同事进行产品头脑风暴,打破常规,积极思考,畅所欲言,充分发表看法。

4.自己

作为产品人,我们要用心观察生活,使用更多的产品,体验更多的产品,总结产品经验与规律。

3. 需求记录

不仅我们需要了解需求,同时各种各样的需求也要规范的进行记录,我们通过需求卡片来进行需求记录,包括需求编号、需求类型、需求来源、需求内容、需求场景、记录时间、记录人员等。

基础科普!产品设计「需求分析」入门简册

需求分析怎么进行?

需求也有真伪,获取了需求,接下来我们需要进行需求分析,分析那些需求是真需求,那些需求是伪需求;哪些需要是必须要做的,哪些需求可以不用做;哪些需求先做,哪些需求后做;如何进行筛选需求等,常见的需求分析包括:需求筛选、需求透视、需求排序。

基础科普!产品设计「需求分析」入门简册

1. 需求筛选

初步进行需求筛选,包含有 4 个分析纬度,真实性、一致性、价值性和可行性。

基础科普!产品设计「需求分析」入门简册

真实性

需求是否是目标用户的真实需求,自己不要 YY 需求,同时也要对用户嘴上说的需求进行斟酌,需求是否真的存在。如用户说星巴克不好喝,但实际是因为太贵了,没钱。

一致性

是否符合产品定位?需求分覆盖面有多大?有多少目标用户有这种需求?这个需求有多大程度上的代表性?

价值性

需求能带来多少价值?(用户价值、企业价值)需求实现要多少成本?(人力、金钱、时间) 需求投入产出比如何?

可行性

需求按照目前现有的人力物力和财力能够实现,过滤掉企业能力范围以外的产品需求,但是我们可以和别的企业达成战略合作,求同存异,互利共赢。

2. 需求透视

需求透视就是从获取的表面需求中提炼出用户的本质需求。理解用户的本质需求,则有利于我们更好地提出产品需求。分析表面需求,本质需求和产品需求。

基础科普!产品设计「需求分析」入门简册

再来一个小案例。

有一天小浪郎和朋友去看电影,走在了街上突然发现没吃饭饿了,小浪郎想吃火锅,但由于要和他的朋友一起看电影,时间来不及,于是它们一起吃了山西刀削面,解决了吃饭问题,然后两人一起去看电影了。

那么上面小浪郎的用户描述需求是想吃火锅,但用户实际想要的只是没有吃饭,只要吃饭了就行,而他们的潜在需求有饮料、啤酒和水果等。

3. 需求排序

根据企业的战略定位、产品规划和用户需求,我们需要对记录的产品需求重要性进行优先级排序。具体而言,通过需求类型、需求频率、需求强度和需求逻辑来进行需求的优先级排序。

基础科普!产品设计「需求分析」入门简册

需求类型

依据 KANO 模型对需求做出的分类,考察需求的类型,包括基本型需求(痛点)、期望型需求(痒点)、兴奋型需求(兴奋点)。

如微信产品,用户的基本需求(痛点)是聊天,微信表情则为用户的痒点(期望型需求),没有表情包也照样聊天撕逼,而微信红包则是用户的兴奋点(兴奋型需求)

需求频率

用户在单位时间内使用产品的次数即为需求的频率,频率越高,需求对用户越重要。如产品设计时,把高频率的功能放在一级,把低频率的产品功能放在二级甚至于三级等。

需求强度

需求的强度可以参考马斯洛需求层次理论,包括必要性、高频次和持续性。

需求逻辑

需求之间也存在着一定的逻辑关系,需求也有先后,先完成第一步需求,才能完成第二步需求。如微信视频,必须先有微信好友,才可进行微信好友视频。

需求不变,变得是适应需求的产品,把控需求来源,提高需求质量。

本篇文章为大家介绍了产品与需求、需求理论知识和应用、需求获取和分析研究,相信基于以上需求分析理论和方式方法,在以后大家对需求分析的处理能够有新思路,高效打造出一个有价值的优秀产品。希望能给到小伙伴建立自己的产品需求分析体系一些启发。

重要的事情说三遍:把控需求来源,提高需求质量;把控需求来源,提高需求质量;把控需求来源,提高需求质量。

文章来源:优设   作者:Hello_姚冰 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


将迪士尼的10大动画原理应用于UI动效设计

鹤鹤

迪士尼的12条动画基本原则是传统动画中最有价值的原理之一。它出自Johnston和Frank的书《生命的幻觉》。虽然这些原理最初是为传统动画(例如角色动画)设计的,但在本文中,我们将探讨如何将其中的一些原理应用于UI动效上。

01-挤压和拉伸

在动画中,挤压和拉伸表示对象的重力,质量,弹性。当场景中的弹球撞击地面时会被挤压。在UI界面中,挤压和拉伸非常适合与按钮相结合。

例如,按钮的按下状态为挤压。通过控制挤压和拉伸,我们可以轻松地定义按钮的状态。除此之外,它还可以应用于界面上的所有的交互式元素。

应用于按钮上的挤压和拉伸

应用于侧边栏的挤压和拉伸

02-预备动作

预备动作为用户展示了即将发生的事情。就像奔跑开始时,我们的身体会先向后倾,然后才是加速跑,这就是预备动作。在UI动效中,悬停状态就是很好的例子。每当我们将鼠标悬停在元素上时,某些元素都会做出反应,表明它是可单击的,并且当您单击它时会发生某些事情。

悬停互动通常会告诉我们接下来有一个动作发生 

涉及水平滚动的界面通常会显示下一个元素的一部分,该元素会出现在滚动/滑动中

03-时间节奏

在传统动画中,时间由绘制的帧动画来控制。帧数越多,动画将越流畅和越慢。时间还可以表现对象的情绪和性格。

时间也是所有UI动效最基本的属性。定时和缓动功能在动效设计中起着重要的作用。漫长的过渡会使您的用户等待太久。另一方面,如果动画太快,用户可能会错过一些东西。通常,大多数界面动画在200到600毫秒之间。诸如悬停和反馈之类的交互约为300毫秒,而诸如过渡之类的复杂动作约为500毫秒。您可以参考Material Design,其中对每种类型的动画的持续时间都有很好的解释。

右侧的过渡会使用户等待太久

04-动画的缓入缓出

现实世界中的大多数对象都遵循缓动效果。换句话说,物体的运动并不突然。就像自由下落的物体会在运动过程中逐渐加速。

向UI元素添加缓动效果可以使它们看起来更生动自然。制定时间节奏和缓动标准可以让你建立一个高效的动效库。

右侧添加了缓动效果,所以看起来更自然

05-转场

转场,它包括如何将对象放置在场景中,如何以及何时进行每个动画等等。它将用户的注意力引向场景中最重要的对象。

对于UI界面,转场决定了元素的放置位置以及在发生交互时如何对元素进行排版。它将用户的注意力引向最关键的元素。

这是一个音乐类的APP,转场动画将歌曲封面和名称放大置顶,并让“喜欢”按钮单独出现,让用户一目了然

06-弧线运动

从高处抛出的球遵循了抛物线的路径——弧线会让事物更自然。在UI界面中,使用弧线运动会比使用直线运动更加的自然,要突出元素运动的路径时可以使用弧线。

弧线运动更加生动自然

07-辅助动画

在动画中,辅助动画用于强调场景中发生主要动作。例如,角色的头发在行走时的微妙移动,或者是面部表情的微妙变化。

在UI界面中,辅助动画可以使主要动作更加突出,这在向用户反馈信息时非常有帮助,所有微交互的作用均基于此原理。

辅助的例子动画让点赞效果更饱满

08-夸张

场景中的重要角色必须具有吸引力,通常会将某些动作进行夸大以引起更多关注。

在UI界面中,重要的交互作用也需要更夸张一些,以引起用户的注意。下图的设计就是一个很好的例子,悬浮的按钮在静态状态很显眼,因为它的颜色更重,并且悬浮在所有元素之上。当发生任何交互时,夸张的动画让它可以占据整个屏幕,使其吸引力更上一层楼。

占满全屏的夸张动画

夸张的支付按钮更吸引人的眼球

09-惯性与延时

试想,如果你坐在三轮车上,当车前进的时,身体会短暂后仰,然后也会随之前进,我们称之为延时。突然刹车时,又会由于惯性运动身体向前倾然后回来 。

在UI界面中,同样可以在元素静止之前添加惯性运动,以使它们感觉更自然。不同元素直接也可以添加延时效果,让动效更细腻~

窗口放大时添加了惯性效果

图像和文本添加了短暂的延时效果


文章来源:UI中国   作者:设计师深海

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档