APP完整的UI设计步骤秘籍教程:UI设计的细节

魔秀壁纸客户端UI设计汇总

写在前面的话:

首先需要了解的是设计的形而无形,像微风、像流水、像平淡无奇的生活,平淡到好象没有,但却就在那 里(至于是设计师思维多一点还是艺术家思维多一点的问题在这里不做深究,我只知道艺术的东西多数时间不是被用来使用的)。作为UI设计师我始终坚持的一点是:

形式服从功能,因为我们做的东西是被人使用的,欣赏是次级需要(但也绝对不是最后一级),这是目前所选择的方向,反之也是可行的,这取决于你想要所谓的“功能”到底是什么,是吸引用户还是让用户舒适实用,两种都是可成立的,正所谓:不以物之所限,不为物之所猖。

是说东西少的时候不能被物质限制住,而当东西多的时候又不会被看花了眼。 这正是设计师需要考虑的。

综其所述其实是在找一个度,一个可以寻求两者平衡的点,至少在美感与交互上我是这样的考虑的。用一个词形容,叫“点到为止”,而用另一个词形容,叫“近实远虚”。

正文

首一个客户端在设计师参与的过程中,大概可以分为4个时期:原型图时期、设计图时期、实际效果产生 时期和风格永恒时期。

一、原型图时期

首先让我们回到原始时期,即原型图时期,任何一个微小的波动,都将会对产品最终结果产生至关蚕要的影响,因此无论对于哪边都是个非常敏感的时期。就壁纸客户端这个项目而言,在产品给出确定的原型图 之后,设计师有理由在第一时间对原型提出自己的观点和对原型提出质询的权利,因为产品的每一个模块 都不是独立的,设计师需要充分理解产品原型中每一个交互节点存在的理由和原理,才能更好的将其中的 精髓部分设计的对味,起到承上启下的目的。然而就像做蛋糕一样,放进去的面粉放得多了或者少了,都 不能得到满意的结果。所以在这里会有两个过失误区:

误区一:

设计师不可以对原型图“指手画脚”从事颠覆活动。比如说出:“我觉得这里有这么多个按钮放在这里不好看,我觉得应该如何如何……”,按钮如何放的好看与否是设计师自己需要考虑的问题,但绝对不能因为不好看就要将他从原型图中删除掉,这是绝对不可以的。

但是如果你确实觉得原型中某个地方的不合理之处需要调整,那么你最好给出合理的原因及有效的案例或者数据加以辅佐,绝不能仅因为不好看就想要调整,这是没道理的。

误区二:

设计师不可以不管不问,拿图就做。因为设计师不是美工,两者区别在于前者专注于准确,而后者更专注于好看。问题在于:如果你拿来就做,往往会不分主次颠倒黑白,曲解了产品在原型用的用意, 把不需要强调的细节强调了,把需要强调的细节反而弱化了,而这一切的原因仅因为你觉得应该这样,而不是产品原来想要的感觉,做出来的东西就会不对味。

所以既然两个扱端都不可以为之,那就需要你在其 间适中的选择一条可行的方法吧。因为合作不是对立,是需要相互理解与协调的。

二、设计图时期

在和设计总监、产品经理对将要做的东西的认知达到共鸣之后,那么就可以开工做了,当然从现在开始, 更加频繁的沟通就要开始,因为你需要对设计的东西进行不停的矫正,直至满足设计需求为止才可以进行 下一个设计,一个一个的对,一个一个的通过。反之,在你将大堆设计稿一起提交之后,将会有多如山般的修改建议和指导意见反馈回来,多到你不知所措疲意不堪,甚至会产生失落感,从而影响工作的积极性。 修改是正常的,没有芫全不需要修善就能直接拿来用的,这是一种规范,更是一种态度。

随着客户端项目的设计进行中,会逐渐的形成一些规范与框架,这些规范取决于你对交互设计的认知,你对客户端定义的设计风格,你的做事习惯,这些都会成为这个客户端独一无二的DNA ,比如壁纸客户端这 个项目来说:

APP完整的UI设计步骤秘籍教程:UI设计的细节

A:用色

