论是在上市BAT还是创业小公司，都随时可能接手到从0开始的新项目，那么作为负责新项目的主设OR独立设计师，我们应该从何开启工作呢？

01.产品需求沟通

项目开启的第一件事必然是和产品经理的热烈碰撞，那么如何在沟通中体现一个UI设计师的专业水准呢？

1. 了解产品定位

首先要明确这是一款什么类型的产品，是工具型APP、社交型APP还是电商APP？

2. 确定目标用户

接下来就是确认目标用户群，是大学生？宝妈？还是广场舞大妈？具体到年龄段和大致职业方向。

3. 有无相关竞品

大部分的产品原型都会有一定的参照竞品，不排除个别完全创新的产品。虽然我们自己也能找到类似的竞品，但是建议产品经理给出TA认为合适的相关竞品，这里有2个好处：? 提供更多的竞品以供视觉分析? 有助于我们了解产品经理所想达到的APP设计效果。

4. 梳理原型图大致逻辑

在这里假定大部分公司没有交互设计师的岗位，原型图1.0由产品经理来出。那么在第一次交流沟通中，产品经理会详细描述一遍TA的原型图跳转逻辑与各界面内容，我们需要了解APP版本1.0所需要完成页面设计所有内容，及时反馈不合理的跳转逻辑。

5.确认工作排期

在沟通后，需要协调产品开发进度，给到大致的设计排期。一般来说我们会这样进行新项目的设计时间管理（针对复杂程度中等的APP）

*基本中小型APP1.0版本都没有排期来完成界面的交互动效，所以这部分我们放到项目UX设计1到2的文章中再说。

02.风格定位分析

在收集了产品需求之后不要着急开始页面设计，还有几个磨刀不误砍柴工的步骤

1. 竞品视觉分析

分析相关竞品的视觉展示主要有2方面好处：? 检测我们在模块设计时是否有所忽略，有无更好的视觉表达方式。? 注意与竞品保持一定差异性，保证自己的产品调性。

不过需要注意的是，在竞品分析中不要受到竞品影响而无法进行创新思考，永远在竞品基础上思考更优化的方案。

2. 确定品牌色与APP风格

品牌色是一个需要慎重思考的内容，因为一旦确定开始设计运营，之后要进行改动都是比较困难的事情。一般情况下，品牌色与APP类型、目标用户有关。这里举一个例子：最近在做的一个针对小白用户群的理财资讯类APP。那么可以分析得出几个风格关键点：舒适留白（深度阅读），亲和力（财富相关），细节创新（用户黏度）。

于是我们使用了#FFC900（黄色）作为品牌色（暖色、与大部分红色竞品拉开差异、同时干扰阅读性较弱）。

3.初步的LOGO方案

文字型

把APP的大名放在APP里，或者APP名称中的一个字放在APP里。例子可以说是数不胜数，可以称为是APP LOGO设计最大众最保守的方案。原因也很简单，因为这样的LOGO设计简单粗暴，识别度高，最适合国人的阅读偏好，因此之前也有数据说明是下载率最高的APP LOGO类型。

字母型

一般使用APP名称拼音或英文的首字母放在APP里。其实英文字母与国人来说和图形是相对类似的，只是使用字母对于APP的品牌名称可能更容易直接呼应上。

图形型

图形化LOGO的使用在APP LOGO上也十分广泛。大部分有着自己图形化LOGO的产品都会优先使用图形化LOGO而非文字LOGO去作为APP LOGO。一旦图形化LOGO被大众所理解接受，那么在茫茫的手机APP堆中识别起来就会相对容易，具有很强的识别度与品牌感。

吉祥物

一些成熟的APP后期也偏好将自己的APP吉祥物作为APP LOGO展示。这样做的益处基本也在于亲和力的营造与品牌文化的推广。

4. App整体框架

卡片式

适合feed流、瀑布流产品，不同样式和排布的卡片为不同维度的产品内容提供很好的区分环境，同时也提高了阅读效率。

分割线式

适合信息密集且强调信息展示效率的产品，分割线可以简单粗暴的与整理所有碎片化的内容，细化区分不规则内容。但是这里建议如果非必须，尽量少使用分割线，不仅只是为了美观和视觉潮流，更重要的在于，分割线（尤其重色分割线）容易使页面产生割裂感，大量使用的话还会造成阅读干扰。

