UI设计都包括什么？

概念简述UI=User Interface，即：用户界面。UI设计，也叫用户界面设计，是指对软件人机交互、操作逻辑、界面美观的整体设计。

应用场景我们日常生活中所用到的：手机、电脑、电视、车载系统、iPad、ATM机、工业中控系统只要是带有电子屏幕的显示设备，都有需要UI设计。

实际意义UI/用户界面，就是我们：获取信息、调用设备资源、控制设备运作的一个可视化入口界面

设计职能UI设计的职能，大体分为4个方面。

二，互联网产品的开发流程是怎样？UI设计处在哪一个环节？

简要来说，一个互联网产品（或App）的开发流程可分为四个阶段：

调研与立项→设计与开发→测试与发布→发布与推广，而UI设计则处在第2个阶段。

调研与立项：确立产品需求文档（PRD），为UI交互设计做准备。通常由产品经理（PM）主导完成。

设计与开发：依据产品需求文档（PRD）→完成UI交互原型设计→完成UI的图形视觉设计→研发工程师技术实现（前端工程师实现UI图形界面的重构→后端工程师实现业务逻辑的数据处理）

测试与发布：团队全体开发人员协作，解决交互、视觉、技术上的bug，由产品经理把控质量、协调时间，确保产品准时上线。

发布与推广：多渠道、多方式、多媒介、的投放广告，让项目产品触及目标客户。

最后的环节就是，持续的内容运营输出，提升用户活跃度、拓展目标人群。接受用户反馈，持续优化产品体验，迭代更新。

三，UI设计师（图形设计师）的主要工作内容有哪些？

我们通常所说的UI设计师，大多是指GUI图形设计师，主要工作内容就包括：图标制作、APP品牌制作、界面设计、切图标注、推广运营的活动页面、banner制作等。

在互联网产品开发的实际工作中，上游和你对接的是产品经理（或者交互设计师）；下游和你对接的前端工程师。所以，你通常是根据产品经理出具的交互稿，做UI界面的图形视觉设计。这就要求你能看懂交互稿，懂一点交互知识是最好的。

在做完UI界面的视觉稿后，UI设计师将其标注好，再交付给下游的前端工程师，用作界面重构。必要的时候，设计师还可能会要用一些UI动效，去阐明设计师的设计意图，所以懂一点UI动效设计也是一个加分项。

四，做UI设计，要用什么软件？

UI视觉设计的主力软件其一是Photoshop。无论是图形设计、还是图像处理Photshop都能胜任，这是UI设计师必学一款软件。其二是Sketch，目前仅支持Mac电脑，可作为选学。

UI交互设计的主力软件其一是Axure，其二是诸如Adobe XD、墨刀、Sketch软件，市面上的交互设计软件非常之多，你要选择哪款，这就看缘分了。

UI动效设计的主力软件是After Effects。还有就是上面提及的交互设计软件，不过只能应付一些简单的页面转场切换动画的交代，但并不适合用来制作增强用户体验的GIF，比如loading、下拉刷新的一些趣味动画，不如AE制作出来的帧动画效果细腻。

意见反馈是几乎所有应用的标配功能，往往藏在“设置”或者“关于”里面的小角落。意见反馈在产品开发中的作用是不能忽视的，这几乎是所有应用最好的用户意见收集入口，但是不同应用对意见反馈的处理各不相同。最近在做反馈系统的梳理工作，也包括意见反馈页面优化，将这一段的分析整理成此文。

本文仅仅分析常见应用意见反馈的不同形式，并没有展示意见反馈的优化设计方案。需要讨论者请私下联系。

0邮件型

很多国外应用和国产老牌应用的用户反馈方式都是：点击“反馈”按钮 >> 进入邮箱服务 >> 自动填写收件人和一部分正文内容（机型等信息） >> 用户补全信息 >> 发送邮件。

邮件类的设计思路应该来源于投递举报信，在开发者和用户没有那么多沟通途径的时候，邮件是不错的选择。再加上一定的过滤和筛选，通过邮件来管理用户反馈也能在一定程度上提高效率。

邮件类的劣势在于，国内大多数用户对于邮箱（特别是手机端邮箱）的使用熟悉度不高，大多数邮箱应用（特别是android系统自带邮箱）的界面不友好。因此本类不做深度讨论，面向国内人群的应用也不建议采用邮件类的反馈方式。