最早我们在用色上下的定义,是为了吸引男性屌丝群体,要做出一种夜晚霓虹的窥探的感觉, 所以选择了很多深的颜色,和霓虹灯发光的效果,整体用色偏男性化多一些,也有吸引男性的女性色 彩元素,比如霓虹灯这样的效果,但是不完全女性化。希望男性用户在夜晚浏览壁纸图片的时候不会 被刺眼的屏幕晃到眼睛,而且也考虑深色的背虽能够把用户的视觉中心集中到图片上来,而不会被太多东西分心。之后随着客户端内容方向的调整,我们将定位远离了以吸引屌丝为目的的用色群体,而 改为纯男性化的用色风格。

APP完整的UI设计步骤秘籍教程:UI设计的细节

B:质感1

在质感表现上从一开始便确定了这种以重质感为主的表现形式,并配有各种带物理特性的材 质,比如上图中左边依次为:带有磨砂颗粒感的顶栏、丝袜质感的背虽图案、粗糙亚铁质感的二级背景层、 碳纤维质感的底栏按钮、亚麻质感的下载按钮、亚光质感的小编横条,是想让界面珞带一些男性的糙感。 在深色中寻找变化,让用户每每又能在无聊的背景等待中找到一丝新意,使之耐看而不易淘汰,始终注重一种对图片的窥探感,并与男性用户达成一种共鸣。

APP完整的UI设计步骤秘籍教程:UI设计的细节

C:质感2

但是这些质感并不会一股脑的全部拥到屏幕上来,不然会让用户看的心烦意乱而感到烦躁。而是有层次的在用户操作过程中不同时间出现在不同的页面环境里,也随宥客户端的升级迭代,一些主要 的质感也会随之产生变化,比如上图中,按钮的质感从早期这种亚麻质感慢慢过渡到后来这种带些扁平化风格的可以进行*.9.png处理的按钮。点9化处理好处就在于不同的页面,根据不同的尺寸对按钮素材进行矢量拉伸通用化,从而降低整个软件包的容量。

APP完整的UI设计步骤秘籍教程:UI设计的细节

又或者像上面这个内容框一祥,好比是玩家打怪升级,装备也会变得越来越华丽一样,但在当时是已 经感觉最好的了,也是设计师会伴随客户端一起成长一起进化一起得到提高一样,是一个武者修行的 过程。

APP完整的UI设计步骤秘籍教程:UI设计的细节
B:拟物化

将页面中部分UI实体化、拟物化也能让用户对客户端产生一些兴趣,曾加客户端的存在感, 仿佛这个东西就实实在在的存在那里,增加其具实度。让用户想要去玩他去用它,给人感觉是在实际 操作一个装罝的感觉,而不仅仅是点击了几个色块而已,更能与喜欢实体感的男性用户产生共鸣,相比于扁平化的界面,这种拟物化的页面容易博得用户的眼球。

APP完整的UI设计步骤秘籍教程:UI设计的细节

E:细节

在一些页面的设计中,多一像素或者少一下像素,有时候感觉会完全不一样,正所谓魔鬼在细节里。比如说上图左边的小编头像的白色外边框设置成3像素的时候会舒服些,而设苴为4像素的时候 则会显得有些笨重,不显精致。再比如右边的是设首页面的选择框,如果你是在做苹果的客户端,你 可以优先选择右边的方案,因为苹果是1比1像素,不需要考虑机型适配的问题,但在安卓机上,你的所有设计都要除以1.5,所以在非480×800像素的显示屏上,(用户春欢用各种屏幕的手机,但是我们的设计图尺寸以最通用尺寸为基准,不然就会尺寸问题上忙昏了头)你的一像素高光线或者描边都会显得苍白而无力。

所以根据我的设计需要,我将边框订成了两像素的线,既能略显厚重突出男性化的特点,又不会在不同手机上显得糟糕。

APP完整的UI设计步骤秘籍教程:UI设计的细节

F:规矩1

正所谓无规矩不成方圆。客户端中很多东西是要写成死的规定的,比如说顶栏,我将其定义成在底栏分类可选的四大首页面都用蓝色颗粒的的页面,用来压阵。而随着页面操作的逐级深入,会出 现透明玻璃样式的顶栏,这就好比是外面的衣服和里面的衣服一样,会随着逐渐深入而总能给用户带来些新鲜感。