无框式

适用于大图、文艺类的产品。这大概是近一年最流行的潮流风格了，从iOS11更新以来，大标题无框式的构架在各种飞机稿中随处可见。但是产品是否真的适合这样新的潮流风格，仍需要设计师仔细思考，而不应该盲目追随设计潮流。

5. 思维导图

在设计风格与LOGO方案都基本敲定后，可以对交互原型进行一个思维导图梳理。让自己更清楚产品的整体框架与跳转逻辑。

03.开工界面设计

你是一个披着UI设计师羊皮的美工吗？

1. 模块化管理你的设计稿

这里我们不提如何给文件夹命名之类鸡肋的事情，每个公司都有自己的习惯，入乡随俗就好。重点的是如何用sketch搭建一个规范高效的界面框架。对于界面设计中重复出现的UI kit（UI组件），比如tab 图标，按钮，我们都可以以symbol（符号）化的方式避免反复多次修改与设计稿的混乱。

*具体使用方法可自己尝试或度娘

2. 考虑设计延展性

所有后台上传数据可能的最大值，比如粉丝、关注、点赞的数值最多多少位，卡片信息标题最多多少字以及金融产品中个人账户的数字最大位数。往往区同美工与UI设计师的不是你的界面做的有多漂亮，而是细节你考虑的有多到位。具体有多少设计的可能性与延展性可以注意，我也在不断收集中，之后应该会再写一文给大家总结一下。

*请忽略该图的UI视觉风格及其他细节，单纯举个数值延展性的栗子。

3. 努力以设计解决问题

其实不单单是UI设计，所有的设计领域，一个好的设计师应该不仅仅只是美化产品，更多的应该是去解决问题。在看到产品的原型图时，首先思考TA为何要这样画原型，是否有更好的交互方式。这里举一个例子：还是上文中提到的那个理财资讯APP项目。

这是产品经理给出的原型

需要我们留意的是，发现页在这里属于一级界面，如果按照产品经理所罗列的版式进行设计，那么会造成一个结果：页面样式过于单一，对于黏度本身就不高的小白用户群，这样的平铺方式很不利于APP留住用户。但是从产品经理的角度出发他们同时关注信息的展示效率与曝光度。所以需要如何解决这个问题，达到两全其美的效果呢？

这是设计的方案稿

在与产品经理沟通后，提议用不同布局新增了热门话题模块，在保留了一定信息平铺列表保证信息露出的基础上，增加了信息表达的视觉多样性与内容优先级。

04.与开发的对接

设计师与开发爸爸的碰撞已是老生常谈，但是视觉还原做的不好，除了开发的锅，设计也有责任哦。

1. 何种形式的切图、标注最高效

一些公司的流程习惯使用设计直接用markman或类似标注工具，标出密密麻麻的标注图给开发。但实际上这样的对接效率无论对开发还是设计来说都不是一个科学高效的进行方式。所以建议使用sketch的插件sketch measure>规范，直接导出Html页面，可以直接用鼠标在html中查看任意的区域文字颜色等开发所需的css样式，免去了人工标注的时间。

需要注意的是，html无法读取文件夹组里的单个元素信息。

2. 必不可少的视觉走查

基本每个版本开发完成后，都需要进行视觉走查校对，因为开发多少都会有一些视觉上的实现偏差。但视觉上的偏差有时候不完全是开发的锅，一些细节设计师也是要负责的。比如，在sketch里单行字的间距没有调整为与字体字号相同时，导出的html里就会显示比实际字体要大的字体，这样的界面开发结果就是行间距莫名的变窄了。又比如以图片比例不为整数的设计稿，开发适配完一般都不会是你设计稿上的图片大小，因为无法适配。

建议在每次走查后在excel列好所有的需要校正的点（用P1P2P3分好优先级）。

05.建立视觉规范

你的视觉规范能物尽其用吗？

大部分高设在整理视觉规范的时候还是习惯做出一个几十来页的PDF，很可能只是一个摆设，开发不会看，连设计师自己都不会多看。其实实用有效的视觉规范应当尽可能简洁，而更多的控件样式由ui kit来展现。

*小tip：可以给颜色和字号编好编号，如A1、A2这样方便开发建立组件库，方便调用组件。

