首页

这15个好习惯,可以将你塑造为优秀的UX设计师

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

用户体验设计师是一个典型的成长型的职业,不仅仅是它的发展空间如此,设计师本人同样需要持续地学习和进步才行。谁不想变得更好呢?很多时候,成就更好的自己,来源于好习惯。


「不断重复的那些事情塑造了我们。卓越并非源于行为,而是来自习惯。」亚里士多德的话同样讲述着这个道理。在今天的文章当中,我所分享的这15个良好的习惯,塑造了许多优秀的 UX设计师,希望你也能养成好习惯,不断成长。

1. 为自己设定目标

设计能力从来不是凭空拥有的,不断的练习和持续的学习才能够帮你成为更好的设计师。设定恰当的、可抵达的目标,本身也是一种更好学习和前进的技巧。

你会面对无穷的机会和不同的选择,但是你的目标应当放在首位。设定目标不要太难,但是也需要有一定的挑战性:

  • 选择可实现的目标;
  • 为每个目标设定一个截止日期;
  • 在日历中创建相关的提醒;
  • 达成目标的时候奖励自己。

2. 练习主动倾听

倾听是一种需要习得的能力。倾听本身并不是单纯的听那么简单,它也有分类:主动倾听和被动倾听。当倾听者没有足够的动力和动机来倾听倾诉者的语言的时候,信息只是被动接收,而通常无法理解和吸收。

主动倾听则不同,倾听者需要完全集中注意力,能够理解,回应,并且记住对方所说的内容。主动倾听是沟通的先决条件。

下面是一些练习主动倾听的技巧:

  • 当倾诉者说话的时候,尽量听,而不是说;
  • 不要使用问题来回答问题;
  • 不要控制对话的走向;
  • 不要打断并替倾诉者说话;
  • 保持和倾诉者沟通他所说的内容,而不是只对你感兴趣的内容回应;
  • 在倾诉者说完了之后再提问题,而不是中途打断。

3. 学会讲故事的技巧

沟通是设计过程中最重要的部分之一。视觉上的突出只是产品一方面的属性,更重要的是传达。

故事是传达信息最为有效的方式之一。好的设计团队会洞悉产品背后的故事来驱动产品。讲故事是优秀 UX设计师的必备技能,通过讲述故事能够更好地吸引用户。

下面的方法能够帮你讲述故事:

  • 让自己沉浸在品牌故事当中。如果对于品牌故事了解不多,会错失许多想法和机会。在产品设计开始之前,尽可能通过学习来填补这个空白。
  • 创建故事板。故事板是描绘用户使用产品的场景,是设计师用来表达想法的重要工具。

4. 避免使用专业术语

沟通重要,沟通方式同样重要。当你使用行话来表述的时候,用户常常很难理解,这是个坏习惯。这个时候,容易产生误解。

和团队中其他成员沟通的时候,同样需要注意这个问题。绝大多数的其他成员不一定会懂得这些术语的含义,因此这些术语会产生认知负荷。尽量使用简单的方式来表述。

不要在产品的微文案中使用专业术语。这个也是同样的道理。确保沟通的清晰和精准。

可以每发现一个别人难以理解的专业术语,就放在罐子中,以示警醒。

5. 不要满足于特定的某个想法

如果你脑中只有一个想法,那么很难说这个想法是对的还是错的。在做设计项目的时候,一个想法可能是不够的,脑洞大开,在思路上多加探索,开放地寻找不同的想法,并且在实际的设计过程中,筛选出对的、好的想法。

6. 不要陷入完美主义

许多设计师都是完美主义者,想花费大量的时间和精力来打造完美的产品,这往往会导致产品开发周期过长,超出 deadline 。

请记住,完成比完美更重要。不要深陷完美主义的陷阱,拿出能够满足要求的产品,追求完美并不是错过 Deadline 的借口。

不要让追求完美成为塑造好产品的敌人。

7. 学会画草图

高保真的原型会让人看起来非常舒畅,但是产品始终是从零开始构建的,这也意味着你不能跳过纸笔绘画,而直接进入原型设计。数字化的设计在很多时候会限制我们的创造力,所以,学会画草图很有必要。

使用纸和笔来绘制草图将会帮你节省大量的时间,绘制好草图之后再切换到电脑上会便捷很多。

在头脑风暴阶段,草图也可以更快地抓住灵感,推动进度。

8. 善于做笔记