APP完整的UI设计步骤秘籍教程:UI设计的细节

G:规矩2

在客户端的设计过程中不仅顶栏如此,小标的风格也是要统一的要有相同的造型,相同的体积感大小,就像一套一套独立的派系,相同之间存在着不同,不同之间又有着统一。像这样的例子还有很多,想说的是在做这样一个客户端的同时,你是在构想一整套体系,一个世界。

APP完整的UI设计步骤秘籍教程:UI设计的细节

H:运动

客户端不同于平面设计,因为他是运动的页面,它是随着用户的操作,流动于指尖的。话句话说是不能看他这样子舒服就这样子,也许当上下滑动页面的时候,内容页面会变得不美观呢,或者像上图中第二张,在用户上下滑动的时候屏幕上始终保持有4〜5个可供用户选择的选项,而不会超过5个, 也是因为人的记忆力是正负7 ,加上每块可提供的大小比例,就最终选择了5块作为确定的方案,这些 都是要在运动的过程中去感受的,因为页面是活的是交互的。

APP完整的UI设计步骤秘籍教程:UI设计的细节
I:常识1

比如像上图中批虽删除页面的按钮状态,在未选取时,按钮为灰红色不可操作状态,用户选择 后按钮会变成鲜红色,指尖点击时显示按下的深红色效果,再加上已操作状态,一个按钮大约要有4种状态。最常见的就是普通和按下效果,是不可以被遗忘的。

APP完整的UI设计步骤秘籍教程:UI设计的细节
J:常识2

图片未加载,会有未加载背景图,而页面未加载的时候则会有页面读取动画,这些都是一个完整客户端需要要有的东西。

APP完整的UI设计步骤秘籍教程:UI设计的细节

k:了解

要了解所做的页面到底是怎么一回事,知道在做的页面是从哪里来的,而不是设计了一堆页面竟不知某个页面究竟在哪里,是从哪个交互节点进来的。要了解每个页面的所需要达到的目的,了解整个客户端的结构特点,明白这个客户端需要表达的重点,从而能够独立区分出哪里是重点,哪里不 是重点。在设计页面的时候就不会本末倒罝,分不清主次。把重点的东西做的平淡无奇,把非重点的东西做的天花乱坠,这样的设计就出力不讨好了。

APP完整的UI设计步骤秘籍教程:UI设计的细节
L:用色层级

在页面上用色深浅,让页面富有层次感,突出主要弱化次要。让用户专注于他想要了解的部分,而将一看而过的不需要耗费精力去了解的部分弱化掉,就像开头所说的“近实远虚”。还是和 上一条一样讲的一样,让用户知道该看什么不该看什么,合理的引导用户同样也是一个UI设计师需要同产品共同考虑的问题。

APP完整的UI设计步骤秘籍教程:UI设计的细节

M:字体

在壁纸客户端中,字体的大小也会影响到客户端的整体感觉,用户在阅读文字内容的时候如果字体太小,会让用户不易阅读。但是字体太大又会觉得整体不显精致,所以取其中庸而为之吧。一般字会依次使用16px、18px、20px、24px、28px ,是基于主标题、副标题、正文的关系以依次递减 的次序来设计的。

APP完整的UI设计步骤秘籍教程:UI设计的细节
N:效果

放手机上看效果往往要比在电脑上看到的效果来的准确,因为像素大小的不同,手机上更接近之后实现出来的效果,往往会是在电脑上看着可以的图放到手机上就是另一种感觉了,有时候会感觉不太协调,这时候再以手机为基准,调整出满意的页面就会更加的合理和美观,所以在设计页面的时候向公司申请一个测试机是非常有必要的。

APP完整的UI设计步骤秘籍教程:UI设计的细节
O:趣味

不管是客户端也好还是设计别的什么也好,趣味也是吸引用户来源的主要渠道之一,做的好玩了用户才会来玩,会惦记它,就像游戏一样拿人,一样去粘着用户。这些趣味点有时可以是小可爱,有时也可以是小恶趣味,总之能让用户会心一笑,那么你的目的就达到了。在壁纸客户端里,我们主张的是带一点恶趣味的小猥琐,让用户觉得既然你都这么猥琐了,我还怕什么呢。

