设计师版式宝典！从零开始教你掌握网格系统

网格的类型许多设计师都会在网格系统上开始一个新的设计。不同的人有不同的习惯，有人喜欢12列的网格，有人则喜欢16列网格，还有人喜欢24列的网格等等等等。重点不在于网格一共有多少种类型，而在于你实际应用的那一个！在网页设计中，网格系统是十分常见的，响应式网页设计的推广，网格的地位又得到了提升呢！我个人更喜欢12列的网格。每一列的宽度取决于最终输出的稿件应用在哪，比如打印或网页

交互体验 2014年09月22日

谈谈(web)网页设计中的留白原理 &# 8211; 2016版

设计中存在很多关于留白的只是，零零散散在网上也看过很多，总感觉比较零散，自己根据自己的感觉，重新把留白的原理和一些技巧系统的归纳整理了以下，也对自己的一个提升。分享给大家。外文：Whitespace感知概念：归结于网页设计中的负空间，它将网页设计中的图形、文字、行列、图片和其它元素合理的布局到整个页面空间里，使其显得优雅和谐并不破坏原有的空间结构，属于一种空间关系。网页中留

用户研究 2016年04月10日

好图标的秘密！顶尖设计师分享的6个图标设计优化指南

UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章，强烈建议阅读。这6个步骤应该作为一个指南而非教条来准守。这篇文章中我们会将这六个步骤应用到一只柯基犬的图标上。这个图标有潜质，但是还不足以被认

业界 2016年06月01日

第四集！值得每个设计师收藏的《完美像素使用手册》之软件技巧篇

前三集我们聊了很多设计原则，今天让我们再来看看具体怎么操作。Photoshop是我们（纪念碑谷团队）以及所有设计师天天都在用的东西，所以接下来的部分会向大家展示一些PS的使用方法和技巧。虽然这个册子确实出来挺久了，大概14年的时候优设网就有推荐过它：http://www.uisdc.com/pixel-perfect-precision-handbook（内附PDF英文原版

产品 2016年08月14日

想学会临摹？来看看高手是如何解构一张海报设计的！

@大猫Addict ：如何解构好的作品呢？在我们的设计生涯中需要多看多想，当然要看很多的好作品来提高自己的审美，扩展自己的武器库。那么当我们看到好的设计作品时怎么办呢？大多数情况下我们都会选择看过之后就没有然后了。其实我更建议大家把好的作品保存下来，然后去思考这个作品为什么要这样做。也就是知其然，知其所以然，知道它为什么好，好在哪里，这样的思考过程对自己的提高是很有帮助的。

产品 2016年10月28日

UI 基础总结（组件，网格模式，格式塔原理）

这里分享一些自己平时看到的基础知识进行总结。此文先只简单介绍UI中的组件，网格模式 及格式塔理论。希望对大家有帮助~组件组件分为栏，内容视图，控件，临时视图。栏： 状态栏---透明的，大部分出现在屏幕顶部。显示手机状态：信号，电量，时间等部分（但是游戏，工具等沉浸式APP可以没有状态栏）导航栏---属于状态栏下方的栏工具栏---工具栏不具有导航作用，它为用户提供可以控制当前

产品 2016年11月02日

如何用网格系统设计出大师般的APP界面

色彩、图形、排版、网格等是构成系统四大视觉语言的基础原子单位，今天来说下网格系统在产品设计中的运用及定义方法。初识网格Pinterest就如上图所示，我们设计产品界面中离不开网格，网格让界面更加有节奏且信息层级更清晰，使我们能够舒适的阅读及很好使用产品。糟糕的网格系统是无规则，无节奏感可言，给用户呈现出一种劣质的产品目前产品界面设计的现状大家做平面设计的时候应该听过 Gir

业界 2018年01月15日

资深设计师心得：网格，更科学的排版方法

网格在有规律的设计布局中是设计的一个基本原则，网格的应用能够让你的设计更有秩序、更有规律。简单的说，网格的使用就是用更科学的方法去排版。1. 为什么要学习网格有效、有规律的设计布局是设计的一个基本原则，网格无处不在，可能只是你没有注意到它的存在，简单理解就是把一个页面，根据版心划分为无数统一尺寸的网格，广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。它能让你的设计更

产品设计 2018年08月16日