三步快速适应新公司设计风格

三月份和四月份一直是换工作的高峰时期,向来有“金三银四”的说法。开始新的工作虽然令人振奋,但也经常伴随着各种各样的问题。比如我之前遇到的从2x图到1x图的转换,虽说都是相通,但实际操作起来还是各种不顺手,就像花了很多时间背题,考试的时候却发现自己背错了单元。

产品字体的大小、惯用间距、图标尺寸、标准色辅助色的使用,公司有哪些版权字体,常用的banner尺寸,针对用户年龄层的设计风格偏好这些都还不熟悉。工作的时候手忙脚乱,没有找到合适的抓手和工具去搞定整个页面的设计,这时候我们需要一段时间来熟悉适应新的设计风格。

那么有没有可以让我们迅速适应新设计风格的方法呢?经过摸索,我试验总结了三大步骤来帮助自己快速适应,顺利开始新工作,下面就一起来看看吧。刚进入新公司的时候,我们对公司设计风格是陌生的,用进度图来表示就像这样↓↓↓

经过这三步从陌生到80%的熟悉度,效果是不是还不错呢,下面一起看看我的三步走计划吧!

Step 1—整理组件文档 熟悉规范

我的耗时:2小时30分钟

这一步我建议可以在进入新公司的第一天完成,因为第一天的时候除了办入职手续、装电脑和简短的新人培训以外,一般还没有安排具体的工作。我们就可以利用这个时间来熟悉规范、整理组件,为以后的设计工作做好准备。

公司给到新人的设计规范很多情况下会是PDF文档,整理成了文字和图片的形式,看完规范可以对产品的风格有一个整体的了解。但是这种形式有一个缺点就是记不住,真的记不住,至少我看完两遍后,当涉及到具体问题的时候,还是需要去找对应的规范,非常不方便。

所以当收到PDF格式的规范时,我们可以把规范上提到的组件,自己在sketch里绘制了出来。这样不仅可以实际操作一遍,在作图的过程中熟悉各项参数,以后设计的时候也可以打开文档直接使用组件。

下面是我做的示意图,可以这样来整理(涉及公司资料,就不放真实文件了)。可以建一个sketch文件,我的习惯分成三个部分:组件、字体和颜色&图层样式。

1. 组件:比如标题栏,按钮,弹窗,头像昵称、常用图片尺寸和一些固定的icon等,把通用的都整理好,每次要用的时候就可以直接复制使用啦。

2. 字体:常用的字号按大小颜色和使用的场景和位置分别输入好,这样就不用怕因为不熟悉而用错字号了。

公司购买的版权字体也准备出来,要使用的时候直接在文档里挑选,这样就可以有效避免误使用没有版权的字体,毕竟版权意识很重要呀。

这样做还有一个好处是,本文档使用过的字体在文字窗口会在默认排到上面,在需要用的时候就不用每次都去茫茫字海中找啦,非常方便呢。既避免错误也节约了很多时间,如果你也装了很多字体的话不妨试试哦。

3. 颜色&图层样式:把品牌色,常用的配色方案、渐变色和一些经常使用的图层样式放在文档里。比如我就把常用的几种投影、动感模糊和一些比较复杂的效果都准备好了,这样每次要用的时候就不用花时间去调了,option command+C和V就能复制粘贴图层样式,提升作图效率,速度也是很重要的战斗力呢。

后期也可以把它当做一项长期工作,随着工作的逐渐展开会有自己的素材积累,可以随时更新增加。

当然也有一些公司会有组件库供设计师直接使用,不过我还是觉得即使有组件库也可以自己在单独准备一份文件。动手做过印象会比较深刻,在这个过程中能帮助我们了解了规范各项参数,也能熟练操作,所以不要浪费了这个机会哦。

完成这一步我们再来看看我的适应进度条,熟悉程度达到20%-30%了。

不过仅仅熟悉组件当然还是不够的,接下来通过下一步的练习,我的熟练程度又能到50%-60%,可以顺利开始页面的设计,赶紧进入下一步吧。