1原始表单型搜狗输入法

表单类实际上是邮件类的升级：

（1）不需要填写发件人

（2）通过修改表单格式，相当于固定了邮件正文格式，更方便管理

但是表单类也存在问题：

（1）开发者很难和用户直接沟通

（2）表单填写过于复杂

讨论具体案例：

搜狗输入法的意见反馈是最标准的反馈表单：

（1）反馈内容（必填）

（2）****（选填）

（3）附件（搜狗是词库，其他应用还可以添加截图等）

相比邮件的形式，表单类形式无疑先进不少。但原始表单类仍然有以下问题：

（1）填写仍然是一个高门槛的操作，反馈内容的编辑自由度如此之高，那么用户一定会反馈一大堆“垃圾”、“不好用”等评价

（2）****选填，就意味着仍旧联系不到任性不填的用户，当然能获取到用户手机号的话另说

（3）表单类的意见反馈是面向开发者的功能，不是面向用户的

（4）需要人工审核每一条意见反馈，不便于定位问题

本来意见反馈的作用就是开发者收集用户意见，便于后续迭代。因此本文将优先讨论意见反馈面向开发者的功能。

为了方便开发者收集用户反馈，表单类进化出各种形式：

2分类表单型网易云音乐

网易云音乐讲问题分为三大类：产品建议、程序错误、缺少音乐，分别对应产品、开发和音乐库。可以想象网易云音乐对这三类反馈的处理方式：程序错误类有反馈就解决，产品建议一周一评估，参考其中有价值的意见，缺少音乐类型的建议可以作为版权投资的指导建议。

但是对于用户量更大的产品而言，这种分类可能仍然太粗线条了。以程序错误为例，播放过程中程序闪退和界面显示bug就是完全两类问题，网易云音乐的反馈处理人员需要手动筛选才可以。

对于中小型产品，每天用户反馈数目不多，产品经理只需要定时查看一下用户反馈就可以了。对于大用户量的产品，一天的反馈数目可能成百上千条，反馈内容涉及不同产品线，对应不同的产品经理，如果只有一个人处理反馈，按网易云音乐这种粗略分类的方式，该员工可能要花数小时才能将一百条意见筛选、分类、递交给不同产品组。

为了优化该流程，有一些应用会提供更细分的问题分类。

31 细分表单型360手机卫士

360手机卫士列举了九个主要问题类型，其中前七个类型应该来源于历史反馈最集中的几个问题。

点进“手机卡慢”的选项，手机卫士还会给出一些手机卡慢的解决方法。当然大段的文字描述不是好的交流形式，但至少比网易云音乐更进一步，希望在用户反馈之前，先帮用户解决遇到的问题。注意第一页最下方的绿色小字，360安全卫士提供了“常见问题及解决方法”，这就是从用户角度出发，对意见反馈的改进。不过考虑到大段的纯文字描述和移动端体验糟糕的论坛原帖，该处仍有很大的优化空间。

这也提醒我们从用户角度来分析意见反馈。从使用场景来分析，用户在什么情况下会进入意见反馈页面。用户主动进入意见反馈页面有两种主要可能：

（1）使用过程中遇到某种不便，又不至于卸载该应用，遂进入意见反馈寻求帮助

（2）使用过程中得到极大愉♂悦，向开发者表达感谢

在日常工作中，表达感谢的用户反馈数量极少，用户更习惯在社交网络上完成表达感谢的工作，还能顺带秀一下自己使用优质应用的优越感。

当用户遇到不便时，用户的需求有哪些？按我的理解，优先级从高到低排列分别是：

（1）寻求解决方案

（2）发泄情绪

（3）反馈报告

对于用户而言，某个或者某些功能难以使用的时候，首先想到的就是“那群傻X开发者赶紧优化这功能啊”，言辞之中自然带有发泄情绪的色彩。除非给与用户一些物质奖励，否则反馈报告对于用户而言几乎毫无价值——得不到开发者任何反馈不提，用户遇到的麻烦甚至不知道什么时候能够得以解决。总之对于用户而言，这种情形下得到帮助的需求远远大于反馈问题的需求。

32 帮助反馈型百度手机助手

