UI设计师是混哪一块?要做什么?图文结合详解

UI到底做什么,要从UI接到的工作流程来说——产品/交互/设计。也就是说一般我们接到的是交互稿。

这时候UI看到一个交互设计,需要考虑的是:

1、这样的排布是否合理(比如960的屏和1136的屏幕是否都可以容下足够的设计关键信息)

2、信息重点在哪里?

3、用户人群是哪一类?

等等分析都是自己的事。另外,通常我们拿到的交互稿是这样子的:

产出却要求是这样子的:

那么这中间的坑和鸿沟就是我们自己填。

在解决完上面的问题后,我们开始着手UI设计:

1、从产品需求入手,考虑我们到底要用什么主色调

比如同样是团购,糯米用的是桃红色,而美团是翠绿色。那么我们在UI设计的时候首先就要考虑主色调的问题。

2、配色和辅助色用什么颜色

在考虑到产品气质和品牌色的同事,我们经常要考虑配合衬托产品主色调的辅助色。在不同的产品中,辅助色运用的策略是不同的,比如我们经常说的:邻近色、对比色等。都是我们选择辅助色的方法。

3、用什么风格来表达

现在来说,说到风格一句话,扁平风。但是在扁平中也有区别。比如下图,同样是扁平。但是左图微微带有一些光影,而右图是纯扁平。你能说哪个好或者不好吗?不能。

同样的信息,在UI的表达上也有不同的表达方式。那么只能在具体你的UI设计中去考虑具体你需要用什么风格。这些都是UI的工作内容。

4、图标化成什么风格

同样是设置、发现、首页,不同的app在基本结构一致的情况下也有很多细微的差别。倒是是要用圆角的icon、还是直角,是用面还是线形,这背后的设计语言逻辑是什么,设计目的是什么。都是需要UI设计来考虑。

比如:同样是腾讯的产品,手Q和微信的icon就完全不一样。其原因是由于产品面面对的人群不同,手Q更偏年轻化。同样,你去看陌陌、来往、易信的聊天icon也是不一样的。这都是需要UI设计师一点点抠细节的去画出来的。

5、如何表达情感化设计

在一些细节页面我们常常要考虑情感化设计,以此来提升app的品质,降低用户在异常情况下 的挫败感。同时好的设计师还会考虑到如何引导用户去解决,从而满足产品诉求。不同的产品在做情感化设计的时候方式方法不同,风格也不一样。这些也都是需要UI设计来处理的。

6、动效如何做

因为手机交互是动态的。所以我们如果可以用在一些跳转页面引用动效设计,无意是对整个app加分的好方法。

原图来源于 http://wuweiguo.lofter.com

7、万年的大头疼图标icon

一万个人有一万个答案,那么具体怎么做,还是要考虑用户、场景、需求等细节。产品可以提供方向,但是具体的落地还是需要UI设计师来完成。

8、适配、切图

也算是万年话题了。你不是做个好看的东西,要能用,开发要能开发。你要考虑iphone456,还要考虑不同的安卓720/1280/1920,甚至有些公司要特殊考虑某些屏幕。

在某些小公司,UI要肩负和产品一起考虑交互的问题。这时候经常需要UI在自己储备足够的视觉设计能力的同时有良好的交互设计能力。

原文:jianshu

时间: 2024-08-27 03:47:16

UI设计师是混哪一块?要做什么?图文结合详解的相关文章

有了Openvswitch和Docker,终于可以做《TCP/IP详解》的实验了!

所有做过网络编程的程序员,想必都会看<TCP/IP详解>卷一:协议 后来出了第二版,但是由于第一版才是Rechard Stevens的原版,本人还是多次看了第一版. 对这一版印象最深的就是下面这个拓扑图 书上的很多实验,都是基于这个图做的,看了实验结果,很多理论才有真实的感觉. 看这本书的时候,不尽感慨Rechard Stevens的天赋英才,他能够利用工作中当时少于的实验环境,做了大量的实验,写出了普惠程序员的这本书. 可是除了看书中的实验结果,如何能够模拟这么一个环境,也动手测试一下呢?

less可以做什么?less详解!(less嵌套选择器实现纯CSS二级导航)

前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,与之配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言,拥有函数式变成的特点,主要优点就是高效.主要适用于包含众多CSS的大型项目.主要体现在:项目公共样式的定义,如页面主色.固定数值(宽.高.时间等).公用样式模板.封装省略浏览器兼容前缀的函数等. 1.less的两种使用方式 1.1 直接调用需要引入less.js,和less样式文件,需要注意的

