一、主办单位：

二、承办单位：

三、协办单位：

四、支持机构：

五、艺术顾问：

全国政协委员、故宫博物院原常务副院长、故宫出版社原社长

北京市政协第十届、第十一届、第十二届委员

大运河翰林民俗博物馆馆长

六、评审团：

中国包装联合会设计委员会（CDC）全国委员

中国设计师沙龙（CDS）执行主席

北京印刷学院设计艺术学院设计中心主任

北京择东设计顾问公司设计总监

气韵中国系列邀请展主策展人

雾霾公益活动发起人之一

三X3 设计论坛活动发起人

我爱吾城创作计划发起人

赏未时光创作发起人

中国著名设计师

毕业于西安美术学院设计系北京顾鹏设计公司创办人兼创作总监中国设计师沙龙联合发起人、第一届执行主席、现任学术委员中国包装设计委员会全国委员《中国设计年鉴》编委首都企业形象研究会理事国际平面社团设计协会会员韩国又松设计学院、上海INTERMARK国际设计学院、郑州轻工业学院易斯顿国际美术学院等多所设计学院客座教授中北大学艺术学院校外艺术硕士生导师

20年的从业经验、屡获业界殊荣、有超过300项成功案例，多年公益设计交流经验、《气韵中国》《雾霾公益海报展》《意匠集》《尖荷行动》等全国活动的联合策展人等。

仇寅

方正字库设计总监

中国文字字体设计与研究中心专家委员中国设计师沙龙（CDS）会员深圳市平面设计师协会（SGDA）会员

“方正悠黑系列字体” 、“方正悠宋系列字体” 、“方正大魏体”原创设计师

曾获：

1985中国钢笔书法大赛特等奖

1988首届国际硬笔书法大赛一等奖

2015中国设计“红星奖”

出版：《仇寅钢笔字》、《仇寅书外国名诗》、《古帖新临多体钢笔字帖》、《雷锋日记选钢笔字帖》、《著名外国诗歌钢笔字帖》等字帖多部

朱志伟

著名字体设计人

汉仪字库艺术总监

北京服装学院设计学院客座教授

1971年至1991年在北京外文印刷厂从事印刷活字雕刻工作，1991进入北大方正从事字体设计和字库生产管理工作，任方正字库设计总监，方正集团高级技术专家。1996年开始涉足字体设计，有多项字体设计作品成功开发为字库产品在社会上广泛使用。从2004年开始热心于字体与视觉关系的研究与设计，将保护读者视力健康，建立字体与视觉的良好关系作为字体设计的核心理念，在这一理念下设计的《博雅宋》、《雅宋》、《风雅宋》、《韵动黑》等字库产品得到广大用户和读者的喜爱，被很多主流报纸和杂志广泛采用的，2015年加盟汉仪后设计开发《玄宋》。

李吉锋

中国设计师沙龙CDS 秘书长

古田路9号网站合伙人

华狮品牌全案机构创办人

2017年度中国当代杰出广告人

武世宁

中国设计师沙龙（CDS）理事

中国工艺美术协会会员

中国邮政特约设计师

“生肖有礼”创始人

主要作品：

2019联合国生肖猪年邮票、《2019中国北京世界园艺博览会》纪念邮票、《河北雄安新区设立纪念》邮票、《福寿圆满》贺年专用邮票、《宁夏回族自治区成立六十周年》邮票《祥瑞平安》贺年专用邮票、《西南大学建校110周年》邮资片、《团圆》、《一帆风顺》个性化邮票

付业波

CDS中国设计师沙龙媒体理事

北京“阅微堂”设计总监

“生肖有礼”联合创始人

多年从事文化创意产品、邮票钱币衍生品等研发设计，其作品曾获多项奖励；

宣传推广国内外各项设计大奖赛、设计展览等活动，倡导设计行业的良性竞争。

七、大赛主题：

八、作品要求及规范：

九、报名方式：

十、大赛日程：

十一、赛事说明：

十二、作品知识产权与保护：

十三、媒体支持（以下排名不分前后）

十四、机构支持（以下排名不分前后）

十五、院校支持（以下排名不分前后）

清华大学美术学院、首都师范大学、北京印刷学院、北京服装学院、山东工艺美术学院、青岛大学美术学院、北京鲸艺设计学院、国立台湾芸術大学、华南师范大学、广州美术学院、上海美术学院、景德镇陶瓷大学、郑州轻工业学院艺术设计学院、郑州轻工业学院易斯顿美术学院、西南民族大学艺术学院、广西艺术学院设计学院、大连艺术学院艺术设计学院、燕山大学艺术与设计学院、大连医科大学艺术学院、河南理工大学建筑与艺术设计学院、重庆科技学院、石家庄学院、安徽大学、河南工业大学设计艺术学院、长江职业学院、广州航海学院、西安工程大学、河北传媒学院艺术设计学院、中原工学院艺术设计学院、中原文化艺术学院、台州学院艺术学院、天津商业大学艺术学院、武汉工商学院艺术与设计学院、山西传媒学院、河南工程学院艺术设计学院、河南省工艺美术学校、河南轻工职业学院、上海工程技术大学、湖南工业大学、兰州职业技术学院数字传媒系、河南牧业经济学院、河南师范大学新联学院、869（大连）设计学校、庐山艺术特训营、衡水学院、郑州科技学院艺术学院、华北水利水电大学、周口师范学院、许昌学院设计艺术学院、沈阳工学院、常州纺织服装职业技术学院创意学院、鲸艺设计学院、西安邮电大学数字艺术学院、江苏大学艺术学院、上海工程技术大学中韩多媒体设计学院、湖北科技职业学院传媒艺术学院、武汉传媒学院、广西师范大学设计学院、九江学院艺术学院、汉口学院艺术学院、湖南女子学院、广州城建职业学院艺术与设计学院……