百度手机助手将帮助的功能放在极为明显的位置，用户点进帮助与反馈的页面，发现里面绝大部分的区域是常见问题及解决方案，只有点击上方“我要反馈”按钮时，才会进入原始表单型的问题反馈页面。

在考虑用户发泄情绪的需求，与其说让用户发泄情绪，倒不如说安抚用户的情绪。用户心情平静下来，相对而言就不太会反馈一下“垃圾”“不好用”等无意义的话。

4情感化设计型享应

享应是我一直很喜欢的一款应用。除了很方便发掘优质应用以外，享应的设计和交互细节也做得很棒，而建议反馈页面更是给人以惊喜。

个人觉得很多开发者进入一个误区，情感化设计就等于卖萌耍贱。以享应为例，使用这种体验优质的应用的用户素质也不会低到哪里去，用户来反馈问题往往也是真的想反馈什么问题，相对来说纯吐槽的比例会小一点。但是对于其他应用，类似于悬浮窗、常驻通知栏、广告等对用户造成打扰的功能功能，甚至是涉及到支付等财产相关的问题时，卖萌耍贱就显得开发者不那么专业化，反而会造成负面影响。

以微信为例，这种面向普罗大众的应用，就不能用卖萌耍贱这种往往只有年轻人会接受的方式来进行设计。大家还记得“点赞太容易，当面夸太难”这句文案吗，当初看到的时候几乎泪目。这就是走心的设计，是从普罗大众都会使用的功能点切入，引出另外一个普罗大众都会遇到的社会化问题。这种情感化设计就是神级的情感化设计。惭愧本人曾做过一段文案编辑，写下无数的卖萌耍贱的文案，但却从来没有写出过走心的文案。有时间单独谈谈本人对“点赞太容易，当面夸太难”的理解。

在我做出产品优化方案之后，同事提出了一个非常好的意见，他建议把情感化设计应用到收集****的地方。比如用漂亮小姑娘的头像来诱骗用户留****等等。可惜在现有的设计上这样添加可能会导致页面排布比较混乱，丢失重点，如果有机会重做，一定要把这一点考虑进去。

谈到微信，就不得不说一下微信的意见反馈。微信的意见反馈是我体验过的产品中，交互最多、流程最长的意见反馈。

5选择型微信

微信把各种问题提炼出关键词，通过三步选择，进入最后的问题描述。这种方式好处就是问题定位比较准确，运营人员的工作量肯定大大减小。

但是，我们要考虑用户使用场景。什么情况下用户会使用意见反馈功能？是他遇到某个功能不方便，一肚子怒气，找到意见反馈进入喷子模式。也就是说，用户在进入意见反馈之前就几乎已经想好自己要反馈什么内容了，用户本能需要的是一个输入框，而不是阅读大量的文字进行选择。

同时，选项的方式更适合对现有问题的优先级排期，文字输入更容易发现新问题。

微信有先天优势，用户不需要单独添加****了，微信号很方便就能获取。另一方面，有很多自带IM的中小型产品，会将意见反馈以官方客服号+IM的形式结合起来。

61官方客服型SAME

62官方客服型新浪微博

新浪微博的用户反馈相当于在对应话题下发一条微博，虽然无伤大雅，但是我觉得蠢爆了。一来里面带的一些信息我不太希望别人看到，二来这样一条微博插在我的微博流里面也怪怪的。不知道微博作何考虑。并且这种方式效率几乎等同于原始表单型，为什么微信就算有微信团队的官方号，也没使用它作为主要的反馈渠道，应该就是出于处理效率的考虑。

官方客服型的优势是显而易见的，就是方便开发者联系用户。顺着用户说的第一句话，交流自然而然发生。缺点也很明显，就是运营人员的工作压力会很大，相比原始表单型，运营人员除了要收集数据以外，还要承担大量的沟通用户的工作。

71偷懒型数字尾巴

72偷懒型36kr

我原以为数字尾巴这种直接放一个论坛页面就是挺偷懒得了，没想到36kr甚至直接放上去了自己在firim的页面，上面甚至找不到反馈入口。博君一笑。

8交互篇360手机助手

上面的分析仅仅针对样式设计讨论，没有针对交互讨论。对于简单的表单型或者IM型意见反馈而言，交互不过就是点击反馈按钮 >> 进入反馈页面，但是对于一些需要对问题进行分类的意见反馈而言，交互就很重要了。