整合Spring时Service层为什么不做全局包扫描详解

转载:http://blog.csdn.net/s740556472/article/details/54879954 一.Spring和SpringMVC的父子容器关系 1.讲问题之前要先明白一个关系 一般来说,我们在整合Spring和SpringMVC这两个框架中,web.xml会这样写到: <!-- 加载spring容器 --> <!-- 初始化加载application.xml的各种配置文件 --> <context-param> <param-name&

UI设计师晋升之路,看懂的都是精英!!

UI设计师(http://www.sz-sztl.com/news/)的晋升分为四个阶段:初级UI设计师.中级UI设计师.高级UI设计师.设计总监,在这里分享一下设计师每个阶段都需要掌握的一些技能. 初级UI设计师:是指一些刚入行的没有任何有关设计工作经验,像这个设计师需要精通Photoshop.Illustrator.CorelDRAW.Dreamweaver等设计软件操作,擅长创意.策划,具备较强的美术功底和审美能力.初级UI设计师在公司主要是做设计助理/设计杂活/切图等工作,对上级下达的设

UI设计师晋升之路,看懂的都是精英!

UI设计师的晋升分为四个阶段:初级UI设计师.中级UI设计师.高级UI设计师.设计总监,在这里分享一下设计师每个阶段都需要掌握的一些技能. 初级UI设计师:是指一些刚入行的没有任何有关设计工作经验,像这个设计师需要精通Photoshop.Illustrator.CorelDRAW.Dreamweaver等设计软件操作,擅长创意.策划,具备较强的美术功底和审美能力.初级UI设计师在公司主要是做设计助理/设计杂活/切图等工作,对上级下达的设计任务,按计划开展各项设计,并对设计作品进行自行把关,在项目

程序猿会不会找UI设计师做女朋友?

到这个标题,所有程序员就该吐槽了:程序员都是屌丝,女朋友都是淘宝上买的,哪里是做设计的!在这里,我就跟大家分享下程序猿为什么要找一个设计师做女朋友!! 1.作为看过各种片的程序猿来说,女设计师的颜值绝对能达到你们的要求!接下来我就随意给大家看看,我这几年积累的UI女设计师的照片!不喜勿喷啊!! 2.作为UI女设计师来说,她们的夜生活是没有的!所以你不用担心,她根本就不会拉着你逛街买衣服.看电影.约会了!因为这个时候,她们在改图,改图,改图!!如果不是在改图,就是改了一天的图,回家做点饭,看看美剧

转:用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)

转自:http://www.uisdc.com/brand-gene-icon-design-pro 图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题. 但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了! 前一阵子写了一篇<用品牌基因法做图标设计,这是高级UI设计师才会的手法>,但只讲了一种提取视觉基因的方法,不够全面.菜心担心大家因为方法的不全面而导致设计效果过于死板,所以近期将整个品牌基因法的体系重新梳理了一遍,

摄影用户的使针对UI设计师做最优设计

如果全团队是Mac的话,Sketch是非常好用且适应现在的设计趋势的.我们公司现在已经全部都用Sketch了.Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作.线框到视觉稿可以在一个软件里完成,能省去不少时间. Sketch的用户社区也比较繁荣健康,让人挺有信心继续用下去.(Sketch的扩展开发比PS容易的样子,我看github上还有人做了自动生成iconfont之类的高级脚本--) 其他回答基本都只是在特色功能上评论,确实,这软件一开始的印象可能只有小巧便捷够用.但用多了后就会

工作五年的UI设计师,现在混的怎么样?不看是你的损失

很多刚入门UI设计师的小白都担心自己的前途到底怎么样,自己工作了几年有没有晋升的空间.毕竟很多人都不想要在基层工作一辈子,都想要往管理层发展.关于这个问题我自己也查了很多资料,看了很多UI设计师的故事,五年时间说长不长,说短不短,这段时间足够形成自己的设计逻辑架构,可以完成许多还不错的商业作品,甚至在许多人眼中是值得学习的大神.五年工作经验对于设计师来说是非常重要的积累期,五年后UI设计师将会走上不同的道路. 五年后一部分UI设计师通过自己的努力,不断地积累,成为了公司的设计总监.这部分人数量比