文章来源：设计竞赛网

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

你对自己的网站当下的UI设计效果满意吗?如果不知道如何改进的话，那么这篇文章或许对你有很大的帮助。

据统计，成年人平均每天在手机上花费3到4个小时。尽管大家不懂如何创建APP或网站，但却能明显感知一个产品设计的好坏。这可以很明显的映在产品使用时间上，并且很大程度可以归结为直观的用户体验和可能被忽视的UI界面。

如今，UI设计是建立网站或应用程序用户信任的重要组成部分。优秀的UI设计，带有清晰、熟悉的图标，一致的调色板，尺寸大小，可以让用户快速、轻松地浏览页面内容。

修改现有的网站或应用程序设计可能会面临很多障碍，但你完全可以做一些小事情，让UI设计达到一个新的水平。无论是在你的图形、调色板、网站导航工具、图标、字体大小和间距上，你的UI设计总有需要改进的地方。

在本文中，站长之家将跟大家分享7种简单的方法，让你的应用程序和网站UI设计经过简单的调整之后，在视觉上更吸引力。

字体的使用要克制

使用的字体并不是越多越好，最好只使用一种字体。我们建议使用无衬线字体，如Helvetica。因为它更易于阅读，并且在小屏幕和大屏幕上的展示都比较良好。

通常可以在不同位置进行调整。例如，标题（H1）可以是粗体，或者采用比常规文本(p)更粗的字体，而常规文本则采用普通字体，也以尝试用颜色来区分和建立层次。

当然，你还可以在设计中使用两种字体（一种用于标题，一种用于其他文本，比如段落，标题等等）。我们很少在设计中看到两种以上的字体，但出现这种情况时，是有一定原因的。

比如下图中，使用字体过多，导致页面观感混乱。

内容的可读性

如果页面上的文字和背景图片在颜色上过于相似，那就无法突出文字内容。结果就是不利于用户阅读，要么就是快速浏览，要么干脆跳过这部分内容。

而这个问题很容易解决。首先，在图片上添加一个覆盖层，根据字体颜色，调整背景图片的明亮程度，也可以通过调整图像的透明度来达到类似的效果。实现这一点的另一种方法是在文本周围添加阴影。

检查内容的对齐方式

在决定如何阅读内容时，，对齐起着至关重要的作用。大家很少会看到长格式文本居中或向右对齐，博客类或长文本内容更是如此。统一将文本左对齐是一个比较稳妥的做法，而不是选择居中方式。

请注意，在某些情况下，居中文本仍然是合适的。一些例子包括小标题或段落，引用等等。

颜色使用需谨慎

虽然颜色在传递信息方面非常有用，但要谨慎使用，而且只在你试图传达内容中最重要的部分时使用。

例如，对于一篇博客文章，你不会将所有文本都设置为亮绿色。颜色对于定义设计层级是非常重要的，比如可以降低不太重要的文本的饱和度，从而突出想要抓取眼球的内容。

最后，我们建议设计之前，要保持颜色的一致性和定义调色板。颜色的组合有数百万种，你可以花几个小时来测试哪种灰色比较好看，或者哪种紫色比较适合你的设计页面。虽然这可能很耗时，但值得去尝试，如有必要的话，就作出改变。

留白跟内容是一样重要的

留白对于内容的可读性非常重要。过于聚集的文本和图片会让用户感到不适，而过多的空白会导致读者需要过多的滚动，从而在无法快速浏览并产生挫折感。

要给内容足够的呼吸空间。在页面发布之前，请确保在不同的设备上测试留白，以确保可读性。

对于大多数字体来说，1.5到1.625的行高是一个比较稳妥的选择。

设计模式要为品牌标识起补充作用

在界面创建一个全新的点击或滚动模式是不必要的，通常不会给用户留下深刻印象。

应该使用用户熟悉的模式，例如在网站顶部添加导航栏（在大多数网站上都能看到），而不是在底部列出网站的功能，让用户需要滚动才能找到这些功能。

设计保持一致性

应该保证你的设计在所有渠道都保持一致性——包括网页，应用程序，移动端，社交媒体账号等等。

当用户访问你的网站或查看社交媒体资料时，应该给他们一致的熟悉感。尽量保持颜色和字体的一致性，这会让受众更好地联想到你的产品和品牌。也可以确保用户在点击你的网站时不会感到困惑。

总而言之，在UI设计方面，可以经常问自己这些问题:

• 用了多少种字体?

• （如果超过一种字体）是否可以简化网站，或者在页面上限制字体效果更好?

• 图片上的文字是否易于阅读?可以在不同的设备上读取吗?如果答案是否定的，那么给图像添加一个覆盖层。

• 网站的哪些部分居中?把它移到左边是不是更好看?（要注意的是，要根据设备调整对齐方式。比如在手机端上居中效果可能比较好，但在较大的显示器上左对齐可能比较好。）

• 用了多少种颜色?一个个尝试使用更多或减少颜色，并尝试限制彩色文本的使用。

• 段落和图片间隔空间是否合理?尝试增加或减少留白的数量，以改进原有的设计。

• 所有的页面或帖子都有相同的导航吗?尽量让滚动和单击模式在整个面板上保持一致。

• 所有的页面设计是一致的吗?如果不是，试着保持所有页面的颜色和布局一致。

以上就是改进UI设计七个要点，希望对你能有所帮助。

注文章由站长之家编译自medium

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