以360手机助手为例——

作为国内最大的应用市场，360手机助手的用户反馈竟然是这个样子。除去老旧的界面风格不提，其中最值得吐槽的点一共有三处：

（1）****，共提供qq/手机号/邮箱/MSN/旺旺/飞信七种形式，但是实际上除了前三种，后面四种使用人数微乎其微，并且这里还需要用户手动选择一下。正确的做法应该是只留下手机/qq/邮箱，并且不需要用户手动选择，由运营人员人工识别。

（2）设置分类，这种形式必然导致大部分反馈集中在“默认”分类里面，设置分类形同虚设，必定大大增加了运营人员的工作量。

（3）清除，直接点退出就好了，这属于设计的冗余点，虽然不算严重槽点，但也不排除误触。

这个页面除了输入以外，用户需要进行的操作非常之多，违背了“一页只做一件事”的原则。

同时，该页面提交反馈以后，下一步显示的页面是首页侧边栏，同时toast提示“反馈已提交”。

我认同一个设计方法，就是用户在执行每一个操作的时候，实际结果要和心理预期相近。因此提交反馈之后突然跳转到首页侧边栏的作法，在我看来是非常不好的。当然这是体验层面的工作，无伤大雅，但是用户真的会有错愕感。对于一个用户量级非常大的应用而言，体验问题就不像凭借创意和功能门槛的小产品那么优先级靠后，产品人员要认真对待每一个造成用户负面心理的细节。

个人认为，提交反馈之后，要么跳转到自己的反馈列表，要么弹窗询问继续反馈/回到首页，都是不错的选择。

-----------

总结

综合各种形式，结合细分表单型方便运营人员归纳整理，和客服型方便进一步沟通的优点，以细分表单型作为反馈入口，反馈成功后把该反馈工单作为一种消息形式，插入到官方客服的对话当中去，应该是效率最高的方式。

但是考虑到应用的用户量、开发成本等等，对于中小型用户量的应用而言，简简单单采用常规样式就足够了，例如友盟等第三方服务也会提供很方便的IM形式的反馈工具。

怎么设计WEB登录页面，让页面不平庸

用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用户体验,拉近与用户之间距离的兵家必争之地,本文不谈趋势,不讲交互大道理,不涉及技术,就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验,安东尼·德·圣-埃克苏佩里曾说过,“完美就是多一点则太多,少一点则太少。”Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。

精致的质感表现

iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求,细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。

iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。

小清新的插图

在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力,

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达

设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。

越来越大的登录框

越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且一反常态的可以看到自己的密码,第一次在WEB登录框里见到这种设计,非常贴心正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单

WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单堪称典范。

参考:

如何设计APP的登录页

登录页的设计开发需要先列出一个流程的操作,在根据设计流程开发出登录页。

移动应用分类:

直接使用的功能应用,属于工具类型的。

非强制登录

主要是一些资讯、生活类应用,第一次启动的时候既可以选择立即注册,也可以选择不注册,直接进入主界面,用户无须登录可以使用部分功能。

这类应用具有很强的个人隐私熟悉,为了用户的安全隐私保护,需要强制登录。

登录页面设计流程:

先选择登录的模式。

整个界面背景填充颜色。

多效果混合模式。

选择的填充。

视觉设计前先理清楚界面的逻辑,界面中每个元素的点击从哪里来到哪里去。App因为产品账号体系不同的,所以有各种登录注册方式。登录注册有四种方式。每种方式可以采用不同的形式的背景图设计。第一点:了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻,听听歌,看看**,聊聊八卦之类):

这类的解决方案是设计的app最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群:比如找地图,看天气,查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群,用来打发消磨时间的:无需求,漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西,帮助客户来打发消磨时光。

第二点:app原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的app原型图工具:移动app原型设计神器pop、axure、foreui等

第三点:app视觉设计与设计要点

(1)大概设计板块有app启动页面设计,app界面设计的尺寸规范,app图标设计等

一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。

另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。

所以,设计师必须用减法设计,这个过程需要花时间思考、简化元素。

你必须记住:(1)隐藏设计或者减法设计(2)分区或分类(3)帮用户做决策(4)提高交互创新设计(5)让人有爽快感和新奇感(6)在设计中浸入情感,把握用户的心理。(谈谈如何进行产品设计以及产品情感化设计)