Step 2—临摹典型页面

我的耗时:4小时30分钟

我进行这一步的时候刚好正好赶上周末,所以我用了下午整块的时间,完成了产品4个典型页面的临摹。如果平时没有这样的整块时间也可以拆分任务,每天抽一些时间,完成一个页面的临摹。

Step 1的时候我完成了组件的整理,如果说组件是一个个的点,多个组件逐渐连成线,那么页面就是面,临摹页面就是将已经熟悉了的线组成面。

有了组件的抓手在设计的时候就有了着力点,但要完成一个页面的设计还是不够。

以写作为类比,组件就像造句练习,而页面更像一篇作文,有写好一句话的能力但并不代表就能写出一篇好文章,将单独的语句组织成一篇完整的文章还需要更多的练习。

临摹就是有效的练习方式,临摹页面的时候可以完整经历整个页面设计过程,知道什么情况下该用什么组件。也会遇到更多细节的问题,比如icon和文字之间的间距,每个功能模块之间的间距是多少,内容的之间的间距又是多少,品牌色和辅助色之间的搭配关系等。

通过临摹2-4个不同类型的典型页面可以补全之前各组件之间的缝隙,对页面有全面整体的认识,操作也更加熟练,这时候我对风格的熟悉程度应该可以到达50%-60%左右了。

如果要开始页面设计的话也可以比较顺利的进行下去了,视觉层面基本可以保证统一和符合要求。不过要做出更契合整个产品目标,符合产品调性的设计还少不了下面关键的第三步。

Step 3—使用体验产品

我的耗时:一周早上通勤时间,每天40分钟左右

在面试或者入职前我们或多或少应该都已经浏览过使用过产品了,但这还不够,现在我们需要更有目的更仔细的去使用体验产品。这一步我没有再抽出整块的时间,而是利用了早上通勤的时间来完成。

通过前两步整理组件和临摹页面已经解决了产品线和面的问题,从视觉上来说现在对新的设计风格基本熟悉了。但产品是一个整体立体的东西,通过静态的组件和页面积累起来的了解还是比较表面和有限的。所以我们还需要深入了解产品,使用产品的功能。

不同于之前泛泛的浏览,这次应该是带着具体的问题去使用。比如今天早上专注看上课的功能,第二天早上就体验做题测试的环节,遇到问题或不太清楚的时候截屏记录,以便和同事讨论交流。

这个过程中不仅可以看到每个页面,感受整体的设计风格。同时也能清楚自己所做的页面在产品中是哪一个环节,在开会讲需求的时候就可以迅速定位,知道是在说哪里,明白前因后果更好的理解需求。

我在刚加入上一份工作的时候,因为对产品的不熟悉,开始讲需求的时候经常跟不上节奏,不知道在讲哪里非常尴尬。只有知道产品的功能知道自己做的是哪部分,起到的是什么作用,承担什么样的使命才能做出更合理更契合需求的设计。

使用产品是把单独的页面都串起来的过程,让产品在头脑中的印象正真鲜活立体起来,完成从点、线、面到体的转化。

这个过程根据产品体量不同,耗时也不同,也可以先从自己在的部分了解,逐步展开。

到这里我对新风格的对产品的熟悉度达到了80%左右,这个程度能让我在设计的时候,可以熟悉规范,熟练使用组件,设计的页面能符合产品的整体风格完美融入,配合需求知道应该规避什么又该突出什么,做出合理的设计。

Step 4—番外 开始长跑

上面三步是我试验总结的自己可以做的努力,当然过程中也要忽视了和同事之前的交流,这也是帮助我们快速熟悉的重要方式。相信完成这些可以帮助我们快速平稳地度过刚开始的适应期,进入正轨。

不过行百里者半九十,完成这三步后也是新的开始,还有更多的部分就需要在以后的工作中逐渐深入了解。

