首页

提升UI设计的高级感

ui设计分享达人

完美,不是因为没有什么可以增加,而是没有什么可以减少。


创建美观、可用和的UI界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。 


1、视觉元素

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节,一起来学习。


1.1 使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。



每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑)
  • 次要内容使用灰色(比如商品介绍)
  • 辅助性内容采用浅灰色(比如发布日期)


类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

  • 大多数的文本采用正常的字重(400到500,具体取决于字体)
  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

▲主标题字重为600,其他标绿点的文字字重都为400


应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。


灰色文字在无彩/彩色背景下要分开处理


不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。


但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色


其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。



1.2 统一色调

选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。


1.3 干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。


这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。


1.4 个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。


3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。


1.5 Tab的设计感

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉,又进一步强化了用户对品牌形象的认知。


1.6 无框设计 去繁从简

在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:


使用阴影

阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力。


使用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。


增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。



1.7 统一设计元素

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。


1.8 符合产品气质的字体

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。


1.9 第三方图标风格统一

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。


1.10 图片中寻找色彩

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。



1.11 提高图片质量

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。


1.12 卡片式设计

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。


2、情感化设计

心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。


2.1 提示性文字

语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如App那些push推送通知,因为用户每天收到的PUSH实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的PUSH文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。



2.2 下拉刷新

下拉刷新是用户在App使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。

下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。



2.3 头像设计

个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。


现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。


2.4 缺省页化解负面情绪

通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。



2.5 标签栏微动效

情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。



2.6 模拟用户行为

如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。


情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。


再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。


2.7 有趣的细节设计

俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!



有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。


文章来源:UI中国  作者:漂浮柠檬核Fyin印迹

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

禁用按钮应该怎么用?

资深UI设计者

在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时不可用,我们到底是显示不可用时的禁用状态呢?还是直接隐藏这个按钮呢?

大家还是喜欢提这种通用性问题,希望有一个说法,可以概括所有情况。但我多次说过,不存在这样的好事,一定是具体问题具体分析的。

尤其是这个问题,想要聊透彻,得用不少例子来举证说明,不过也可以通过总结的方式长话短说了。

禁用按钮的使用,可以从两个维度来分析,分别是:「无效的禁用状态」和「有效的禁用状态」。

无效的禁用状态

有一种情况是,在一个页面里,一个按钮,可能会有几种不同的情况存在。那人要问了,既然是一个页面,为什么会有多种状态同时存在的情况呢?

比如,在出行场景中,普通乘客发起订单,司机接单后是可以发送消息的(左图)。但是从第三方渠道来的乘客,司机是无法发送站内消息的,只能通过电话联系乘客(右图)。

禁用按钮应该怎么用?来看高手的分析!

不同渠道来的用户,司机端的页面会呈现不同的按钮状态。相同的页面,第三方渠道来的乘客,在司机端就不需要露出消息按钮了,这样可以减少无效信息对司机的干扰,还可以避免司机习惯性操作带来的无效反馈,比如点击消息,显示「无法发送消息」。或者显示禁用,也会影响司机的操作判断。

从这个案例中我们可以看出,当一个按钮在某种情况下始终无法被触发时,就会选择让它直接消失,而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态,以免按钮消失而打乱页面布局。但是要知道,在某种情况下,按钮无用时,无意义的展示反而会产生干扰信息,就像上面说到的那样。

所以这里有一个结论是:禁用按钮需要可触发的时机,如果没有这个时机,禁用状态就没有存在的必要。如果存在,那它也是一个无效的状态。

既然是无效的,最好就不要出现了。

有效的禁用状态

在上面的例子里,有一个前提不可忽略,那就是司机是否可以理解我们不显示的原因。当然,司机会接受相关培训,产品中也会有渠道标识,所以司机能够明白页面中存在的差异。

但在其他产品中,当状态不同,按钮变化无法自洽的时候,又怎么去处理呢?我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点,比较典型的案例是在线上购物时,一件商品会有多个类型供消费者选择,比如不同的尺寸、型号等,当其中一种类型被抢光时,这个商品依然是可见的,只是无法选择,展示出了禁用状态。