一位大师这样说过“真正的简约设计是:作品必须不断的被简化,一改再改,直到设计最终成形。”

2014年app设计风格趋向扁平化和卡片化。卡片,扁平化都会是移动app设计的趋势!认为卡片设计确实同时兼具了“拟物”和“极简”2种优势!

第四点:app界面设计流程

(1)设计app界面时,学会从优秀app界面设计作品中寻求灵感,以前的艺术大师,用少量的资源做了大量的设计。

(2)放下工作,休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作,带着全新的眼光工作,比长时间冥思苦想更有

(3)并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存,对比两个版式就能很快分清孰好孰坏。

(4)由于实物展示的相对比例至关重要,所以要及早在不同的目标设备上测试。

(5)整个设计过程中不断问自己“真的需要吗”。支撑项目时候,找一些讨巧的办法,例如,添加一些有趣的元素、样式会这样会很容易也会很吸引人,但必须始终注意剔除不必要的元素,不断精简。甩掉你费尽心血的部分总是难以割舍,但修改过程必须挑剔。

第五点:app界面设计测试与预览修正

设计完成之后,我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具:快速在移动终端上预览app界面设计效果图的方法最后:好的app界面设计作品必然是要经过不断升级、重复迭代的。

常见的几种网站设计风格

极简风:

越少,越经典“这是不少设计大师遵循的设计风格。

“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。

除非必要的信息,页面中每增加一个元素,都会引起用户过多的小,甚至成为用户完成目标任务的阻碍。

极简设计的好处就在于它能最大化节约用户的时间成本。

无边框风:

这里的边框是指任何类型的装饰性容器。

通过去掉装饰性的容器,加强基本内容的设计感。

提升质量和排版布局,从而改变整体因无装饰性容器的视觉表现。

插画风:

除了使用大量作为背景或主体元素外,

图形插画的运用也是一种很好的方式。

网页Banner可以运用插画来表达网站主题,同时加上插画图标的点缀,使网页看起来清新有趣,加强网站本身的独特性。

扁平风:

扁平化设计可以说是时下最常用的网页设计风格了,它弱化了材质、渐变、阴影,去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑,提升了网站内容信息的视觉层级,更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。

3D风格:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。

纵向分割:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境,而是那些运用少量3D效果使整个网页显得更加灵动,通过扁平化的基础上,添加一些生动的非扁平元素,给网站带来了原本缺乏的纵深感,同时提升主体视觉吸引力。

塔罗牌，由“TAROT”一词音译而来，被称为“大自然的奥秘库”，它是西方古老的占卜工具。

中世纪起流行于欧洲，其起源一直是个谜。塔罗共78张牌，其中大阿尔卡那牌22张，小阿尔卡那牌56张，可分别使用进行占卜，也可将78张混合共同使用进行占卜。

值得一提的是，塔罗牌并非指固定的一种牌，实际上塔罗牌种类繁多，至少也有上千种，但它们其实大多数都是由世界三大塔罗体系为蓝本延伸而来的。

简约是一种信仰

　　简单，而不失约法，此谓简约

　　2007年，仅有9个按键且无复杂变焦功能的Flip摄像机意外红，巅峰时占全美摄像机市场份额的1/5以上;更早一点，容量仅有140个字符Twitter和follow机制成功在重博客盛行的年代打开了一扇天窗，间接开创社交互动时代

　　至此，优秀的产品设计开始更多地关注核心，删繁就简。简约至上的设计之道，是以用户为中心的一种信仰。

1、从认识“简单”开始

　　正确的简单

为谁设计

对于用户，要记住三点：

　　① 关注主流用户，投入产出最高。

　　--专家用户不是典型用户，不能体验主流用户遇到的问题。以他们的意见来对待产品设计，容易跑偏。专家用户想要的功能往往会吓到主流用户!

　　② 用户群不会“升级”，不要以为使用产品久了，普通用户会变成专家用户

　　--因而设计产品时，不能存有侥幸心理，以为果断时间用户就能掌握更多

　　③ 不同类型用户对技术所持的态度与他们在使用产品或服务上花费的时间相比，前者对他们的影响更大