编者按：设计原则总是看起来简单抽象不言自明的，但是在细分的设计领域，这些原则其实有着各自不同适用情况，有着「特定的条件」。图标设计，就是如此。今天的这篇文章，来自专业的图标设计师 Helena Zhang，她结合自己制作 Phosphor 系列图标的经验，来分享她对于图标设计原则的理解。

这些设计原则就像一份清晰的设计框架，或者设计自查表单一样，帮你规避设计陷阱，让你的设计成果更加出色。

创建高质量系列图标，你得使用一套周到系统的方法，需要有训练有素的双眼，大量的迭代学习，以及坚持实践，才能做到。下面，我将结合7项设计原则，和大量的实际案例，来为你详细说明，如何创建高质量的图标。

掌握这些设计原则，就是创造出优质图标的关键。

1、清晰

图标存在的目的，是快速传达概念。

下图是 Prius Prime 仪表板上的图标。

在这一系列符号当中，你能明白其中哪些的含义？对于这款车的驾驶者而言，可能会随着使用时间的积累，逐渐明白其中一部分图标的含义。很大程度上，这是因为这些图标本身并不直观。你可能需要对着说明书，才能明白它们各自的含义。

我们可以从下面看到，图标是怎么一步步变得难以识别的：

当图标开始使用我们不熟悉的含义和隐喻时候，它就自然变得难以理解。从左往右数第三个图标，是安全带的提示灯图标，当它亮起的时候，意味着你没有系好安全带。这个含义相对直观，你可能能够很快掌握。而最右边的这个「电动助力转向系统警告灯」含义就非常模糊了。

通常，不清晰的图标设计会让你感到沮丧，但是对于开车的人而言，含义模糊的图标意味着误解，而误解的结果可能是生命安全。

下面是我们更为熟悉的图标——喜爱、警告、音乐和向上。

上图为 Phosphor Carbon 中的图标

向上的箭头在很多场景当中，都是非常清晰、实用的符号。

纽约地铁中的标识

最成功的图标设计，不仅仅是让图标本身易于理解，而且对于不同的文化背景、不同年龄段、不同知识背景的人都能理解，只有做到这样才行。

如果你想要表达的信息过于抽象，那么单独使用图标，可能不是最清晰的解决方案，应当将图标和文本标签结合起来使用。

2、可读性

有了易于理解的图标之后，你需要确保它的可读性足够强。

Icons in the Amtrak mobile app

由于细节太过精细，很难让 Amtrak 的图标被清晰地感知到。

Transit 应用图标也有相同的问题。它们的剪贴板这个图标中的细节很难看清：

Icons in the Transit mobile app

稍加调整之后，好了很多：

Adjusted clipboard icon

当你在处理图标中多个不同的图形元素的时候，应该确保其中的空间留足。太细小的笔触细节、更多的信息量会让图标显得更加难以阅读。

Google Maps 的公交车图标就非常的出色——它看起来足够小，但是可读性也很强。

Google Map icons

3、对齐

确保每个图标都感觉平衡，尽量进行视觉对齐

不平衡的播放图标

Unbalanced play icon

在这个播放图标当中，尽管三角形被放置在中间位置，但是它并没有视觉对齐，我们的眼睛看到的时候，会觉得中间的三角形说向左靠的。三角形靠左的这一边在视觉上更重，因此它应该向右移动一点来确保平衡。

就像字体排版设计师，他们也经常会微调文字的布局来确保视觉平衡。比如字母 i 和 j 顶上的小圆点会偏移，而字母 O 的上下部分则为稍微超出边界，来确保字体的平衡。

设计的时候，适当的微调就能达到平衡的效果。

Balanced play icon

明显更好了。

要点：不要单纯的相信数据，要用你的双眼来进行检查和修正。

4、简洁

用尽可能少的词汇来进行表达和描述，这样会更加优雅高效。

「将你所学的知识分享出去，可以增强你对于这门学科的理解。」

Material Design 在他们的导视系统中，使用的图标大都足够简洁，他们善用图标而是说话：

这是一个复杂的船的图标：

它还有更为简约的版本：

Succinct boat icon (Source: Material)

简洁是图标设计的精髓之一，因为我们经常需要在很小的屏幕上操作，图标可以传达很多信息，而不同文本或者其他复杂的内容。

在用户界面当中，简约准确的设计风格能够凸显重点，让内容发挥效用。Telegram 的图标设计，就非常的简约有趣：

Telegram icons

有的时候，UI图标会选用更偏向插画风的样式。下面这些关于美食的图标就设计得非常令人愉悦，代表泰国菜的图标中，虾的描绘就非常传神：

Yelp icons by Scott Tusk

图标可以适用于各种不同的硬件平台，手机、 电脑、平板，适当的信息量意意味着设计师可以在色彩、层次纵深上，有更大的操作空间。因为图标本身会应用于特定的APP 或者网站当中，因此图标可以适时地凸显品牌和产品特征。

iOS 平台上的 Procreate 、火狐和 Netflix 的图标

5、一致性

为了让图标家族显得更加和谐，始终保证相同的样式和设计规则

在 iOS 13 之前，苹果的图标设计有着各种不同的粗细笔触，不同的填充样式，大小也各不相同：

仔细看看这套图标，是不是有的图标看起来比其他的更重？

任何图标都有着相应的视觉重量。而视觉重量取决于图标笔触的粗细、填充模式、大小和形状这几个属性。而图标设计的难点就在于，如何控制所有的这些参数，做到整体的一致性。

苹果公司最近引入了 SF Symbols 这个功能，将图标直接制作成为图标字体，在这套字体当中，图标有 9 种不同的「字重」和3种不同的的风格（也许有点复杂，但是绝对充分够用）。从图标到符号，在填充模式、笔触轮廓等多个不同的属性上，确保你能挑出感觉更加和谐的图标。