APP完整的UI设计步骤秘籍教程:UI设计的细节

三、实际效果产生时期

当以上设计工作完成之后设计稿依次通过审核了,就可以进行第三个阶段了,这个阶段是决定你的设计是 否能被容纳并接受在实际的应用中,是这个产品由设计转变成实物的一个关键的过程,在这个过程中容易产生的问题是:

设计好的效果图,看起来是没有问题ok的,但是到了手机上却出现严重缩水或者与设计稿效果不符的现象,这里其实会与很多因素有关。比如说是设计师延误工期,使得研发的同事没有足够的时间来实现这些效果。比如说研发的同事对设计效果的敏感度不认同,认为某个效果是没有意义的,相反, 还会投入大量的时间来为了实现一个看起来没什么用处的效果,再比如说设计师希望达到的效果太炫了, 超出了这个产品存在的意义。

这些都是可能导致设计效果与实际效果之间容易产生不同的因素。那么为了避免和减轻这些问题的出现, 需要注意到以下几点:

APP完整的UI设计步骤秘籍教程:UI设计的细节
A:切图

是将设计好的客户端页面效果图在Photoshop里分割成小的图片元素,以便研发部的同事将其拼接,并实现成可通过触屏操作的,具有动态交互效果的客户端页面。

APP完整的UI设计步骤秘籍教程:UI设计的细节

需要将元素原像素的边缘,使用切片工具,分成一个个独立的方形区域,然后导出按钮功能把切片导 出来,背员要是透明出来的(如上图),导出储存为png格式的图。如果元素是发光的,则需要在最外面的像素再往外扩展一个像素,就可以确保光感的自然,而不会有被截断的感觉。总之,切图就是 一个将设计稿分解在重组的过程,如果切的不够细心也会影响到最终的效果。

APP完整的UI设计步骤秘籍教程:UI设计的细节

B:点九

这样写感觉会比较好记,其标准名称应该为*(文件名).9.png也就是以他的后缀名特点来命名的,是因为这个特别的后缀可以被识別为特别的用处。举个简单的例子,就好比你把iPhone短倌息页面很过来和竖过来的时候,顶栏会根据屏蓿宽度自动拉伸和缩短,这就是点九图的效果,他其实是为 了适配不同尺寸的手机屏幕里界面的统一性,而且又不会因为图形粗暴的拉伸而变得模糊。另一个重要性是他可以以一个很小尺寸的图片,通过程序实现为一个很大图片的效果,可以扱大的降低软件包的体积,让用户不会花太多的流量就可以很快的下载下来使用。相关的绘制与用法案例网上有非常多的方法, 在这里就不细细描述了,自己百度一下有图有具相。

APP完整的UI设计步骤秘籍教程:UI设计的细节

C:坐标图

坐标图的目的是让研发部的同事可以照图索骥,知道你的每一个零件安在哪里,光有效果图 是不行的,所以坐标图要的是精确,只要能够通过你绘制的坐标图准确的或者相似的把其摆在相对正确的位罝上了,就说明你的坐标图是没有问题的了,总之坐标图是检验设计效果与实际效果差距的唯一衡量标准。

D:大小

前面提到用点九会降低一个软件包的大小,这个也是很重要的,一个普通png图上面如果结构细节特别多,尺寸再稍微大一点,就可能接近10Kb大小甚至超过10Kb ,几个图下来就是100Kb了。 换个概念说,一个软件包一般保持在l.5Mb~2Mb之间会比较好的,这是壁纸客户端差不多的大小。

APP完整的UI设计步骤秘籍教程:UI设计的细节
E:引导图

引导图是在用户第一次进软件时出现的,用来介绍软件特点,和引导用户学习适应新的功能的图片。分为两种,一种是头部引导图,另一种是根部引导图。这个图一般导出存储为jpeg的格式, 图片质量—般降得很低,保证在每张图在60Kb以下。因为如果这个图不降低的话,导出的图片会非常大,很容易就会超过100Kb的。会大大增加软件包的容积,这个图只会用到一次的,所以没有必要导出太高清晰度的图片。