UI kit的汇总建议也在sketch中完成，这样也可以导出html供开发直接使用。这样看来一个可以直接使用的UI kit明显比N多页规范与控件混合的pdf要实用很多。

UX设计0到1暂时写到这里，有机会还会再更新一篇1到2，给大家总结一下如何做精细化设计与设计提升，笔芯。

本文由 @Nana柒 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议

年以来，许多设计师一直认为Photoshop是Web设计的必备工具。实际上，我在北京永灿的整个8年职业生涯中一直专门从事这项工作。

Photoshop使您能够在一处完成许多不同的事情。您可以编辑照片，创建数字图形，制作GIF甚至创建原型。

它本质上是设计师的瑞士军刀。

多年以来，我一直在听到一个名为Sketch的新工具，该工具可以代替Photoshop并使我的工作流程更高效。

“亵渎！”我想。

没有什么可以取代我心爱的Photoshop。我觉得自己已经掌握了该工具，以至于我在任何其他程序中都无法获得更高的效率。

但是，这一切在几年前发生了变化，当时北京永灿接受了一个客户，要求我们在Sketch中设计整个项目。

潜入素描

对于那些从未听说过Sketch的人来说，它是由荷兰Bohemian Coding公司开发的基于Mac的设计工具。

自2010年发布以来，它在设计师中倍受青睐，甚至获得了Apple设计奖。

在一次小小的恐慌发作之后，我首先进入了不熟悉的Sketch水域。

一开始我很怀疑，但是三个月后，我知道没有回头路了。

是什么让前自我认可的Photoshop专业人士做出了转换？

Sketch非常适合我的工作流程，使我能够以真正的数字设计师的思维方式更快地工作。此后，我们的整个设计团队已移至Sketch。

但是，这并不是说Photoshop在我的工作流程中仍然没有位置，实际上对某些团队来说可能更好。

为了帮助您确定最适合您的团队的优势，让我们仔细研究一下优缺点，并推荐给现代数字设计师。

Photoshop：利弊

自1988年发布以来，Photoshop一直是Web设计工具的王牌。这并不奇怪，因为它是一种可以完成许多不同事情的工具。以下是使Photoshop如此强大的设计工具的一些出色功能，以及一些需要考虑的缺点。

优点

图书馆

Photoshop允许您获取图像和插图之类的资产，并将其存储在云帐户中，以在其他文件和Adobe软件中访问和重用它们。

这有助于保持设计的一致性，并使您不必一次又一次地重新创建资产。

与所有操作系统兼容

Photoshop是一款已经存在了数十年的软件，因此它不仅是经过时间考验的稳定工具，而且还可以在PC和Mac上使用。

对于同时拥有两种类型用户的团队来说，这是一个巨大的优势。

多功能软件

Photoshop的闪光功能是它的多功能性。如果您是一个单人团队，或者要在公司中处理各种设计任务，那么这是一个很好的工具。无论您需要编辑照片，布置页面设计，甚至创建GIF，都可以在一个地方完成。

缺点

成本

Photoshop可以快速获得昂贵的价格。计划全年的价格从$ 20.99 / mo到$ 299.00。如果您的预算较少，则可能会花费很大。

文件大小和管理

尽管Photoshop确实可以在一个文档中创建多个“画板”，但是这样做可以迅速增加文档的文件大小。这可能会给您的计算机造成巨大损失，并且使与团队其他成员共享文件变得困难。

Photoshop的文件可以很快变得很大。我有一页文件，轻松达到160MB。这种大小的文件确实会减慢计算机的速度，并且难以共享。

因此，如果您正在从事网站重新设计项目之类的工作，则需要将每个页面另存为单独的文件，这可能会造成混乱并且使项目中的所有页面难以引用。

多功能软件

对。奇怪的是，Photoshop的最大资产也是其最大的缺点之一。Photoshop是一种功能强大的工具，但它并不针对某一特定学科。这意味着它“可以”做很多不同的事情，但是它并没有真正专注于完美地完成一件事情。

当您使用Photoshop进行网页设计时，必须浏览许多混乱和不必要的工具，这些工具可能会使您减速。

那么，Sketch如何比较？

草图：利弊

Sketch是Photoshop的歌利亚的大卫。