Icons from Apple’s SF Symbols

对于一个大型的成套图标而言，保持一致性并不是一件容易的事情，尤其当这套图标涉及到多个制作者的时候。遵循清晰的原则和规范在此时上至关重要的。

这套 Phosphor 图标是由我和另一位朋友共同制作并严格测试的，我们使用一套准则确保这 700 个图标保持一致性。尽管每个形状都不尽相同，但是它们给人的整体视觉重量是完全相同的，并且很好地相互组合到一起：

Subset of the Phosphor Carbon icon family

6、个性化

每套图标都应当尤其独有的风格和气质。是什么让它们与众不同？它们对于品牌是否有所助益？它们会给人什么样的情绪？

Waze icons

Waze 大受欢迎的用户界面，很大程度上是它本身所使用的图标设计所造就的。这些用色跳脱斑斓的图标，仿佛在说「我们就是特立独行！」

Twitter 的图标是柔和、清晰明亮的：

Sketch 的图标则是精致而通透的：

Freemojis 的图标是可可爱爱的：

而这些 Android 的图标则风格各异，抽象风、像素风、霓虹风，不一而足：

7、易用性

完美地绘制了整套图标之后，你的工作并没有完成。接下来，你需要继续做测试和其他的准备工作，比如让参与图标制作的志愿者可以更好地参与后续的制作和完善，让设计师在日常设计工作当中使用和测试，在数字屏幕和印刷品上应用确保效果，让开发者将它们集成到其他的服务当中，确保能够应用。

一套高质量的图标，需要经过良好的组织、记录，并且在不同的应用场景中进行测试，并且最好能够得到个性化图标制作工具的支持。

7.1、组织性

你需要确保图标集的整齐规范，有合理的命名，便于查找，并且想清楚以什么样的方式来进行分类。按照字母顺序？按照大小，还是类型？

这套 Nucleo Sketch 图标，是按照也没类型来进行组织分类的

7.2、有据可查

你需要阐明整套图标的核心原则：

我以我所制作的 Phosphor 系列图标为例（和以上原则内容有重复）来进行说明：

• 清晰：首先要清晰，确保图标可被识别，具有可读性，不能牺牲图标的意义和清晰度。
• 简洁：尽可能少地使用细节。Phosphor 系列图标的原则是还原。每个笔触都要简洁明了，传达准确地信息。
• 个性：可以特立独行一点。谨慎的添加独特的细节，让原本可能非常冷硬的图标设计变得温暖。

下面是技术规则。我还是以 Phosphor 图标作为返利：

• 使用 48×48 px 的画布
• 使用 1.5 px 居中笔触
• 笔触末端使用圆角
• 使用连续的笔触，除非断开的线条有助于理解
• 尽可能使用直线、完美的弧线，角度以15度为增量
• 必要时调整曲线以符合设计原则
• 尽可能使用整数、使用偶数作为度量，必要时可以减少 1px 或者 0.5px
• 尽可能使用下面的元素来进行设计：28×28 px 的圆圈，25×25 px 的正方形，28×22 px 的矩形
• 保留6 px 的裁切区域

按照这这样的步骤来进行设计，并根据需求来公开相应的文档，就像下面这样：

• Material System icons
• IBM’s UI icons, App icons, and contributor guide for icons
• Shopify Polaris Icons

7.3、进行测试

检查一致性。确保图标在不同场合可以使用，并且尺寸合理。确保它们和大型是视觉系统能够协调存在。

将图标排列在一起，并且按照以上的 7 个原则来进行检测。

Phosphor 的品质控制流程中所用到的测试表。

7.4、定制化工具

最后，如果你有足够的资源，可以开发相应的工具来方便用户使用图标。

Material Design 让用户可以通过自定义库来访问图标，搜索文件，选择喜欢的格式、配色、大小和主题。

Font Awesome 的图标设计并没有完全遵循上面所提到的全部原则，但是它依然是目前来说最易用的图标集。它提供的功能甚至超出了以上提到的范畴：它支持前端框架、CDN、图标字体以及 SVG。

Font Awesome 的图标排行榜

下面是一些额外的图标素材资源。

7.5、资源

• Feather：这是一款精美的简约线性图标合集，包含有 200+ 图标，可以轻松缩放
• Material system icons：包含 1000+ 实用的 UI 图标，有5 种不同样式
• Nucleo：这套图标非常全，有3万多个，有三种不同样式，线性、多彩扁平和符号式
• Streamline：这是一组精美的、包含三万多个线性图标的图标合集图标合集

这个图标合集项目虽然在质量上参差不齐，但却是非常适合拿来搜集灵感、作为参考好地方。

Icon Managers

这是一款来自 Nucleo 的应用程序，你可以导入图标集，查看，修改，导出，非常实用。

文章来源：优设网    作者：Helena Zhang

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

不知道你是经常会遇到这样的情况：

拿到一个APP产品不知道如何去分析他的好坏，又或者总是分析的很片面，要么仅仅是交互，要么仅仅是视觉

那么有什么好方法能够帮助我们更全面更系统的分析一个APP产品的好坏呢？

首先

我们需要明白的一点是，我们在分析产品时，应该从山顶逐渐往下看，才能够看到山的全貌，站在山脚下只能看到自己视野几百米的范围。

接下来

我们去分析一个APP产品的时候，就可以通过一个万能的公式更全面更系统的去层层剖析:

1、战略存在层(它为什么存在)

产品的核心驱动力是什么？

这个产品带给用户的价值是什么？

这个产品带给企业的价值是什么？

2、能力范围层(我们自身能力)

能做什么，不能做什么？

现在的能力储备是否能够支持？

做到这个需要什么样的能力储备？

3、资源结构层(内外部资源有哪些)