纸和笔应该随时伴随着你。每当你脑中闪过一个好的想法的时候,不要依靠记忆,好记性始终还是不如烂笔头的。人类的记忆很容易出错。快速记录你的想法,最好配上草图。

9. 学会总结经验

如果你已经参与了不少 UX 项目,那么你可能会在之前的项目中有过不少经验和想法。不要错过时机,将这些经验和想法总结和记录下来,然后:

  • 将它们用来解决新问题;
  • 通过有趣的案例研究来更新你的 UX 作品集;
  • 在社区分享你的经验(比如写总结文章)。

10. 参与更多的合作

当你作为团队成员和其他人合作项目的时候,尽量利用这个机会来协同,从各个不同的方面来协作。了解其他人正在为这个项目做什么,以及 UX设计师可以怎样和他们协作来提升整个项目的效果。协作是 UX设计师最有力的技能之一。

11. 参与可用性测试的环节

了解用户是 UX设计师的首要目标,许多 UX设计师会采用构建角色和分析数据的方法来了解用户、进行产品交互设计。虽然这些工具确实很有用,但是没有什么比使用真实的用户和真实的产品来进行测试更有效的了。用户可用性测试你观看的越多,对于产品和用户就越了解,也越能够洞悉问题的所在。

12 . 每天都要尽量汲取灵感

设计师需要灵感,需要从不同的地方尽可能多的获取灵感。在这里,我分享两个技巧:

  • 在工作内容和灵感之间寻找平衡点。花费20%的精力来寻找灵感,在具体的工作内容上花费80%的时间来进行打磨。
  • 不要局限于UI/UX领域的内容。多参加创意活动,去不同的地方,拍照,听音乐,做手工,或者练习写作技巧都可以。

个人观点:我相信广告能够给你带来许多灵感。广告当中包含了大量的类比、隐喻,设计师可以借此创造具有说服力的设计。

13. 欢迎建设性的意见和批评

我们很多人都害怕接受批评。我们的工作确实不完美,特别当我们投入了大量的时间和精力的前提下,还做不到完美,听到批评确实会紧张甚至抵触。但是批判性地看待我们自己的工作是很有必要的。因为:

你不是为你自己而设计,你是为你的用户而做设计。

平复情绪,接受建设性的批评,从教训中学习往往更加深刻。在批评中成长固然不那么好受,但是却能够带来长足的成长。

批评可能不会令人满意,但是这是必要的。它和疼痛的功能是一样的,让人注意到不健康的状态。——丘吉尔

下面是一些建议:

  • 学会过滤批评中的信息。将情绪和意见分离开来,找到对自己有用的信息。
  • 请求诚实的意见。确保批评和分享中包含真实的想法。
  • 定期询问获得反馈。
  • 不要局限于设计领域。向来自不同领域的人请教和学习。

14. 批评和判断他人的设计

其实,评判他人的设计也是自我提升的一种方法。在这个过程中要注意:

  • 问对问题。能够提出对的问题,能够洞察到设计当中的关键,提出有价值的评判,一样非常考验 UX设计的眼力。
  • 不要提出不明智的建议。克制住你的冲动,提出有用有效的建议,如果某个部分需要重新设计,最好是带着有效的数据来提建议。

15. 学会休息

一直保持工作状态,是无法走得足够远的。事实上,人是很容易倦怠的,无论是身体还是精神,都很容易在不同的压力之下,引发情绪和身体上的疲惫。

设计师也经常会在设计中碰到死胡同。当你出现这样的局面的时候,一定不要死扛,先休息一下,散步,呼吸新鲜空气,能够帮你更好地调整状态。

结语

伟大的设计师从来都不是天生的,他们是在不断的训练当中逐步培养出来的。无论我们有着怎样的经验,总会有办法不断改进和提升。


案例研究:一款助眠APP的UI设计分析

蓝蓝

现在,我们发现健康类APP越来越多了:健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等,这些APP的确对我们保持日常健康提供了帮助。

伪类和伪元素

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

定义:

伪类和伪元素就是为文档中不一定存在的结构指定样式,或者为某些元素(甚至文档本身)的状态所指示的幻象类指定样式。css引入伪类和伪元素概念是为了格式化文档树以外的信息。

伪类的形式:选择符: 伪类{ 属性:属性值 }

伪元素的形式:选择符:: 伪元素{ 属性:属性值 }

CSS3规范中要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类。

 

链接伪类

a:link{…}  //指向未访问的链接