APP完整的UI设计步骤秘籍教程:UI设计的细节

F:命名

当你把客户端做到一定程度了的时候,你就会有上百甚至上千都亳不夸张的切图数量,你需要合理的分类来管理这些切图以及你的Photoshop工程目录。所以你需要从一开始就规划好你的工程目录和切图目录比如文件夹归类和文件名命名都是非常重要的,会直接影哬到工作效率,是非常重要的的一个习惯。

APP完整的UI设计步骤秘籍教程:UI设计的细节
G:效果

在当你将ui提交给下一个环节的同事去忙的时候,并不代表你的工作已经完成了,这个时候其 实才是你具正意义上最重要的环节,需要不停的跟进研发同事将设计的ui实现出来的对比改进,刚开始出来的第一版,肯定会有很多的问题,和种种的不如意。

这个环节的目的就是将实现出来的效果和你的设计效果图无限接近到你满意为止,就算完成目的了。这个过程大概是在临上线前一两天内完成, 绝不可以放在上线当天调整,不然就会你懂的。总之,这是绝对不可以的。当然在这个过程中有一些ui有的时候是无法按照设计的效果实现的精确到像素的,这也是很正常的,因为会有一些诸如程序方面的问题是不可避免的。或者有的时候因为临近上线,甶于需要调整的bug太多,就会把一些需要耗费过多时间实现的效果临时砍掉,也只能是忍痛舍弃,不过很多负责任的工程师都会帮你放在下一期中帮你实现出来。

H:协调

协调是这个阶段的主旋律。有的时候某些UI的切图按照常规的切法是无法实现的甚至实现起来 也是非常困难的,这个时候就需要和研发工程师协调,为了某个功能或效果的实现,怎样的切就可以方便的实现出来,这个沟通的过程也是必不可少的。为了最终的效果,必须时时刻刻的在身边,有时稍有松弛就可能漏过一个需要调整的细节,甚至是在上线大半夜的最后一刻,都有可能还在为一个点纠结,这个时候你就可以选择暂时放弃了,用日本的风俗讲就是退让的礼仪,也是一种协调的态度。

I:检查

到这里其实客户端差不多就快可以上线了,检查一下没有什么大问题的话,差不多就收手吧。。。。。。

四、风格永恒时期

风格永恒是指在你做完一个客户端发布之后,肯定会有诸多感慨和感触。对于上一个版本的发布之后,对 于下一个版本的迭代设计需求,你心中肯定已然形成了一套属于你自己的客户端UI规范,不用多说,对于: 按钮、字体、板式、布局和用色,你肯定已了若指掌心有所思了。

而此时需要注意的是不走形,做到风格整体统一但又若有不同,能把握住整体布局,在这整个笼框里找出 创意的那根线头。这样几次迭代下来,既不会显得老气的一成不变,又不会变的感觉越来越山寨,而是在有整体布局意识的前提下,每每更新都能够感觉到一些新意,感觉他是活着的一祥会呼吸,是伴随用户一 起在成长在更新。

不做大改动,只做小更新,一次一次的延续下去,最好的结果是无论谁做,一样的感觉却是不会变的,一个优秀的设计师是可以快速转变并适应不同风格的,所以在开始前,“入戏”很重要。

最后还要感谢能遇到一个对设计的品质同样有追求的产品经理,肯放手让设计师来做任何事:可以参与原型争论,可以根据设计调整原型,可以在过程中一同争论UE的认知,可以调整文案,可以查看数据,可 以阅读用户反馈,可以一起研究下个功能点迭代要加什么,可以在设计与功能的权衡上对设计的品质追求不怠,至少这种疯狂的态度,是让一个设计师所不肯善罢甘休的。也是壁纸客户端这个产品一路走来的原因。综上所述就是我对这个客户端所做的一些总结,希望能起到一些帮助和借鉴的作用,在接下来的客户 端设计中继续传承其中的精髓与动力,争取会做的更好。也希望以此为一个章节的结束,在新的篇章翻开 全新的认知与自我。



属性标签: ,

欢迎留言

页面生成消耗的时间 0.400 秒,此页面一共查询了 116 次数据库!缓存时间:2019-08-25 16:54:24你的IP为:35.173.48.224