产品的利益相关者有哪些？

内外部有哪些资源？

竞争对手是哪些，相对于他们优势和劣势在哪里？

4、角色框架层(产品各个角色)

体:产品构建的矩阵如何，这个产品处于什么位置？

面:各个板块的使用场景、目的是什么？

线: 页面的布局如何？

点: 这个功能的目的是什么？用户如何交互？使用流程是否合理？...

5、感知层(如何感知产品的不同)

感知层很多时候设计师都会纠结在细节里面，总会分析色彩、图标、间距等。而感知层最重要的是要分析这个产品的调性如何？和其他同类的差异在哪里？界面设计是否能够吸引用户？

最后

我们通过这个五个步骤去分析下今日头条APP

1、战略存在层

核心驱动力：算法推荐+优质内容

用户价值：今日头条带给用户的价值是通过了解用户的喜好，精准推荐给用户最感兴趣的内容，提升用户的阅读效率

产品价值：以今日头条作为基础的流量池为其他产品相互导流

2、能力范围层

2019以前今日头条的slogan是“你关心的，才是头条”定义今日头条的核心是推荐算法

而2019年之后今日头条的slogan是“信息创造价值”定义今日头条的核心是打造优质的内容，让信息创造价值

今日头条从技术到内容的转变，靠的是今日头条的长久以来的能力储备，所以我们会看到今日头条推出的一系列对内容创作者的扶持计划。

3、资源结构层

今日头条的利益相关者：消费信息的用户、产生内容的创作者、广告商

竞争对手: 腾讯新闻（腾讯）、网易新闻（网易）、搜狐新闻（搜狐）、微博...

优势:今日头条通过推荐算法构建了早期产品的核心竞争力，吸引了大批大V和信息消费者，具有先发优势，之后又通过内容产品矩阵构建自己的护城河

劣势: 竞争压力大，都在竞相进入内容领域

4、角色框架层

体: 今日头条经过几年的发展，逐渐构建起一个内容聚合平台（图文、短视频、长视频...），作为基础的流量池，为其他的产品相互导流

面: 

首页模块你可能感兴趣的，和你感兴趣的内容

西瓜视频，你可能感兴趣的短视频

放映厅，你可能感兴趣的长视频

所以，我们从导航栏就能够可以看到今日头条产品所构建起来的面：

核心是千人千面的定制化推荐，核心之外是图文、短视频、长视频

接下去，就是线和面的分析，这就到了布局和功能层级了，这是交互方面的内容，我就不再一一细说了

线: 页面的布局如何？

点: 加这个功能的目的是什么？用户如何交互？使用流程是否合理？

5、感知层

人去感知一个物体通常常是通过5种感觉：视觉、听觉、味觉、嗅觉、触觉。互联网的产品不像线下体验店5感都能够体现，而我们感知互联网产品主要通过视觉和听觉这2种感觉。

• 我们听到的是今日头条的报道、今日头条的视频广告

• 看到的是是今日头条的产品、广告图。而的核心是今日头条的"信息创造价值"，围绕这个最基本的核心，给用户的感知才是一致的，才是和其他产品塑造差异化的核心要点。

  
  

基于这些我们再去分析里面的细节就游刃有余了

比如，同为新闻自媒体平台，今日头条把内容创作者放置在列表页明显的位置，而网易新闻、腾讯新闻在内容列表创作者的名字却被弱化了，原因就在于今日头条定位的是自媒体新闻平台，重点在于内容创作者，而网易新闻、腾讯新闻定位的是新闻媒体平台，重点在于内容。

文章来源：站酷  作者：馒头UX

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

互联网因为技术的快速发展，用户的普遍性决定了互联网所必备的特点就是：创新、用户体验、快速迭代。而竞品分析应该贯彻应用的不同阶段。

我们在做竞品分析时，首先确定竞品分析的颗粒度，竞品分析可以做得更细，但是必须根据分析的动机、需求出发，清晰自己的目标，来判定做怎样详细的一个竞品分析文档（根据项目大小、时间限制等，选择适当的竞品分析程度）

01 竞品分析四大流程

1.确定竞品分析的目的：明确分析目的，和控制分析产出一样重要，分析是为了有价值的情报收集，而不是无意义的跟踪复盘。

2.筛选出目标产品：从行业出发去选择对标的竞争对手和潜在的竞争对象。

3.收集竞品资料：从分析的纬度来确定，不同职能区分，侧重点会不同（但各纬度是有机联系的，不可以孤立对待）。

战略定位、盈利模式、用户群体、产品功能、产品界面（交互方式、视觉表现）

4.分析、输出竞品分析报告：可采用【总-分-总】的结构

[ 总 ]

首先说明分析目的，然后拿出各模块的结论，这是第一个；

[ 分 ]

围绕这些结论，展开你的分析过程，所有的过程分模块展示、最好要有数据支撑；如果没有，就要有逻辑表达，这是中间的部分；

[ 总 ]

最后得出你在这次分析之后的感受，认为产品应该遵循什么、借鉴什么、避免什么，这是最后一个。

注：分析要追求的是客观性，不要为了分析而分析，不要为了结论而拼凑论据，分析结论的可用性并不应影响分析的初衷。

02 具体分析从哪些点入手

1.市场分析：市场规模、市场趋势、月活跃人数等

2.用户分析：用户地域分析、用户使用时段分析、用户年龄段、用户性别比例等

3.目标用户需求：A、B、C

4.产品信息：产品基本信息（最新情况、产品口号、产品定位、特点、市场规模）

5.产品迭代信息：版本更新频率、优化程度

6.核心竞争力分析

7.功能结构及其分析

8.基本功能对比

9.功能差异化分析