a:visited{…} //指向已访问的链接

 

动态伪类

E:hover{…}  //元素上有鼠标指针停留

E:active{…} //元素被用户输入激活

E:focus{…}  //元素拥有输入焦点

 

伪类的顺序很重要,一般为link-visited-focus-hover-active。动态伪类可以应用到任何元素,可以为用户提供一种“强调”的作用。


E:first-child{…}

为父元素(可以body,div,ul,ol等)中的第一个子元素E元素设置样式,注意,E必须是父元素中的第一个子元素。

 

E:lang(value)

为E元素中lang属性为value的元素设置属性。相当于E[lang |= “value”]。

 

结合伪类

a:link:hover{…}//鼠标停留在未访问的链接上

a:visited:hover{…}//鼠标停留在已访问的链接上

 

伪元素选择器

在文档中插入假想元素,导致用户代理对一个假想元素做出响应。

p:first-letter{…}  //设置首字母样式,为p块级元素第一个元素设置样式

p:first-line{…}   //设置第一行的样式,为p块级元素第一个元素设置样式

所有伪元素都必须放在出现该伪元素的选择器的最后面。

 

设置之前和之后元素的样式

E:before {content:”…”}

E:after {content:”…”}


注:关于伪类和伪元素,我的理解并不是很深,不过掌握上面的这些内容,我想也是够用了。以上内容大部分是《CSS权威指南》中内容,总结了一下方便记忆。关于伪类和伪元素的内容,这里有一个不错的文章,下面是这篇文章的链接:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto 下面的内容引自这篇文章,可以补充上面的内容,贴在这里方便自己日后查阅。

伪类与伪元素的具体用法


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

如何开始学UI?入学UI的五大问题!

蓝蓝

1.我想学UI,请问看什么书啊?

2.我想学UI,请问哪个培训机构比较好?

3.我想学UI,请问如何入手?

4.我不是设计专业,但是我还是想学UI,请问如何系统学习?

5.我不管,我就是要学UI,请您给点儿建议。

界面视觉设计 5 要素之字体篇

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情感体验,并塑造品牌形象。

本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用,本文将会提供一些帮助。

一、字体

1. 字体设计的重要性

辅助信息传递

文字是信息内容的载体,是记录思想、交流思想、承载语言的图像或符号,而字体则是文字的外在形式特征,是文字的视觉风格表现。合适的字体可以辅助文字,将信息清晰、准确地传递给用户。

表达情感体验

字体的艺术性体现在其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之前,人们首先感受到的是字体带来的视觉魅力以及情感表达。

塑造品牌形象

不同字体有着不同的风格特征: 有的字体优美清新、线条流畅;有的字体造型规整、充满张力;还有的字体生动活泼、色彩明快……根据产品的属性选择正确的字体,便能有效地塑造品牌形象。

2. 界面常用字体推荐

字体的选择是由产品属性或品牌特性的关键词而决定。一般中文字体种类分为:黑体、宋体、仿宋、楷体等;英文字体种类分为:无衬线体、衬线体、意大利斜体、手写体、黑字体等。

中文字体推荐

线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑。其中 iOS 系统默认中文字体是「苹方PingFang」,Android 系统中文字体使用「思源黑体Noto Sans CJK」。

介绍下「思源黑体」这款字体,它是由 Google 和 Adobe 合作开发出来的,风格介于现代和传统之间,可以广泛用于多种途径,比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和的信息阅读体验,并且是免费的。

英文字体推荐

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系统默认英文字体为「San Francisco」,Android 系统默认英文字体为「Roboto」。

Helvetica 是一种被广泛使用的西文字体,1957年由瑞士字体设计师设计,微软常用的 Arial 字体也来自于它。

作为一款经典的无衬线字体,Helvetica 在平面设计和商业上非常普及和成功,被认为是现代主义设计理念的典范,其简洁朴素的线条风格非常受追捧。

数字字体推荐

线上数字字体推荐使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于1995年的德国,无衬线字体,易用耐看、字形开放,是设计师最爱的几类字体之一,适合显示比较长的大号数字,但是小字号的情况下识别度较低。

Core Sans D 是由韩国设计师设计的一款无衬线字体,支持 Thin、Light、Regular、Medium、Bold 等类型字重,对大号数字的显示效果不错,不过它是收费字体。

Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外,还是 Helvetica 的升级版,拥有了更多的字重,可以作为 iOS 和 Android 跨平台数字字体使用。

二、字号