　　--设计体验简单的产品比复杂精致更能带来长久的愉悦。

　　主流用户的需求

　　① 随时可用性，不需要复杂的自定义设置。产品在初始安装、重启、切换等情境下都可以最快速进入工作状态，立即提供服务。

　　② 容易操控，有适当的容错率。例如：常见于移动端网页设计中的大按钮、手游的非固定式虚拟摇杆等

　　③ 准确的反馈与合适的结果

　　④ 引导性和示例性的指引(文字、声音等)，尤其是初始使用时。

　　最后，不要指望教会用户多少东西，在压力面前，用户容易忘记所有知识，所以要时刻关注用户，在所有常用、必要的场景给以足够的关怀。例如：下图是常见的404问题页面设计。下图的页面内容显得非常专业，基本让用户了解问题来龙去脉，但是真的需要这样吗大家都读得懂吗显然上图中的处理更加简约而且易用性更强，当然也包含了情感化设计的元素在里面。

                       

什么是简单的体验

　　越是简单的体验，就越是极端的目标。

　　

2、简约四策略

　　确立的简约设计的基本逻辑之后，是具体操作的策略。在酝酿阶段抑或高速成长还是成熟的产品，都可以通过简约设计的四种策略来审视和打磨。

　　下图是经典的遥控器简化案例，可以看见四张图分别采用了“删除、组织、隐藏、转移”的策略去遥控器的优化。

                     

删除

　　Tumblr和Twitter的成功，相比至于功能更全面的WordPress，体现了“删除”的魅力。传统观点认为，功能越多，能力就越强，用户就越喜欢，而事实上，每款划时代的产品，恰恰是专注某个点的“单品”。

　　少即是多。

　　删除杂乱的特性可以让设计师更专注于把有限的重要问题解决好。

　　删除不是随便将认为是多余的功能去除就完事了，而是有一套完整的方法论。

产品增加的价值始于改进核心体验。与新增功能相比，客户更关注基本功能的改进。删除策略的第一步就是先找到产品的核心。注意，这里不是删除核心，恰恰是要作为保留的重点和其它次要的功能区别开来。

　　

删除残缺功能容易陷入“沉没成本误区”，唯一的判断标准是：保留该功能能获得多少收益，付出多少成本。

　　

　

删减文字：

　　① 删除引见性文字“欢迎光临等”

　　② 删除不必要的说明

　　③ 删除繁琐的解释

　　④ 精简句子：去掉介词

　　使用主动句、减少无意义的废话和开头

　　删减视觉元素：

　　① 使用空白或轻微的背景色来划分页面，不要使用线框

　　② 尽量少使用强调

　　③ 控制信息的层次，不要多于3层

　　④ 减少元素大小和形状的变化

　　删除选择分支：

　　① 尽量减少给用户的决策选择，例如在电商平台购物结账时候，页面应该去掉无谓的导航链接

组织

　　把产品的功能和页面元素按照既定的规则进行分类，然后重新组织，按照模块进行排列和展示

　除此之外，设计师在完成方案之后，还要反复测试流程，寻找设计过程中的那些“自以为完美”。例如：公园里、花园里虽有设计好的大路，却依然有不少人们自己踩出来的捷径，很明显这些设计好的大路不能满足人们的需求

隐藏

　　隐藏，是为了更合理地布局，让出有限的空间给更重要的功能，而非说隐藏就是删除不必要功能的开始。隐藏意味着在人与功能面前设置了障碍，一般是对于不可删除、且使用频次较低的功能。例如：网站上的个人设置功能。

　　其核心要点为：彻底隐藏，巧妙出现

　　隐藏策略使用时，需要注意：

　　① 渐进展示：功能弹出来时候，首先显示主流用户使用的核心功能，再提供选项给专家用户选择使用扩展功能。

       ② 适时出现：iOS输入框里面长按不松开会出现放大框放大当前输入的内容。　　

      

                                  

③ 提示与线索：供用户可以有逻辑地发现被收藏的功能。例如：PS里面的工具收纳。

转移

　　转移，是将功能和元素从本产品向其它其它功能、产品、用户转移的策略。

　　① 跨平台：常见于遥控器-智能电视的设计，将导航和选择功能从遥控器上解放到电视上，使输入输出更加方便之光。