在这种场景中,我们不能一下子把其他无法购买的类型隐藏,因为用户需要知道我们所有的商品类别,了解商品的全部属性,尽管当下无法购买,但有上新的可能,用户依然可以选择等待,并将其加入收藏,还是会有机会促成这笔交易。而且当可选类型变多的时候,只是禁用没有库存的类型,可以使其他可选项保持固定的位置,有利于我们二次搜索和加购。这种场景的禁用也是暂时的,直到商品下架或者上新。

但就像我以前说过的,常常我们见多了的东西,就认为是正常的,但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作,但是禁用的原由始终没有给到用户合理的解释,以至于许多人见到类似的操作都是一头雾水。所以在设计过程中,尤其要谨慎对待,尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面,如今也将原来的商品纯禁用按钮,替换成了「缺货」。选择缺货的商品之后,按钮会变成「提醒掌柜补货」。

禁用按钮应该怎么用?来看高手的分析!

从原来的用户单方面接收无法点击的按钮,到现在直观显示缺货,点击后同时提醒到商家,这样的操作从功能角度来说是一个升级。

这就是我说的,有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用,而是告知用户,它如何可被使用。

小结

如果一个按钮在不同的阶段有禁用和可用的状态显示,那么意图是很明显的。比如一些活动页面,某个按钮的禁用状态是倒计时,就像电影的前期宣传,为电影的上线制造话题和热度,来鼓励更多人的观看一样。

对于按钮来说,显示禁用则代表它在满足一定条件后即可拥有可点击性,让我们明确地了解它就在这里,未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫,特别是营销类的活动,像是「明日 8 点可抢」、「提醒商家补货」的按钮文案,无一不在传达「可用性」的信息,引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示,多出现在表单中,当用户没有完成输入的时候则无法点击,因为看的多了,我们就以为这是正常的。但我们都知道它仍可优化,比如,在它以禁用状态出现时,用更为友好的方式去提醒用户应如何激活,而不是漆黑一片,且完全不知道它所存在的意图。

我们要知道的是,禁用按钮本身不是一个特殊的对象,只是禁用状态在页面中是一个特殊的存在,它是产品设计中的一种规则。为什么按钮不可用,或者说一定场景下为什么功能不可用,当无法依靠用户直觉理解的时候,是需要作出解释的,也就是怎么禁的问题。

但是最开始设计时就应该去想的是,禁用状态对用户和产品的意义在哪里,这和我们设计方案时脑海中涌出的无数目标一样,是一个基础的出发点。而后,一切迎刃而解。

文章来源:优设  作者:呆呆有理

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


采购平台界面设计

前端达人



转自:站酷

作者:社田


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

小猫宠物

前端达人

小猫宠物是一款面向大众化的手机宠物app,这里有来自天南地北的爱宠人士的动态分享,也有专业的医疗人员在线解答各式难题,更有超多实惠的宠物用品等你来抢

收藏
收藏
收藏
收藏
收藏



转自:站酷

作者:憨宝鸭


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

国外ui设计赏析

前端达人

国外ui设计鉴赏



转自:站酷

作者:是穗啊


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

爱航信息app平台的优势有哪些?

前端达人

生意越来越不好做,是大家目前的普遍状况,大多数做生意的手里都有一批货,急着处理回笼资金却又卖不出去

生意越来越不好做,是大家目前的普遍状况,大多数做生意的手里都有一批货,急着处理回笼资金却又卖不出去,所以我们的爱航信息平台应运而生。

 

如果你告诉企业或者商家出售他的产品或服务需要支付一部分现金,他肯定会皱眉,或者选择放弃。但是,如果你告诉他,他可以使用一些自己的产品或者服务来置换广告位,而不需要花钱,他肯定会欣然接受。“实际上,仔细考虑这件事的原因可能是许多人在观念中往往都坚持“现金为王”的心理。

 

所谓易货广告,就是在企业或者商家无法以资金支付广告位的时候,可以采用以商品或者服务来置换广告服务,广告交易可以不通过资金的形式,该种广告置换的方式可在多个企业或者商家中进行,易货广告,是企业或者商家在不用现金的情况下进行置换广告服务的有效方式。

 

互联网是提供货物与广告置换交易的绝佳平台,可以大大提升以物易物的可行性。以物易物这种远古时代的交易方法让其出现在互联网上,其共同点和成功之处就在于,商户或企业总能寻找到自己需要的,而当交易物品的价值相差不是太远时,商户或企业总会选择自己需要的。

 