1. 关于字号

字号是界面设计中另一个重要的元素,字号大小决定了信息的层级和主次关系,合理有序的字号设置能让界面信息清晰易读、层次分明;相反,糟糕无序的字号使用会让界面混乱不堪,影响阅读体验。

2. 字号的选择

字号的选择,可以遵循 iOS 、Material Design、Ant Design 等国内外权威设计体系中的字号规则,也可以根据产品的特点自行定义。

iOS 字号规则

在 iOS11 系统中,使用 San Francisco 作为系统英文字体,包含了以下几种字号的文本样式:

  • 11pt / 12pt Caption 说明文字
  • 13pt Footnote 脚注
  • 15pt Subhead 副标题
  • 16pt Callout 标注
  • 17pt Body / Headline 正文 / 模块标题
  • 20pt / 22pt / 28pt Title 页面标题
  • 34pt Large Title 页面大标题

需要注意的是,San Francisco 字体有两种模式:文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式适用于字号小于 20pt 的文字,展示模式适用于字号大于等于 20pt 的文字。

Material Design 字号规则

在 Material Design 设计体系中,使用 Roboto 作为英文字体,规定了以下文字排版的常用字号:

  • 12sp 小字提示
  • 14sp(桌面端 13sp)正文 / 按钮文字
  • 16sp(桌面端 15sp)小标题
  • 20sp Appbar 文字
  • 24sp 大标题
  • 34sp / 45sp / 56sp / 112sp 超大号文字

长篇幅正文,每行建议 60 字符左右,短文本建议每行 30 字符左右。

Ant Design 字号规则

Ant Design 受到5音阶以及自然律的启发定义了10种不同的字号,从小到大依次为: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建议主要字号为 14px,其余字号的选择可根据具体情况进行自由的定义,尽量控制在3-5种之间,保持克制的原则。

Kiwi 字号规则

Kiwi 是饿了么的中后台设计语言,致力于打造出能够「了解、洞察、温暖、激励用户」的产品。

在 Kiwi Web 中,规定最小字号为 12px,主要文本字号为 14px,最大字号为 46px。

三、行高

1. 关于行高

行高可以理解为一个包裹在字体外面的无形的框,字体距框的上下空隙为半行距。

参考 W3C 原理,眼睛到屏幕的距离 25cm 为最佳阅读距离。

西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致,没有西文的上伸部和下延部来创造行间空隙,所以一般行高需要更大,根据不同人群的特点(儿童、年轻人、老年人)以及使用环境,可达到1.5至2倍甚至更大。

2. 行高的设置

iOS 行高设置

Apple 官方的 iOS 字号与行高对应关系如下(@1x倍率):


Fluent Design 行高设置

Microsoft 官方的 Fluent Design 字号与行高对应关系如下(使用字体 Segoe UI):

Ant Design 行高设置

蚂蚁金服的 Ant Design 字号与行高对应关系如下(优先使用系统默认字体):

行高计算公式:L = F + 8。其中 L 是行高(Line Height),F 是字号(Font Size),F ≥ 12。

四、字重

1. 关于字重

字重是指字体的粗细,一般在字体家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次,当下主流趋势 iOS11 大标题风格就是通过字重来拉开信息层级的。

不同的字重体现不同的层级关系和情绪感受,细的字体给人以细腻、轻盈的感觉,而粗体则给人庄重和严肃的感受,所以在定义字体规范时候需要考虑什么场景用什么字重,从而保持良好阅读体验。

2. 字重的设置

字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果,一般情况下使用两种字重为佳,例如只出现 Regular 以及 Medium 这两种字体粗细,特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。

当字号大小为 12-18pt 时,使用 Regular;20-26pt 时,使用 Light;28-34pt 时,使用 Thin;当字号大小超过 34pt 时,建议使用 Ultralight。

以上是按字号与字重反比的规则设置,即字号越大,字重越轻。当然也可以按正比的规则或者自定义规则,具体还是要根据产品的定位和用户的特点来设置,以保证信息层级清晰明了为准。

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

体验设计中的 affordance

分享达人

这个词,国内有很多翻译版本——示能、功能可供性、承担特质、直观功能、预设用途、可操作暗示、支应性、示能性等...目前“功能可供性”使用较多。但无论通过哪个词汇来讲,可能都不会很清晰的传达其含义。


vue生命周期钩子函数(11个)

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说一下vue的声明周期:

vue 的生命周期11个钩子函数是按照以下的顺序来的 :(不可逆转哦,第11个除外) 
一. 组件创建前后

1.beforeCreate
2.created
    
  • 1
  • 2

如,写一个子组件,然后挂在到父组件,在子组件中,console.log 子组件中的

data(){ return { a:1 },
    beforeCreate(){
        console.log(this.a)//undefined },
    created(){
        console.log(this.a)//1 }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11


.


二. vue启动前后

3.beforeMount 4.mounted
    
  • 1
  • 2

这两个的意思就是, 
vue在beforeMount时,还不管事,也就是说,还没有渲染数据到<div id="app"><div/>里面,此时的这个组件还是空的

mounted时,才会往<div id="app"><div/> 添加东西,也就是vue正式 
接管<div id="app"><div/>

可以获取#app的innerHTML查看差异;

beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的内容 }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6


.


三. 组件更新前后

5.beforeUpdate 6.updated
    
  • 1
  • 2

这个就不用我多说了吧?当子组件里面的 视图改变 的时候触发。 
如,做一个按钮,让data里面的a++,假如 一开始a是1 
beforeUpdate返回1 
updated返回2

beforeUpdate(){
    console.log(document.getElementById('a').innerHTML)//1 },
updated(){
    console.log(document.getElementById('a').innerHTML)//2 }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

再点一次 
beforeUpdate返回2 
updated返回3。。。 

.


四. 组件销毁前后(一般配合v-if使用)

7.beforeDestroy
8.destroyed
    
  • 1
  • 2

给这个子组件用v-if来控制它的销毁和创建,注意以下:v-show不行。 
子组件销毁前触发beforeDestroy 
子组件销毁后触发destroyed 
第一次会触发7.8. 
创建子组件后会触发以上的第1.2.3.4.钩子函数。

有一个问题,如果我们在子组件里写一个定时器,然后,子组件被销毁了,定时器还会执行吗? 
答案是会的 
所以这时候就会用到了destroyed,在组件被销毁后,我们把定时器给清除就好了。

所以这两个钩子函数一般用于做性能的优化。 

.


五. 组件激活时,未激活时

9.activated
10.deactivated
    
  • 1
  • 2

这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。 
通过看 四。这个例子,你肯定知道了一个组件怎么被销毁和创建。 
但是我们知道通常一个组件是很大的,如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理,而且很浪费性能。。。

这时候我们就可以用<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。

说一下<keep-alive><keep-alive/>,它就相当于把你的组件给缓存下来了,目的呢就是不让组件重复的渲染,然后我们通过v-if触发,子组件就不会再触发7 和 8 了,而是只会频繁的触发9 和 10 
这样性能会比7 和 8 好的多。 

.


六. 当捕获一个来自子孙组件的错误时被调用

11.errorCaptured
    
  • 1

当子孙组件报错的时候,父组件会触发这个钩子函数,并且会返回三个参数, 
第一个参数是 错误对象 
第二个参数是 报错的子孙组件 
第三个参数是 报错的子孙组件的具体哪个地方报错。(如,假如我没有定义b这个变量,但是我去console.log(b) 这一句肯定会报错,假如我把这句错误代码写在了created这个钩子函数里,那第三个参数会返回就是:created hook

具体第11个没深入研究,喜欢的可以去看下官网的 errorCaptured

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


半年做了两个APP,我总结出这6个实战经验

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、团队工作,妥协是一门学问

一个产品最后出来的样子,是各种妥协的结果。

互联网产品和平面类型的设计工作最大的区别,可能是在于工种的细分上。之前做平面相关的工作(品牌,视觉,电商),自己一个人可能就充当了基本上除了印刷以外的所有主要工作,既要和客户沟通,了解用户需求和想法以及存在的问题,又要思考和制定设计方案,向客户展示设计提案,又要执行获得认可的设计提案,保证设计成果符合客户预期并落地,如果是最后要交付印刷品,可能还要跟进印刷的过程,保证印刷物料的质量。好像一个人把所有的活都要干了。

但是互联网产品不太一样,首先最大的问题是如何让方案落地的过程,这个工作一般来说没有办法一个人干(除非是牛到精通前端后端和客户端的各种开发语言的全栈设计师),因为会涉及到程序开发,有一些设计师,就算你厉害了,你能把产品交互和 UI 都搞定,然后你还会(web端)前端开发语言或者客户端开发语言,但是你还是需要一个能写后台的工程师,所以,正常情况下,互联网产品的开发,是环环相扣的,至少都需要两到三个人来配合工作。这还是比较小型的产品,如果是复杂的产品,那每个环节都必须细分出来,而且可能每个环节都不止一个人,产品,交互,UI,前端,客户端,后台,因为每个环节的工作量都太大了!

△ 图源:Nick Taylor

既然有这么多的分工,那必然会导致不同的工作岗位看问题的点都是不一样的。举个例子:经常会听到开发说,明明用 A 就可以,为什么非要用 B?一开始的时候,其实我真的不太理解,但是后来慢慢熟悉了开发的工作之后(尤其是自己开始学习一些代码知识之后)慢慢理解了,其实开发在实现我们的设计的时候,最关注的是功能的实现,而功能就是各种交互的集合,一个页面上,如果交互不变,功能不变,只是改一些视觉上的样式,这是相对来说简单的,如果牵扯到交互的调整和修改,那个工作量可能就成倍增加,所谓牵一发而动全身。所以我们在设计的时候,更要注意模块和组件的一致性和可复用性,这样不仅可以提高我们的设计质量,也可以有效的减少开发的工作量,提高开发的效率。

同时,开发在实现的第一个版本的产品中一般很多时候视觉上会有各种各样的问题,开发人员在开发过程中,为了提率,不太在意还原 UI 的细节,比如这个间距是多少,那个间隔是几个像素,所以最后产品上线前都会有 UI走查的环节,在这个过程中就是要一点一点地改进产品UI 实现中不符合设计稿的地方,这个时候才是我们设计师关注所谓的每一个像素的时候,在那之前,还是先关注功能和流程的实现吧。

其实不仅仅是因为每个岗位的职能不同会导致很多不同的意见,有时候也可能是因为每个人的审美或者是性格的问题,也会产生不少的摩擦,所以,学会妥协,在妥协中坚持是团队合作中的一门大学问。

二、把自己定位为产品设计师

以攻为守,让自己从更全面的视角去思考 UI 的工作。

△ 图源:Nick Taylor

一个 UI设计师的未来在哪里?有时候我会思考这样的问题,有可能是因为我已经30了。这一两年,危机感很重,每次看到非科班群里各种90后、95后的年轻设计师,心生羡慕的同时也充满了莫名的压力。

这半年多因为自己团队中没有专门的交互设计师,所以我就同时肩负了大部分交互设计的工作。一开始做交互设计的东西,其实自己的认识还是很浅薄的,虽然平时自己也看很多用户体验,设计心理学、交互设计等等的书籍,但是真的上手干活,还是会经常一头雾水,因为交互设计太需要缜密的逻辑思维了。市场上常见的 app 的标准化的交互设计因为都有竞品参考,还是相对来说简单的,在我看来比较难的是工具型的产品和 CMS(内容管理系统后台),尤其是 CMS 的交互设计,如果设计不好,分分钟让用的人感觉要崩溃。交互设计是一门很深的学问,也是 UI设计师必须去了解和熟知的,它绝不是简单的页面之间的跳转,也不仅是酷炫的动效,它是能让产品的使用体验得到质的飞跃的关键。

如果把一个产品比作一个人,那产品本身的方向是这个人的灵魂和思想,交互是这个人的举止和修养,而 UI 是一个人外形和穿衣品味以及整体气质,优秀的人,三者缺一不可,三者是共生的关系。

在我看来。成为一个产品设计师,了解产品思维,熟悉交互设计,精通视觉设计,这样的设计师觉得才是以后互联网设计师的标配。高配是什么?我觉得至少是全栈设计师吧。这就像平面设计领域,不懂印刷各种工艺和材质的,都称不上好的平面设计师。好的建筑设计师,也得懂很多建筑学和建筑材料的知识。

我在这半年的实际工作中,虽然第一个产品的概念定义和原型我没有参加讨论(我去的时候已经定下来了),但是我还是尝试去思考这个产品到底意义在哪里,目标用户是哪些人,解决了目标用户的什么需求,他们的使用场景有哪些。我一直都认为互联网产品的设计工作始终更是贯穿着设计思维,只是每个具体的分工的侧重点不同,你可以不精于产品需求的整理和筛选,但你是得明白你你所设计的是为了满足什么需求,有目标和方向才能做出更好的设计,你连问题都不知道,怎么去解决问题。设计的工作,终究都是为了解决问题,不了解问题的来龙去脉,便不能梳理出问题的本质,更无法做出好的设计去解决问题。

把自己定位为产品设计师,稍微多花点心思去思考产品,去学习交互,别让自己的眼界停留在只画几个好看界面,画几套特别的图标,不然你早晚要被这个行业淘汰,不对,是被其他更优秀的设计师淘汰。

三、牢记UCD,但别太天真

很多公司并不真的在意所谓的 UCD。

△ 图源:Nick Taylor

我相信大部分的设计师还是在中小型的企业里工作,这样的企业的设计工作有一个很明显的特征,就是以主管或者老板的喜好为第一满足目标,所有的设计方案都会以老板的喜好为基准参考,只有老板说 ok 才算是 ok。当然,我们公司也是,毕竟我们也是一个小型公司,而且老板的个人风格特别强烈。所以在做第一款 app 时,仅仅是首屏的视觉方案,都出了不止七八个版本。在进入更加深入的其他页面的设计环节时,我们也没有去做什么用户场景分析或者用户需求分析之类的工作,都是依照着老板的一些想法去一步一步的实现,当然,这并不是一定是错的,只是大部分公司的设计工作的现状,这样也可能会有好的产品,只是可能性更低而已。很多公司没有很专业的设计团队,也没有很专业的产品经理,更没有很专业的产品设计师,做很多设计决策的时候基本上都是靠拍脑袋,或者依靠个人的生活或者设计经验,在不知不觉中,就把 UCD 的设计方法忘在脑后了,UI设计师只是负责机械式美化下每一个元素,做一下视觉风格的统一,变成了一个不折不扣的界面美化师。

但我们 UI设计师不能只是美化一下界面,虽然我们可以没有专业的设计团队,没有很厉害的产品经理或者交互设计师,但是我们也要在设计过程中不断地提醒自己,要以用户体验为中心,用户在这个界面需要的是什么,什么信息对他来说是最重要的,怎么样设计可以减少用户的浏览负担,提高用户的使用效率,虽然可能我们思考的方向和结果的不一定对,但是只要去想,才能不断强化我们自己的这个设计思维,避免自己产出千篇一律的设计方案,提高自己的设计能力。如果能把每一项工作都尽百分之120的努力去完成,那就算你现在是在一个微不足道的小公司,你也一定能成长为一个设计大牛。

四、坚持学习,不断提高审美和眼界

现在作品不好,没问题,如果一直都不好,那就是你自己真的出了问题。

△ 图源:Nick Taylor

我以前很羡慕那种设计师,年纪轻轻就进大公司,或者20岁不到作品就让人感觉眼前一亮。对于我这种非科班的,大学毕业7年了,认真静下心来干设计才3年多,似乎还没开始跑,就已经被人甩开一大截了。

看起来似乎很糟糕,但其实真不是,你所经历的一切艰难,如果挺过去了,那就是你人生宝贵的财富。那应该怎么做呢?只能不断努力地去缩小和别人的差距,不对,不是和别人的差距,是和自己对自己期望值的差距。

那么提高审美和眼界就是最基本要做的事情,同时我也认为这是作为一个设计师需要持续不断提高的最基本的能力。审美和眼界的提高是需要日积月累的,软件操作和技法可以短时间内突击学习,也可以临时偷师,但是如果你审美不行,你永远都不可能做出好的设计,因为在你的眼里的高级和在高水平设计师眼里的高级,可能是天差地别。审美和眼界就像是一种设计师的隐藏属性,会在你日常的设计当中不自然的流露出来,你不需要去调动它,它自然而然的就会在你的工作中不断地帮助你。

但是往往很多设计师不把这个当一回事。其实你只要每天坚持不停地看优秀的作品,坚持几个月或者半年一年的,你的审美肯定都会有质的飞跃。以前你觉得设计很棒的作品,可能你以后看起来就会嗤之以鼻了。

看作品这件事其实很简单,你只要每天打开 behance,打开首页推荐的十个作品,花个十几二十分钟细细看下来,觉得好的就分类收藏一下,以备以后可以用来做设计的参考。

但是,关键是坚持。

五、重拾英语,不让自己做井底之蛙

别总看国内的设计网站了,外面的世界更精彩。

为什么要重新学习英语?(我就是想万一以后牛X了,可以混到国际舞台上,嗯,这个可以有)

一开始决定重拾英语的契机,这还要感谢砂姐组织的翻译小组。我也只是想试试看,能不能把英语重新捡起来。于是从17年2月份开始我给自己定了个目标,每个月翻一篇英语的设计类文章,很庆幸自己坚持下来了。同时在工作中遇到的不少问题,会逼着我去看一些外文的资料,让我觉得我必须得更努力地把英语捡起来,于是最近几个月同时也开始背单词,每天坚持读英语的设计文章,跟一开始比,感觉还是很有收获的,看文章的速度越来越快,阅读时的语感也越来越好(这个越来越好是相对于自己很糟糕时候的状态)。

慢慢地,我感觉,学好英语,对于一个设计师的长远发展是很有帮助的。

如果你想去了解世界上更多优秀设计师的想法,学习他们的经验,那么就得亲自去获取第一手的信息,而不是等着其他人的翻译,而且很多各种设计领域的优秀的教材和资料都只有英文版本,如果不把英语学好,自己学到的不仅仅是很多残缺不全的二手资料,甚至连学习的机会都没有。把英语学好,是给自己打开通往更广阔领域的钥匙。你的眼界,决定了你成就的上限。

六、接触代码,发现一个新世界

学习从来都不是件轻松愉快的事情。

做界面的同学有没有遇到过这样的情况:我明明是设计成这样的,为什么开发出来之后就变成那样了?

这就是我下定决心想学习代码的导火索。我就想,为什么我不能自己学习代码自己实现自己的设计么?这不是很厉害么?加上我之前也断断续续地对前端技术有过学习的念头,于是一鼓作气下定决心就开始学了。

出于想给自己开发个人网站的初衷,我就选择了前端的开发语言作为我的学习内容。我目前主要学习的是 Javascript(html 和 css 已经学了个大概)。

一开始学习的时候真的是痛苦不堪,但是在度过了一两个月的痛苦的煎熬之后,已经慢慢地发现学习代码的乐趣,但同时,发现这个坑是越来越大,感觉要学的东西是自己预想的要多太多了。虽然过程很纠结也很痛苦(我估计这种痛苦的感觉还会持续好长时间),学习代码的过程对于提高设计师的逻辑思维确实很有帮助,因为编程思维和设计工作的思维相比,更注重逻辑性(设计工作也很注重逻辑性)。同时,多了解一些编程的知识(编程开发的语言很多,但是思维方式是类似的)对于理解开发人员的工作内容和工作方式,也会有很大的帮助。互联网的设计师,我觉得在学有余力的情况下,都应该多多少少学习一些代码的知识,因为这毕竟也是产品开发的其中的一个重要环节,你不需要擅长,但懂一些,可以让你更好地和开发人员进行有效的沟通,知己知彼,减少撕逼。但是不建议设计工作经验较少的同学学习代码,毕竟这需要很多的时间去学习,不要把自己变成什么都是半桶水,在不影响设计工作之余可以抽出时间的话让自己尝试一下,说不定你也会喜欢上编程这件事。

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

AI教程!教你绘制一只梦幻效果蝴蝶

蓝蓝

设计师不光要会做软件设计,一些造型的表达也是很重要的,今天那就随我来看看这只蝴蝶是怎么做出来的吧。

React生命周期函数详解和注意事项

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

React生命周期函数

生命周期函数是指在某一个周期自动执行的函数。 

React中的生命周期执行过程

以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行

初始化过程(Initialization)

  • consructor()里面初始化PropsState属性。

挂载过程(Mounting)

  1. componentWillMount():在组件即将被挂载到页面的时刻自动执行。
  2. render():将组件挂载到页面。
  3. componentDidMount():组件被挂载到页面之后立即执行。

更新过程(Updating)

  1. componentWillReceiveProps():一个组件要从父组件接收参数, 只要父组件的render()函数非首次(如果这个组件第一次存在与父组件中不会执行,如果已经存在于父组件中才会执行)执行了,子组件的这个生命周期函数就会被执行。如果组件没有Props属性则直接跳过
  2. shouldComponentUpdate():组件更行之前检查是否需要更新,注意这个函数要有一个布尔类型返回值,如果返回false,这一部分的生周期 函数将不会继续执行,即无论如何组件都不会更新。利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能
  3. componentWillUpdate():组件更新之前。自动执行。但要在shouldComponentUpdate()执行并返回true之后执行。
  4. render():将组件更新到页面。
  5. componentDidUpdate():组件更新完成之后立即执行。

移除过程(Unmounting)

  • componentWillMount():当组件即将被页面剔除时执行。

注意事项



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档