比如产品面对的用户群体有什么样的特征,研究更符合用户特征的设计风格;产品的定义和提供的服务,核心价值是什么,公司的愿景;研究竞品,有竞品的对比可以更好的帮助理解自己产品的核心优势和特点,或许有些看起来暂时和眼前的设计不是那么相关,但是其实很多时候我们都需要靠这些来做出正确的取舍抉择。

越往后越需要付出更多的时间和精力,希望大家都可以在自己喜欢的岗位上,充满热情的工作。

划重点

今天聊的是怎么可以让自己快速适应新公司的设计风格,分别是下面三步:

  • 1. 整理组件文档,熟悉规范。在设计的时候方便使用,提升效率。
  • 2. 临摹典型页面,体验完整页面的设计过程,熟练操作。
  • 3. 使用体验产品,感受整体的设计风格了解功能和需求。

完成这三步的同时,也不要忽略了和同事之前的交流哦,这也是非常重要的一方面。

海盐社(公众号)
作者: 焱小玖

(0)

相关推荐

  • 三步快速解决九格数字拼图

    看似简单的数字拼图相信每个人多多少少都碰到过吧,有人可以不费吹灰之力就拼出来,但大多数人即使冥思苦想.绞尽脑汁也只是勉强的拼出一小部分,想想看这只是儿童益智游戏哦,要是一个小朋友来考你数字拼图,那你可 ...

  • 教你三步快速完成新闻采集

    本教程是演示熊猫采集器如何快速且简单的采集到我们所需要的新闻. 操作方法 01 首先,打开我们需要使用的工具,也就是熊猫采集软件,选择新建采集项目快捷,如图: 02 输入我们要采集的新闻列表页面的网址 ...

  • 海淘科技:三步快速实现wordpress首页友情链接

    对于建站新手来说,很多人都不懂程序代码,这样他们在建站时难免碰到大大小小许多问题,但是有了插件的帮助,就省区了很多的时间,下面上海网站建设公司海淘科技的seo人员教大家怎样用插件实现首页的友情链接. ...

  • Evernote三步快速入门指南

    只需 3 步,轻松上手: 1.创建一条笔记 在侧边栏中选择"笔记". 选择屏幕上方的新建笔记按钮. 为笔记添加标题,方便日后查找. 在笔记页面任意位置点击鼠标,出现闪烁光标,即可开 ...

  • 超个性明信片DIY 用好照片三步快速完成

    旅行的路上,还在为给朋友带礼物而头疼吗?其实只要花了心思,礼轻也可情意重。一张明信片漂洋过海,或是翻山越岭到达朋友的手中,相比短信或者微博这样的社交网络,明信片让感情不再寄托在虚拟的网络环境里。 如果 ...

  • chrome谷歌浏览器无法添加扩展插件怎么办? 三步快速解决的方法

    解决Google Chrome“无法添加来自此网站的应用”的教程 1.先下载好Chrome应用的*.crx或者脚本**.js文件. 2.打开chrome浏览器,单击右上角的菜单栏,选择“工具”→“扩展 ...

  • 简单三步 为你的系统快速打补丁

    一台计算机在使用过程中,在系统补丁方面可能存在以下问题: 一是计算机已经打了补丁,但却不一定完整,而且在补丁的后续更新方式和更新时间方面存在一定的问题; 二是计算机根本就没有打补丁,因而存在较多的安全 ...

  • 快速入门mts转mp4视频,mts格式转换三步曲

    喜欢外出旅游的朋友大多都拥有一台体积小巧的DV,而目前较为流行的索尼.松下.JVC等品牌摄像机虽说拍摄的视频画面清晰度极高,但是存储为mts或m2ts格式,导出到电脑上无论是播放观看或是后期编辑处理通 ...

  • 美图秀秀快速生成闪字(简单三步轻松搞定)

    不少朋友习惯为照片上添加文字来表达心情或者是恶搞,闪字功能就更加能够体现出来。美图秀秀如何生成闪字的?方法非常简单,只需要三步,就可以了。 一、在美图秀秀中打开主素材。 美图秀秀 二、找到闪图工具,并 ...