此外,通过提供易货广告服务的平台,还可帮助企业或商家有效解决销售不畅、资金短缺、产能过剩和库存积压的难题。现代易货广告之所以快速发展,除了电子商务的催化作用,还有一个重要推动力就是现代企业经营思想的转变,“爱航信息不仅是一种广告模式,更会是一种经营思想”。



转自:站酷

作者:爱航信息


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

产品功能如何定义?

资深UI设计者

编辑导读:产品经理在进行产品功能规划时,会遇到来自各方的需求。这些需求有大有小,有迫在眉睫的也有无关紧要的,应该如何规划产品功能呢?本文将从四个方面展开分析,希望对你有帮助。

产品功能如何定义?

一款产品一般会具备一定的盈利点(商业变现能力)、其独特的使用价值,偶尔还会掺杂个人创作时的产品情怀(初心),像锤子科技入场手机行业的时候,是定位于年轻小众的用户群体,为他们提供个性观感的用户体验,虽说后来败北了,但也曾收获了一批用户的喜爱,也有因为这个领域始终存在着它的壁垒,所以不是简单的情怀就能做成一款好的产品。

当然,如果不是创始人,创作的情怀可能会体现的没那么深刻,但是产品早期的定位在一定程度上已经确定了基础的业务方向和发展的基调。

很多企业可以靠一款核心产品,进而延伸到其他的产品创造,基础产品实现了赚钱能力后,从而支撑其他的产品的试水,即使失败,也不至于“关门大吉”。

而当产品经理切入产品设计时,一般有我们常用的两种产品类型,一种是基于基础核心业务延伸的从0到1的项目设计,一种是处于生命周期-成长期中从1到N的产品迭代。

而这2种规划产品的功能的方式也是不一样的。

01 从需求出发

不管是哪类产品,立足点都是基于需求,而需求池也分2种,一种是源源不断的需求池,一种是寥寥无几的需求收集;前者更为切合从1到N的产品,上线后的需求或反馈都是来自真实用户的声音,包括主动的从现有的产品进行回访、用户调研以及通过用户的反馈和建议收集有效需求。

有了需求,那是最直观的,对应的产品功能可以根据此展开进行规划。

而第2需求类型,常常是因为局限于没有经验,不熟悉不了解所以需求的声音很少,这时候,产品经理就需要主动的去对比竞品,去分析竞品,解析出产品的核心需求,并且去了解这个产品的一个市场背景、规模和场景范围了。

当然,竞品分析不是让你全部照搬抄写别人的产品,这是没有灵魂的,作为一个产品人,是需要有自己的想法的。B端产品的分析,更加倾向于功能模块及逻辑设计,而非用户体验或界面的细致优化。

从0到1的产品功能规划时,要明白企业是属于某个行业的,而行业的范围比较广泛,比如做教育的,器材可以属于教育装备的一种,教务管理系统也可以属于教育装备的一种。另外,书籍、校服、桌椅等面对的对象是学校的,他们也可以说自己业务涵盖了教育领域。

所以,我们设定或规划一种产品时,往往都是有关联性的,而不是完全切入一个新兴的领域,撸起袖子就干。

当然,有能力的并且有钱的企业是可以这么做的,但是对于门槛较高或需要积淀的领域,他们也不会贸然动手,起码会先观望一下,然后找一找这个领域内的老玩家,通过合作的方式获得了经验值再自己独立做,但是做肯定是不会做相同的事情,老的市场被吃透了,这时候只有把新的东西注入,才能获得一些收益,比如把自己独特的优势、互联网观念或用户个性化体感的设计再应用到传统的制造业中,摸清了其壁垒及门道,才能走出自己的道路。

02 定义场景

场景是功能使用的具象化,主场景作为该功能的一个核心定位。如做一款访客产品,定位于通用性产品,你将考虑到其面对的对象,包括:

  • 购买者:政府单位、企事业单位、写字楼物业、小区物业、学校等(看重外观、整体系统的业务流程及效率、来访者的用户体验)安全需求较高的场景
  • 使用者:公司前台、门卫保安(看重产品易用性,且门卫保安等存在学历较低、年龄较高等普遍情况)
  • 受访者类型:集团大厦管理、公司部门、物业园区、政府机关、信访单位,政府机关、部队、学校、住宅小区、写字楼、会议展会

