本文列出了一些 UI 设计相关的资源。

本文对应用程序设计中常见的组件及其作用进行了介绍。

好的设计师理解心理学在视觉感知中的强大作用。当别人的目光与您的设计创作相遇时，会发生什么? 他们对您分享的信息有什么反应?

格式塔原理概述

前言

举一个场景化的栗子，大家平时逛街的时候能记住哪些广告呢? 我们虽然每天看到那么多的信息，但是真正记住的却不多。还有当我们看到复杂的事物的时候，心里会涌现不舒服的奇怪感受，有时候这种感受没有办法用语言来描述。那么为什么会有这些感受呢?

其实道理很简单，我们做的东西是给人用的。人是动物不是一台机器，人的认知和记忆能力是有限的。视觉设计和心理是相互联系的，并且可以相互影响。格式塔原则可以帮助我们理解和控制这些联系。

今日头条的出现颠覆了传统新闻产品(如网易、新浪和搜狐新闻)。

传统新闻依靠着编辑人员的推荐，将新闻触达给用户，而今日头条则依靠着新闻算法，抛弃传统人工分发的思路，使分发效率数以万计的提升，其迅速崛起，成为头部新闻资讯产品。

今日头条作为新闻信息流的头部产品，里面的设计细节和设计逻辑值得我们思考和分析。

信息流样式

什么是信息流? 信息流由两部分组成，信息流=信息+流。

信息指的是内容，这些内容可以是新闻、视频、图片等，所呈现的样式多为列表或卡片。

流指的是瀑布流，可以无限滑动浏览。

所以信息流就是可以无限滑动浏览内容信息。

左右横跳的泳道

最近经常在人人视频上看电视剧，发现人人视频在设计上有个很有意思的点。

它的电影页中有很多推荐电影片单，每个片单里有 5-12 部电影；碍于手机尺寸，用户只能看到 3 部电影；如果您对这个片单里的电影比较感兴趣，可以滑动查看更多的电影——这种横向滑动的设计又被称之为“泳道”。

那么问题来了，究竟向哪个方向滑动呢?

或许您会觉得这是一个送分题，肯定是左滑啊；没错，您去查看 100 个 APP，这种水平横滑的泳道，99 个都是左滑的；但是人人视频就是那唯一的特例，它是左滑和右滑相互组合的。

文章列表

• 格式塔原则

• 布局中的左和右

• 信息流介绍

在 UI 设计中，图标不是孤立存在的。我们学习图标的设计，不是为了画一组套图，然后上传到设计平台中分享或求赞，而是要在真实的项目中发挥作用。如果不了解图标应用到项目中的知识点，那么真实的图标设计水平就会在项目设计过程中被损耗。

所以，本章讲述工具图标在项目中应用的方法。

装饰图标最主要的应用区域，集中在首页的快速入口上，也是今天多数应用中会使用的组件。下面，我们会讲解国内主流应用中的几种装饰图标的设计。

情绪板

情绪板是在执行一项设计操作之前非常重要的一个步骤，情绪板并不是像设计平台展示作品集里那样放几张图片，几个关键词，而是一套对接下来设计的一个风格走向定位。根据不同的用户人群，不同颜色的色彩情绪，不同产品的业务，将用户调研的结果，产品的背景进行总结与思考，定位接下来的设计风格。

绘制流程

选取照片

观察生活，对想画的图标进行照片实物造型的提取。图标是对生活中事物的精简概括。利用现实照片作为设计参考可以让绘制出的图标更真实，辨识度更高，还可以做到差异化设计。

造型勾勒

使用矢量软件的基本图形与钢笔工具描着照片进行轮廓的绘制。

面性图标在操作中和线性图标的最大差别就在于描边和填充模式，我们知道为了满足像素对齐的要求，线性描边会在操作中产生很多不可控的因素，要用很多额外的操作步骤去弥补。在面性图标中，就不需要使用描边，并且使用相同的图标模板即可。

下面就进入本篇的具体案例演示。

基本面性风格

如图所示，我们使用线性图标中的样式，设计成面性效果。具体的操作步骤就不需要再完整演示了，只需要将所有线性风格演示中的描边替换成填充，再使用对应的路径查找器功能即可。