　　② 产品向用户：将更多选择权交还给用户，避免产品功能被固化

　　③ 用户向产品：提供更多自动和智能功能，例如：在微信里面可以自动长按手机号码类似格式的数字会自动弹出拨打or录入通讯录的提示。

　　除了“删除、组织、隐藏、转移”四种策略之外，简约设计还需要关注设计细节，例如：早期的地图APP导航虽有地铁线路导航，却会缺少方向，会导致用户使用起来遇到麻烦。除此之外，简约的体验还应该留给用户更多的体验和想象空间。让产品成为完成他们生活一样工具，而非过度占用大脑空间的冗余。

分享一下我自己对于2017年设计趋势的观察。我会谈到以下5点：

微交互将会大量主导产品设计细节

平，却不再那么平了，颜色，字体和质感将成为设计师追捧的视觉利器

The internet of everything真正崛起，将增加设计的复杂度

人的距离将会无限被拉近

触觉声音3D，我的五感都可以有交互

阅读时间大约5分钟。

微交互将会大量主导产品设计细节

微交互这个概念其实早在2013年底就被提出了。Dan Saffer作为对我影响很大的设计师，他的书一直是我推荐给学生的必读之一。这个概念被提出后，Don Norman亲自回信提出好评。于是微交互，一下子成了个挺那么火的buzz word,设计师们都要赶个潮流，没事提一句两句的。

△ 原图来着自作者官网，为引用Don Norman点评文章的截图。

可是我们其实忽视了，在原书标题Microinteractions之后提到的一句话: Designing for details 微交互，不是只在小范围收到空间时间概念限制的交互，而是细微的，细节的，有人性化的交互。

为什么这个概念被提出了四年之后，我还老生常谈的说它要火了呢。因为我们正在进入一个信息复杂度超越以往任何年代的纪元。人脑能处理的信息，是有一定维度的，从今往后我们设计师要做的，不仅仅是考虑用户的使用体验，更多的是使用设计为用户所接触到的信息进行“降围”。而做到这一点的方法，就是通过细节对于用户进行引导。至于具体怎么做，可能可以写好几篇连载专门说，本文还是着眼于“预测”这个点，如果大家都对这个话题感兴趣可以留言，我会回来再多写几篇~

平，却不再那么平了，颜色，字体和质感将成为设计师追捧的视觉利器

其实这也不是这一两天的趋势了。你看看Gradients(渐变色)，不是火了去年整整一年了么。但是仅仅是渐变，怎么能满足设计师挑剔的要求呢。这一年里，Medium上面，层出不穷更是各样的文章表示现在是终结纯扁平化的时候了。

去年著名的Asana Redesign,巧妙的大量使用了Gradients，谁说B2B软件不能设计的很有趣？

喊了一年了，我认为时机应该差不多了。现下很多视觉方案，已经在努力突破扁平的桎梏，向着更有意思的趋势发展起来了。比如大字体，强对比，新的iOS 10阴影等等。毕竟，审美会疲劳，而用户面对如此大的信息量，我们要在平中寻找一个突破口，帮助用户走出信息过载的挣扎。这是对于视觉设计，排版，字体研究等的真正考验。

The internet of everything 真正崛起，将增加设计的复杂度

有一句特别喜欢的话，翻译过来是说：现在的科技能管到你的茶壶么，连了网就行。（Is IT in charge of the coffee pot If it has an IP address and connects to the network, it might be）

△ BI Intelligence给出的IoE的发展趋势预测

物联网，O2O根本都不是新词汇了，中国说实话比美国做的还要好。可是实际上，所有一切都联网了么？并没有。但是看看现在的智能家居，各大平台都在叫嚷要做AI也要做VR。也许真正的IoE还不会在短时间之内真正做到普及，但是在这个概念先行设计紧随其后的时代，做交互的我们，应该快速的适应现在的技术将延伸到生活的方方面面，我们今后的设计不会再简单的是个登录页面，而是你连接实体和虚无的高复杂度抽象交互。

人的距离将会无限被拉近

三年前在带领GoToMeeting Web项目的设计时，尽管拥有百万用户的我们，在当时其实还是感觉真正的远程办公还离我们很远。虽然号称硅谷的会议都是这样的，大量的人都在家办公，但是硅谷的小伙伴们扪心自问，这些机器人真的解决了我们工作中的沟通问题了么？