用户群体则可以细分:

  • 访客:商务洽谈、应聘者、办理业务、长期驻场员工、后勤(物料配送、维修)、参观、临时出差人员、外卖/快递配送
  • 受访者:企业高管、接待员/招聘者、业务办理人员、后勤管理人员
  • 未知人员:广告人员/推销、系统故障、人工登记后等遗漏登记的人员

03 思维导图罗列大体功能

调研竞品后,也分析了产品的使用对象及场景,这时候可以提炼和列举出核心且必要的功能,分析并讨论,这个时候一般是产品经理之间的相互讨论及推敲,可以先个人提出自己的方案进行比对,再去重择优,一个个将一级和二级的功能模块确认下来(也可以是3级,视具体情况而定),将整一个产品框架定下来。

思维导图的使用和场景使用也是相辅相成的,此类场景是基于主场景下的细化。如,对于访客来说,他去拜访用户,是否需要提前预约,如果没有提前预约,现场登记的方式和提前预约的方式有什么不一样,这样就可以确定下来,两种方式:预约和现场登记。那预约又可以包括访客H5扫码主动登记或者企业邀约申请等等。

04 整理流程

功能模块确定后不要急于去画原型图,因为更重要的一步还是整理整个产品功能之间的关联性,即产品数据的来龙去脉。

流程可包括业务流程、限制流程、前后端交互流程图等。以下图进行例举:

1. 业务流程图

为业务模块核心的工作流程,数据流向及基础判断,及业务的几种模式都可归属为业务流程,涉及的模块和功能一般是自己的模块属内。

2. 限制流程图

如在增删改查的过程中,对数据的一些限制和参数判断后的不同流向,往往是由多个模块之间的规则限定的,涉及到不同模块之间的关联性较强的说明。

3. 数据流程图

数据传输的起点和终点。一般软件包括前端和后台服务器,后台主控数据的管理和分析,通过后台对前端应用进行管理,常见的为数据的上传下发和命令的顺序的判断。此流程图着重对数据前后端的交互及整体流程的绘制。

基于以上都整理清楚之后,就可以开始进行原型设计了,原型的布局和风格可以根据现有软件或UI专业的建议进行设定,对于B端产品来说,布局和排版对功能影响不是很大,即使从0到1,也可参照市场常见的布局或根据公司规定的统一。而风格和产品定位尽量贴合,假如你做一款小清新的APP,就不要使用暗黑风格的调调了。

这就是今天篇文章讲的,之后会分享一些关于功能规划时的一些细节点。


文章来源:人人都是产品经理  作者:漂浮柠檬核

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


光影和空气,是完美排版的最后一块拼图

资深UI设计者

元旦过后,新的一波工作又要开始了,我在开始准备新一轮汇报材料的时候突然想到了一个问题,不知道铁子们在往年参加设计评审的时候,有没有总被老板 diss 设计稿里“太空了” “不够饱满” 这些个问题呢?

我猜测应该99%的铁子经历过,我也不例外,从校招进到第一家公司就开始被植入页面需要利用好每一像素的理念,搞得像北京房价一样寸土寸金,生怕被浪费了;思前想后为了大家不重蹈我的覆辙,所以新年的第一篇,咱一起来聊聊排版的问题:


NO.1


如果你看过我过往的文章,也许会对我的排版多少有点印象,夸张的大字,极强的对比,还有一些微妙的层级关系;坦诚的讲,我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格


1.瑞士风格

整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在;这种一丝不苟,传达准确的风格,即所谓瑞士国际主义风格。简单的说,由于 Swiss Design 这种风格简单明确,传达功能准确,因而很快得到世界范围内的普遍认可,成为战后影响最大的一种平面设计风格,也是国际最流行的风格,因此,又被称为国际主义平面设计风格;

简单的说,瑞士的这种设计风格典型的代表就是我们看到的杂志,其中有 3 个特点:讲究网格 / 非常理智的克制颜色的使用 / 层级关系;有趣的是,审美和潮流是循环的,随着时代的发展,越来越多的app开始重新挖掘出来瑞士风格并加以使用,比如我们iOS系统自带的应用们,Spotify:

年少的时候,我经常看着这些个app会不禁的问,为什么在没有一张图片的情况下还能如此好看?这些年终于明白了前人良苦用心:文字是内容,同样也是构成;是信息,同样也是装饰;简单可以理解为,不管在平面还是网页亦或者是UI界面,在没有可用的装饰下,信息本身要承担起装饰和传达的双重功能,这就是瑞士风格的核心本质