10.界面分析：主要界面、操作流程

11.盈利模式分析

12.其他方面：根据产品特性和类别区别对待

03 竞品分析的相关方法

1.用户体验五要素法：从抽象概念 —— 具体表象

战略层：

这个层面分析， 大多数情况下得出不了什么实质性的结果（也会有厉害的PM能分析出战略上的建议点，不过这都是属于专门去分析战略层的竞品分析）一般战略层面公司的领导或者创始人起初就会想的很明确。如果这个层面都没思考清楚，项目做的意义也不存在了。

产品目标、用户需求

范围层： 

一般是对明确的几个竞品进行功能清单收集，分析一些差异化的功能，然后分析功能背后的原因。别人这么做，有什么意义？能带来什么样的结果？能衍生出什么？

定义需求（内容清单、功能规格说明）、需求优先级排序

结构层：

针对竞品在这个层面需要下功夫，需要去分析梳理竞品的产品流程。比如：注册流程、支付流程等等。去分析现在竞品大多采用什么样的结构设计，比如：什么Tab结构、抽屉式结构等等。

交互设计、信息架构

框架层：

这个层面需要去收集的是竞品的信息是怎么设计的？收集一些竞品的相关细节设计。

界面设计（页面布局和界面各类控件）、导航设计（全部、局部、辅助导航等）

表现层：

一般不用做过多的分析，可留给设计师发挥，留给设计师专门做这个表现层的竞品分析。

感官设计（实现了以上四个维度需要满足用户的感官感受）

2.YES/NO法

主要适用于功能层面，简单来说就是将功能点全盘罗列出，具有该功能点的产品A便标记为“Yes”，没有该功能点的B产品标记为“No”，通过比对可以清晰地了解功能点上产品间的异同。

3.评分法

这个方法在用户研究工作中常会用到，通常适用于定量研究的问卷调研中，即给出1～5分的区间，根据产品中的某一方面或某点进行打分。

4.分析描述法

指将不同产品特性以比较的形式描述出来。

5.SWOT法

针对所要分析的竞品，从“优势、劣势、机会、威胁”四个维度进行比较和梳理。

并且可以进行两两组合分析：

1）SO战略就是依靠内部优势去抓住外部机会战略；

2）WO战略是利用外部机会来克服内部劣势的战略；

3）ST战略就是利用企业优势去避免或减轻外部威胁的战略；

4）WT战略就是直接减少内部劣势和避免外部威胁的战略。

6.Base+Solution分析法

Base：目标用户是什么？目标用户的核心需求是什么？通过什么解决方案能够满足？同其他产品相比，解决方案有什么差异化和卖点？如何推广营销？市场效果如何？

Solution：解决方案如何实现？还有多少空间？陌生用户进来如何使用？信息组织、交互如何？为什么要这么做？是否符合用户预期？配色、UI是否符合用户审美？用户会在哪里困惑？用户打开产品的频率如何？用户是否会向他人推荐产品？

7.Kano模型（卡诺模型）

是对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。

在卡诺模型中，将产品和服务的质量特性分为四种类型：

1）必备属性；2）期望属性；3）魅力属性；4）无差异属性。5）反向属性不是用户需求，提供反而影响产品体验。

具体请查看专题文章：产品分析方法之：KANO模型

注：在描述分析的过程，尽量的可视化你的分析过程，这样别人在看的时候清晰易懂！

04 竞品分析的辅助内容

1.数据的引用

分析报告中针对用户体验方面的要素很容易夹杂过多的主观因素，譬如我们容易下这种结论：这种设计不合理！”这类主观的评断。在一份竞品分析报告中，如果为了说明某一条，那量化的数据必然是重要参考依据之一。所以，数据变得比较富有说服力。

数据从何而来？月活排名可以来自Appannie、Usage Intelligence，网站排名来自Alexa。其他数据包括百度指数、淘宝指数、易观智库、CNNIC、艾瑞咨询、新浪微博、微信、上市公司财报等都是比较主流的平台和渠道可以作为数据来源。

2.对比时有截图作参照

这方便读者了解，也在一定程度上有利于保证整份报告保证清晰可读、重点凸显、结论突出。

3.必要时可加任务或案例

任务和案例起到的作用一是佐证，二是便于读者清晰地能够在相应的场景下理解。比如当比较A产品的某项功能或业务逻辑上的问题时，如果引入一个贴切的典型案例或一个模拟的任务会让读者更加有代入感，更便于说明。

另外，在这里也可以适当的引入真实的用户评论。

05 得出结论/建议

1.首先我们也是按照从大到小去写，从框架—功能—流程这个维度去书写总结！

 2.对于结构：我们应该采用……

3.对于功能：我们应该把功能A、功能B加入到版本V1.0内，把功能C滞后、不做功能D…….

4.对于流程：我们可以借鉴竞品A的某某流程、竞品B的某某流程……

5.对于色彩：我们可以以某某颜色为主、某某颜色为辅……

文章来源：站酷  作者：体验为王UX

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

--手机appUI设计--

--bs界面设计--

一、前奏

在谈回调函数之前，先看下下面两段代码：
不妨猜测一下代码的结果。