作为设计师的我们，其实应该感谢无数工程师的努力，技术的革新，使得我们的很多设计理想都成为了现实，那么下一个即将实现的梦想，就是人和人之间的距离，将会越来越近。不是靠哆啦A梦的任意门，而是更稳定的沟通桥梁技术，和我们在设计中引入的情感和思考。新的iOS 10 iMessage，也许你还没有适应那些新功能，但是这其中注入的情感化设计元素，一定是今后我们打开距离这道门的利器。

触觉声音3D，我的五感都可以有交互

苹果发布了Haptics Feedback（触觉反馈，即3D touch），褒贬不一。其实haptics已经存在很久了，早先Bill Buxton 就提出了”hands on = finger on”的说法。只是触感的使用，很多时候还都存在于所谓的Direct Manipulation中，很少被用来直接给出Feedback。

△ 其实鼠标就应用到了Haptics技术，说起来也没有那么玄幻。

但这个契机，也许真的能够成为触感交互的起点。毕竟，语音交互出来了这么久，很多时候我们还是停留在调戏Siri的高度，而美国很多家庭已经用上了Amazon的Echo机器人。新的技术，需要点时间来被接受。现在的很多研究热点，包括这些不同感官在VR中的应用，我觉得对于我们交互设计师来说，全面的能力和扎实的理论功底可能逐渐会变得越来越重要。

不难想象在不久的将来（也许是很久的将来，毕竟过了这么多年3D打印还没真做出当年号称那个名堂呢），我们的各个感官，都能有了具体刺激的交互，感觉无数行业会因此而大大受益。

至于这一切对我我们设计师来说，意味着什么。我觉得是更大的机遇和挑战，毕竟福布斯都说了（Forbes Welcome），2017年，UX的重要性将会大幅度上升。庆幸自己在这个行业，能每天做出那么些微薄的贡献，让很多互联网用户的生活，简单愉悦那么一点点。

随着2020年互联网电商行业的迅速发展，UI设计也被推上了风口浪尖。想要学习UI设计的小白肯定都充满着这样的疑问：UI设计用什么软件？今天涂尉尉来给大家解答UI设计用什么软件这个疑问。同时分享一些UI设计的软件工具。

学习UI设计的基础就是在掌握设计规范的同时，还要熟练运用多种软件。看着市面上的Adobe全家桶以及各种各样的软件，是不是感觉有点茫然呢？别怕，尉尉在这里主要总结一下UI设计常用的5款软件：PS、AI、AE、Axure/墨刀、XD/Sketch。

UI设计用什么软件？

一、PS软件

PS软件在UI设计工作中主要用来做UI设计、界面设计、图标设计、处理。

二、AI 软件

AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计。

三、AE软件

AE软件在UI设计工作中主要用来做动效设计。

动效设计可以将原本静态的图形、以更加直观的形式表现出来，所以，UI设计师对动效设计的掌握也是必要的。在设计过程中，除了必要的交互动效设计以外，AE还会运用到动效设计稿中，以达到开发团队对产品的一个清晰认知。

四、XD /Sketch软件

Sketch和XD这两款软件的功能是差不多的，都是用于UI设计中的图标设计、原型设计。主要区别在于：Sketch主要用于Mac系统，XD主要用于Windows系统。对于想要学习UI设计的小白而言，比较推荐XD软件。XD是一款专门为UI设计量身定做的一款软件，简单上手，并且工具不多，因此做图会非常快。

五、Axure/墨刀

Axure和墨刀的功能同样是差不多的，都是做原型图设计的。什么是原型图设计呢？原型图设计简单来说：是一款产品成型之前的一个简单的框架，就是将页面的排版布局展现出来，每个功能间的交互，使产品的初步构思有一个可视化的展示。

在工作使用中Axure的用户多面向于产品经理，墨刀多面向于UI设计师，不过二者并没有本质上的区别，学习中任选其一便可。

经过尉尉的整理，是不是对UI设计用什么软件有了一个初步认识呢？在有了一定的认识后，去掌握它们才是重中之重。因为在UI设计中，软件是基础中的基础，只有在熟练的软件基础上，我们才能去设计出好的产品。

更多关于UI素材及课程相关，关注@涂尉尉！！