2.拟物风格

iOS是拟物的典型代表,网上对于这块的讲解已经过于饱和了,我也没必要赘述;那么这一趴,来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳,潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…

但当我打开下图这个页面的时候,我意识到我对拟物的理解还是浅薄了,第一次被光影的层次震撼到:

通过光影塑造了一个三维空间,让整个画面丰富饱满,也打破了我幼稚的设计观,PS.不管锤子科技现在如何,我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献,respect!

毫无保留的说,我的设计就是二者的融合,以 层次对比 作为核心理念。


NO.2

啰嗦了半天,赶紧进入正题;如果你是一名产品体验设计师,一定听说过 “奥卡姆剃刀” ,这个定律通常用在交互链路的设计上(意思就是在用户路径中没必要的步骤,省了就完事了),“如无必要,勿增实体” 即简单有效原理;


同样,在嘈杂的视觉结构里,画面也需要奥卡姆剃刀,当你在对画面的饱和上困扰不已,并急于找到一些背景和纹理填充的时候,我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的;上文有说过以  “层次对比” 作为核心理念出发,要区别于平面设计,营造一个立体空间,所以先理一下画面结构:

通常来讲,如果想要不平,把二维空间转化成三维空间是必要的一步,需要在Z轴上下功夫;如果你恰巧也是一名摄影爱好者,可以想象下照相机的焦距和景深,工作原理是相同的,需要 前景 / 主体和背景 三个层次;当然,虚实的对比对信息的呈现和层次的拉开是极其重要的,这里需要通过景深来控制效果,你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到:

另外,空间的感觉想要被突显,那么“光影和空气”的价值就可以无限放大了,按照如上所说的结构,把内容和自然物质摆进去就好了,甚至可以做到举一反三(比如不同颜色的氛围,我就不展开了):

整个case下来,你会发现用光来聚焦在信息上,自然而然就形成了我们说所得 “信息优先级”;有点时候空气和光影的饱满程度超乎你的想象,这种自然存在的物质可以很好的帮助画面分层,以达到填充的效果,并不是一定要依赖于实体化的装饰。


对了,如果你跟我一样闲着没事干的话,借用 keynote 的动画效果做一个吊炸天的动效,一定可以成为汇报场上最靓的崽( 注意:视频有音乐)!

NO.3

本来不打算再开一个章节说这个,但还是觉着很有必要再说下(我好纠结),作为PPT来讲,ta的主要用途分为两种:其一是给人看的,其二是给人讲的;不管是哪种,尽可能的简化文字,是对输入者关爱;

以上图为例(实名diss自己的作品),坦诚的讲左边的部分大多数观者是不会有心思来看的,按照视觉系统的处理,这部分就会被当成一个“面”而被忽略掉,这种情况下右边显得有力很多,也能帮助观者聚焦信息,所以还是那句话,能不写的就别写,能少些的别多写,保持信息的密度也是设计师必要的职责之一。


总结一下

想问一个问题,铁子们觉着UI的本质或者作用是什么?从我个人的角度来讲,UI设计的本质就是对信息的整理归类和编排,没有什么比信息更重要,如果贸然为了饱满加入一些装饰元素,很有可能是本末倒置,得不偿失。这就像喝酒一样,喝醉很容易,但微醺的感觉才是最棒的,今天是元旦后的第二个工作日,希望你能有个好心情迎接美好的一年~


文章来源:站酷   作者:负能量补给站

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

爱听音乐APP2.0视觉升级

前端达人

音乐可以敲开封闭的心灵,纾解忧郁苦闷的心情,让人的身心都得到适度的发展、解放。
爱听音乐是一款集音乐播放和音乐资讯分享于一体的音乐APP。
自己平常作图,学习都会听歌曲,于是就设计了这款APP。
在这次设计中,自己又对用户分析,竞品分析,产品的框架又有了重新的认识,
整个过程中也是受益匪浅,希望自己不忘初心,继续努力,继续前行!

(APP部分界面设计使用图片来自网络)
仅作为自己设计练习使用,不作为任何商业用途!

设计软件
Adobe Photoshop
Adobe Illustrator
Adobe After Effects

收藏
收藏
收藏
收藏




转自:站酷

作者:故事从未开始


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

日历

链接

个人资料

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

存档