function say (value) {
    alert(value);
} alert(say); alert(say('hi js.')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

如果你测试了，就会发现：

只写变量名 say 返回的将会是 say方法本身，以字符串的形式表现出来。
而在变量名后加()如say()返回的就会使say方法调用后的结果，这里是弹出value的值。 


    

        1
    

    

        2
    

二、js中函数可以作为参数传递

再看下面的两段代码：

function say (value) { alert(value);
} function execute (someFunction, value) { someFunction(value);
}
execute(say, 'hi js.'); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

与

function execute (someFunction, value) { someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.'); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

上面第一段代码是将say方法作为参数传递给execute方法
第二段代码则是直接将匿名函数作为参数传递给execute方法

实际上：

function say (value) { alert(value);
} // 注意看下面,直接写say方法的方法名与下面的匿名函数可以认为是一个东西 // 这样再看上面两段代码是不是对函数可以作为参数传递就更加清晰了 say; function (value) { alert(value);
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

这里的say或者匿名函数就被称为回调函数。  


    

        1
    

三、回调函数易混淆点——传参

如果回调函数需要传参，如何做到，这里介绍两种解决方案。

• 将回调函数的参数作为与回调函数同等级的参数进行传递

• 回调函数的参数在调用回调函数内部创建

四、写在最后

回调函数应用场景多用在使用 js 写组件时，尤其是组件的事件很多都需要回调函数的支持。

转自：csdn 作者：dkvirus

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

如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。

我们的眼睛很奇怪，经常误导我们。但如果你知道人类视觉的特殊性，就可以构建更好的设计。

20 世纪 20 年代，格式塔的视觉感知理论得到了发展。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。你可能已经听说过诸如亲近原则或共同命运规则之类的话题，本文引用了格式塔理论的一些观点，重点介绍了实践方面而不是学术研究上的问题。在底部有关于这个主题的相关推荐列表，有兴趣的话可以浏览。

测量尺寸和视觉尺寸

400 px 的正方形和 400 px 的圆哪一个更大？从几何角度来说，它们的宽和高是相等的。但看看下面的图片，我们的眼睛立刻发现正方形大于圆。

下图是带有标注的：

让我们再看一张正方形和圆的图。就视觉重量而言，它们相同吗？

至少很难立即指出哪一个比较重，不足为奇，因为我增加了圆的直径。

我重叠了第一个和第二个示例中的形状。左图，400 px 正方形的面积大于 400 px 圆的面积。这就是为什么我们在视觉上看到它更大的原因。右边，圆和正方形是平衡的，基本上它们的面积也相似，但是宽和高不同。

我们可以看到菱形、三角形具有同样效果。为了在视觉上与正方形保持平衡，它们应该更宽和更高，以使得它们的面积相似。基于面积的方法非常适合最简单的形状。

在 icon 中怎么使用呢？

当你创建一组图标时，重要的是要使它们保持平衡，以使图标不会显得太突出或太小。如果我们直接把图标放在正方形内，那么越像正方形的图标看起来就越大。

我建议补偿不同形状图标的重量，允许视觉上较小的图标悬挂在正方形外，并在视觉上较重的图标和正方形之间留出一些距离。

下面是一组修改过的图标：

现在了解了，为什么一个图标区域总是比图标主体大，只是为了让非正方形图标适合它并且看起来不小于正方形图标。

检查视觉平衡最简单的测试是模糊设计。如果你的图标变成相似的斑点，则它们具有形同的视觉权重。

例如，Facebook 和 Instagram 的图标是方形的，而 Twitter 的图标则是鸟的轮廓，Pinterest 则是一个环绕的「P」。这就是为什么 Twitter 和 Pinterest 的图标要大一点，以便于它们与 Facebook 和 Instagram 图标保持平衡。

视觉平衡的另一个例子是将文本框与圆形按钮放在一起。如果按钮的直径等于文本框的高度，那么按钮会显得更小。当你把它放大一点，整个结构就会变得更加平衡。

但如果你改变按钮的样式，就不需要放大了。在下图中，按钮和文本框的高度是 80 px，但是右边的按钮视觉上看起来并没有很弱，因为它是黑色的。

Tips：

• 视觉重量是人眼感知物体大小和重要性的方式，它不一定等于其像素大小或面积。
• 圆形、菱形、三角形和其他非正方形图形需要更高和更宽的尺寸，才能与正方形图标在视觉上保持平衡。
• 图标区域应该留有一些空间用于视觉平衡。对于一组图标来说，这是至关重要的，它们应该确保看起来是一致的。

不同形状的对齐

视觉对齐是视觉平衡主题的延续。看下图：它们看起来一样长吗？

以 px 为单位，答案是肯定的。但是，第一眼看上去，第一条要比第二条长一些。

现在看下图，有什么变化吗？

我对第二条矩形应用了视觉补偿。允许尖峰值超过上条矩形长度的 20 px，是补偿峰值之间的间隙并使两个形状在视觉上相等。

还有一些特殊图形的例子：

所以，如果你设计一张带有折叠条纹和文字的海报，或者商品图角标设计时，请注意使它们达到视觉平衡。锐利的边缘应该超出形状的其他部分。

文本和有背景的段落怎么对齐？这取决于背景的视觉密度。如果它很轻，你可以将突出显示的段落与文本的其余部分对齐。

由于背景较浅，因此不会中断正常的文本流。

对于深色背景，可以使用不同的方法。在图片上，黑色背景与文本的其余部分对齐，而其中的白色文本以缩进方式放置。

与浅色背景的情况不同，黑色背景具有较大的视觉重量，如果目标是无缝浏览段落，则最好按照以下所示的方式对齐。

相同的原理同样适用于按钮和输入字段。当然这只是基于人类视觉感知的设计。

左侧输入字段的浅色背景可以超出输入标签和输入文本的范围。「发送」按钮的与输入背景的右对齐，因为该按钮较暗且从视觉角度看较重。

在右侧，输入具有实线边框，当用户输入的框内有凹痕时，我将其与标签对齐。「发送」按钮的侧面为三角形。该按钮向右移动一点，看起来与上面的矩形输入字段保持平衡。

在这里，我们探讨另一个对齐问题：文本和图标按钮的对齐。下图，文字看起来居中吗？

秘诀在于，右边是三角形，因此在右边的按钮上我将文本向左移动了一点。此外，箭头按钮的宽度为 40 像素，看起来与矩形按钮在视觉上相等。

文本按钮不仅具有水平对齐，而且具有文本和背景的垂直对齐。我想讲的第一种方法是在各种操作系统、站点和 APP 中使用的。它是基于字体的大写字母的高度（即上限）对齐方式，它等于「 H」或「 I」的高度。

基本上，大写字母上下的空间和按钮的边缘是相等的。这是有道理的，因为操作按钮通常以大写字母书写，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。

另一种方法是使用字体的小写字母的高度（所谓的x高度）来对齐文本和背景。在 sans 和 sans serif  字体中，它等于字母「 x」的高度。

由于文本的主要视觉重量集中在小写字母的区域，因此该方法也是可行的。

这些方法之间有什么区别吗？有区别，但差异不大。

对于「取消」和「确定」（常用按钮），由左列代表的上限高度方法肯定更好，因为「取消」没有下垂部分（y，j，g，p ），并且「确定」都是大写字母。

右栏中显示的 x 高度方法仅对「同步」按钮更好，该按钮的名称同时具有上下突出的元素；「取消」和「确定」两个词似乎位置太高了。

图标按钮的情况与文本按钮略有不同，让我们在圆形背景上放一个「发送」图标。哪个看起来视觉更加平衡？

希望你已经注意到左边的那个有问题。发生这种情况的原因是对齐方法不同。第一个选项将图标视为矩形，在某种程度上说是正确的，因为当你将 SVG 或 PNG 文件给开发人员时，它是一张矩形图。右侧显示图标的位置，使其所有尖锐边缘与圆形按钮背景的距离相等。

如果为开发输出文件，则需要保留一些区域，以便他们可以使图标在背景上正确居中。

同样「播放」按钮也一样，如果直接对齐这些形状（圆角矩形和三角形），它们将看起来很奇怪。

如果要使三角形的视觉位置更好，则将其围绕并使其与按钮背景对齐会更好。

Tips：

• 带有尖锐边缘的形状应更大或更长，以与相邻的矩形对象保持平衡。
• 帽高对齐是在按钮背景上定位按钮文本的有效方法。
• 正确将三角形图标放在按钮上的一种有效方法是将其包围并使其与背景对齐。

视觉圆角

还有什么比圆形更圆的图形吗？

我曾认为没有，但是正如我在本文开头所说的那样，我们的眼睛很奇怪，有时会欺骗我们。那么，下面图片中哪个圆看起来最平滑？

我之前问过的人在 3 号和 4 号之间进行纠结。1 号和 2 号绝对太瘦了，5 号太丰满了。如果我们将第三个和第四个变体（一个几何圆和一个修改的圆）重叠在一起，我们会发现，后者比第一个重一些。

为了说明我的意思，我从 Futura，Circe 和 Geometria 这三种著名的几何字体中选取了字母「 o」。鉴于高质量字体是基于人类的视觉感知构建的，并且使用了复杂的视觉构造系统，因此我认为它们的圆形看起来比几何形状更圆。

让我们将它们与几何圆重叠。即使是最几何图形的 Futura 的「 o」也有四个突出部分。此外，Circe 和 Geometria 的字母比圆圈宽，但即使它们的高度和宽度相等，我们也可以看到这四个「肚子」好像小了。

因此，从视觉角度而言，修改后的圆（右侧）看起来比几何圆（左侧）更「圆形」。

我们如何使用这种现象？当然要进行圆角处理。如果你在图形编辑器中直接修改圆角，效果其实并不好。

人眼立即发现直线突然变成曲线的点，而且这种处理看起来并不自然。

考虑到我们的视觉感知，我修改了这个圆角。

这种嵌入具有超出几何圆的额外区域，使得直线与曲线相交的点不那么明显。

只是尝试感受一下这些嵌入方法之间的差异。

现在，我们可以将这种方法应用于圆形按钮。

你可能已经注意到，右侧的按钮具有更平滑的圆角倒角，并且你的眼睛更加舒适。

与 APP 图标相同，人们不只是使用标准的圆角整数来达到理想的效果。在深入探讨此问题前，让我们看一下下面图形的差异：

第一个是我在 Sketch 中创建的圆角矩形。第二个形状是超椭圆形，也称为 Lamé 曲线。它是由法国数学家加布里埃尔·拉梅（GabrielLamé）发现的，根据公式的不同，其范围可能从四点星形到实际上看起来像是圆角正方形。

马克·爱德华兹（Marc Edwards）提出了 Lamé 曲线的公式，该公式产生了平滑且视觉上完美的形状。从 iOS 7 开始的图标均基于此设计的。

后来，通过添加黄金比例和用于指导新图标设计者的网格来修改此形状。

使用超椭圆等形状的主要好处是其光滑的外观。另一方面，这些非标准形状很难到真实项目中。应该将多个 SVG 组合在一起，在代码中包含特殊的公式或脚本，或者像 Apple 为其应用程序图标那样使用 PNG 掩码。

至于设计过程本身，有一个简单的圆角修复方法。您需要调整合适的圆角度数。

锐角倒圆的差异更加明显，这对于绘制道路或交通设计非常重要。

Tips：

• 几何圆角看起来很假，因为你可以轻松看到直线突然变成曲线的点。
• 视觉上正确的圆角需要特殊的公式或手动调整形状。

有时，非几何正方形看起来更像方形。你可能会想，「这是什么废话？」 那么，你看下面的正方形？哪种形状看起来更方形？

如果你选择了左侧的形状，你就能感受到视觉差异的点。

文章来源：优设网    作者：UX Talk

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