在统治了Web设计世界二十年之后，由于其“专注于Web设计器”的思维方式和强大的工具箱，Photoshop的统治地位正受到Sketch的挑战。

许多设计师已经将Sketch用作Web设计和UI项目的必备工具。真的值得切换吗？在下面查看我的优缺点列表。

优点

文件大小

我注意到的关于Sketch的第一件事之一是文件比我的Photoshop文件小得多。

例如，我正在使用的当前Sketch文件（包括该项目的所有设计）只有90MB。

对于在需要快速，轻松地共享文件的远程团队中工作的任何人来说，这都是惊人的。

文件管理

将我所有的移动和桌面页面设计容纳在一个文件中的能力令人赞叹。

它有助于使我的所有页面井井有条，并允许我直接从一个文件导出多个设计。

能够快速引用其他设计并确保所有内容看起来一致也很好。

符号

我认为符号是将Sketch与Photoshop分开的最大，最令人印象深刻的功能。

第一次使用Symbols使我对Sketch充满了信心，并彻底改变了我进行设计的方式。

简而言之，Symbol是Sketch中的一项功能，可让您在文档中重用（和更新）元素，因此您无需从头开始重新创建它们。

您可能会想“ 在Photoshop中听起来像是一个智能对象 ”，但是符号要比这先进得多。

使用符号可以像使用Photoshop中的智能对象一样创建“母版”，从而可以跨不同文档使用链接文件。但是，在Sketch中，您可以自定义所有实例，同时保留母版的核心结构。

例如，上面的两张卡是相同的符号，除了我现在能够更改资源标题，图像甚至我是否想要特色图像中的图标之类的东西。

在处理需要重复使用的页面元素时，符号为我节省了大量时间。

如果需要返回进行编辑，则可以轻松地在主数据库中执行此操作，并且更改将全局应用于所有实例。将它们视为页面上使用的小型模板。

缺点

草图仅在Mac上可用

在完全切换到Sketch之前，需要考虑的一点是，它目前仅适用于Mac。在北京永灿，我们是100％pro-mac的办公室，因此运行仅Mac的工具不是问题。

但是，如果您所在的团队中包括PC用户，那么与他们共享Sketch文件可能会有些令人头疼。有一些软件可以让您在PC上打开Sketch文件，但这是您不需要的额外步骤和工具。

Sketch运行于插件之外

有些人可能还对以下事实有疑问：Sketch是该工具严重依赖于其广泛的插件库。

初次使用Sketch时，只有开始设计所需的基本工具。

如果要将文件上传到Invision，为开发人员标记设计间距或执行其他许多任务，则需要下载插件。

这更多是一个优先事项。我个人很喜欢当我第一次开始使用Sketch时没有膨胀。Photoshop要求您必须挖掘大量的菜单，而在使用Sketch时，您将永远不会使用它们的基础知识。您可以使用所需的插件自定义设计工具，以使用它的方式。

为什么北京永灿到Sketch？

在北京永灿，我们花费大量时间与客户合作处理各种UX / UI项目和网站重新设计。Sketch实际上是为在该领域工作的团队而构建的。

以网络为中心的思维方式不仅帮助我们提高了工作效率，而且还提高了工作质量。

我们的团队能够利用“ 符号”和“ 共享样式”等强大功能来使我们的设计在页面之间保持一致。我们还可以在几秒钟内在任意数量的页面上实现全局更改。

您在Sketch中创建的每种效果和样式都可以用HTML和CSS生成。它的所有工具都旨在让您专注于设计，而不必对您永远不会使用的工具和效果进行分类。

那么，哪个适合您的团队？

这不完全是一种情况。所有这些都是使用正确的工具完成工作。

如果您是从事大量UI和Web设计的团队的一员，则应认真考虑改用Sketch。这是一个有助于加速工作流程的工具。

但是，如果您从事许多涉及编辑照片，创建GIF或创建图形的项目，那么Photoshop将成为您的工具。

即使我现在主要在Sketch中工作，我仍然几乎每天都在使用Photoshop，但仅用于其最初的目的-图像编辑。

很容易陷入旧的困境，因为“这是我们一直做的事情”，但是作为快节奏的行业中的人们，我们需要寻找可以改善我们的工作流程和整体工作的新工具。

我很想听听您在Photoshop和Sketch中的使用经验，以及您更喜欢哪一种。请您留言！