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

文章列表

• 格式塔原则

• 布局中的左和右

• 信息流介绍

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

格式塔原理概述

前言

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

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

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

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

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

信息流样式

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

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

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

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

左右横跳的泳道

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

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

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

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

文章列表

• 搜索框

• 文本框

文本框的出现几乎可以追溯到可视化交互诞生的源头，是一个再经典不过的「鼻祖」控件了。我们每天都在和文本框打交道，不论您是产品设计者还是用户。

文本框的拆解

文本框(Text Fields)根据 Material Design 指导规范，被拆解为七个部分。分别是:

• 容器(Container)
• 前导图标(Leading icon)
• 标签文本(Label text)
• 输入文本(Input text)
• 尾随图标(Trailing icon)
• 激活指示器(Activation indicator)
• 帮助文本(Helper text)

情绪板

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

绘制流程

选取照片

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

造型勾勒

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

规范是图标设计的重点。

搜索框是我们最常用到的 UI 控件之一，它几乎存在于所有的网站和 APP 当中。许多人认为搜索框不需要设计，因为它似乎就是由两个最简单的元素构成的。在以内容为导向的网站中，搜索框的重要性会相对更明显，用户需要快速又无痛地找到他们想要的内容。而对于设计相对负责的网站而言，这个需求尤其明显。搜索框的可用性设计，是整个设计的关键，也就是如何让用户尽量节省时间，搜到他们想要的内容。

使用放大镜图标

时至今日，搜索的概念和放大镜图标之间的关系已经深入人心，根深蒂固了。在日常最常用、最易于识别的几个图标当中，放大镜所带代表的搜索图标就是其中之一。