编者按：这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次，她要设计的是一个控制面板的界面，如何控制不同UI元素的平衡，如何从零开始构建，相当值得学习~
欢迎来到我的「UI设计指南」第二篇！如果你对于我的第一篇文章印象不错的话，那么这一篇应该也会合你胃口：
当然，请注意一点，我创建 UI 界面的过程中，绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体验分析」这样的前置步骤，而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中，开头的这些步骤是无法忽略的！
这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。
这一次，我们将会设计一个服务于医疗行业的控制面板（实际上，这个设计的初衷来源于我的姨妈，她是一名医生，不仅要治疗病人还要处理大量的文书工作），而整个设计我将会在 Sketch 中完成。
通常，我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框，然后将他们按照需求和大小进行排列，直到最终满足我的想法为止。我选择了一些随机的、但是相近的色彩，确保我能看清位置就可以了。
然后我针对哪些内容在哪里显示，进行了基本的说明。
这就是一个非常原始的界面框架了。
将要分析的竞品排了个期，从最难最不熟悉的开始。为什么从最难的开始，可能是个人习惯吧，吃掉最难的那个，后面就会更上手。突然想起之前读的一本书「吃掉那只青蛙」，很不错的一本书，有时间去温习下。
一个产品，其实会有很多功能点，有核心的主要功能，也有一些辅助功能，也会有一些让你忽略，但关键时刻很需要的应急功能，而这些点都需要去整理出来。
这一点很重要，要先熟悉产品。如果对产品都不熟悉，那还是先不要做竞品分析。因为很难判断竞品的功能和风格是否也适合当前产品，因为对产品的不熟悉，会产生误判。
当然，产品的目标人群，产品定位，适用范围等等，都会影响产品分析。
所以，花时间熟悉自己负责的产品，是不能跳过的。
1. 制定时间规划
最好事先做好时间规划，可以有一整块的时间，这样分析产品时，思绪也会比较完整和连续，可以更专注。计算大概分析一个产品需要花费的时间，最好不要用零碎时间来做，这样只会增加时间上的代价，也会增加挫折感；
2. 确定分析的目的
在「竞品分析」中，想要得到的结论和重点是什么。比如重点可能是产品的报表功能、产品的代码审核功能等等，目的的确定能让分析更有针对性，减少干扰。无目的随意分析，得到的结果也会是零乱不堪，最后只是在浪费时间。
3. 寻找帮助者
每个产品，都有其不一样的特性和产品逻辑，你不一定能够完全 cover 到，甚至有些点就是比较难理解的，特别是偏技术性的名词，这时若有技术同学的帮助，就会如虎添翼。所以最好可以事先找一位产品相关的技术同学，询问这段时间是否有空，帮助你解答一些问题。
个人建议：能够在网上查到的资料，就不要先问人，除非时间成本特别高。一方面也是提升自己解决问题的能力，另一方面，也是节省彼此的时间。对方愿意帮你解决问题，不代表你要把所有问题一股脑倒给他，自己了解后再问，也是对对方的尊重，大家的时间都同样宝贵。
4. 其他tips
如果是内部公司产品，提前确认是否需要权限，提前申请好，减少正式开始后，还要等待审批时间。外部产品可以提前找好网站，可以咨询的客服入口，如果是付费竞品，咨询是否可以向财务申请报销等等。
1. 像个用户一样去使用产品
很多时候，设计师的职业病，会让我们过多注重视觉享受，而忽略作为用户，想要的有时候只是功能可用。今天不管你把「扫一扫」功能做得多美，美得像个艺术品一样，可是当扫码付款的时候，怎么也扫不出来，那种站在店家前面忐忑不安，怎么也无法完成付款，后面一堆人等你，你仿佛听见后面其他顾客窃窃私语地讨论着发生什么事情。那种场景我相信你不想经历，同样我们也不应该让用户来经历。
我的项目主管，一直都有提醒我，要像个小白来使用和设计我们的产品。这句建议，也一直在提醒着我。如果站在高姿态来俯视用户，我们就很难真正的「懂」用户，进而很难设计出真正满足用户需要的产品。
这是竞品分析，但是我们也需要转换自己的角色，变成用户。这样能更明白究竟竞品带给用户是便利，还是麻烦。有时适时抽离「设计师」的角色，会让你更能去体会用户的感受。
所以，先去用这个产品吧，然后才会有然后。
2. 如何去使用竞品
一个产品的使用，总是有它的使用场景，手机端的就更多样了，简直无所不在。B 端产品可能会相对少，一般是在办公场景或是特定场景。
可以像个编剧一样，给自己写点剧本，加点情节，塑造一个角色，假设竞品是电商方向，你可以想像，自己是一个刚毕业的社会新人，你可能没多少钱，你可能刚拿到你人生第一桶金，你想买件衣服犒劳自己，或许你会是数码控，你关注已久的佳能单反在双 11 中有优惠等等，然后再去预想接下去的情节，在购物方面会考虑的问题，或许是好用，或许是有趣等等。
也可以做任务式去使用产品，比如以电商为例，任务可以是买件喜欢的衣服，从搜索产品，到找到喜欢的衣服，添加购物车，提交订单，等待发货，收货，确认收货。这一个完整的流程走下来，就会体验产品功能是否好用，搜索结果是否符合预期等等。
3. 记录
使用产品的过程中，会遇到很多情况，有些是可预期的，有些是不可预期的。有些让人觉得很好用，有些却会让人受挫。将这些情况都记录下来，有助于分析产品的可用性程度和满意度。
上面这些只是举例说明，在竞品当中可能遇到的一些问题，也可以去反思自己的产品是否也会这样让用户感到困惑。有时候，太熟悉自己的产品，会自认为产品很完美，会理所当然认为「大家都这么认为」……
记录问题、原因，感受并截图为证（有必要可录屏），后期可追溯。写得越详细越好，后面整理的时候会更清晰。
4. 各个击破-功能了解
在熟悉整个产品后，就需要对产品的各个功能进行分析了解、梳理。了解竞品的核心功能是什么，核心功能在解决用户什么问题，是否真的解决了用户的痛点，其他功能又在整个产品当中充当什么样的角色。
将竞品的功能与本产品功能对比，不只是对比有无，更进一步地去想，为什么有这个功能，为什么没有这个功能，有或没有是否会提高用户的使用效率，用户的留存，用户的体验等等。
功能多不代表好，如果功能不能给用户带来益处，其实它的存在只是增加开发成本而已。
其实竞品分析中，最难的是总结归纳。做了一堆的分析后，结论是什么呢，这个结论如何写呢？
可以先从设立分析目的开始，找到中心轴线，然后再慢慢延展开来。在要做总结报告时，你会欣喜地发现最初设立目标是多么的重要。
文章来源：优设 作者：箴盐设计
互联网时代的人们早就受够了信息爆炸，我们每天都会经系统推送、应用通知、微信、电话、短信等各类渠道收到大量消息。有多久你没有查收自己的邮箱？就算打开邮件，又有多少推荐内容让你有兴趣进一步了解？是 EDM 老了没用了？真正的原因，可能是我们一开始就错误地忽视了 EDM 设计。
对于 95 后以及更年轻的群体来说，EDM 确实是个上了年纪的概念。EDM（Email Direct Marketing）也叫 Email 营销、电子邮件营销。企业向目标客户发送 EDM 邮件，建立同目标客户的沟通渠道，向其直接传达相关信息，用来促进销售转化。
这个起源于上世纪 80 年代中期，正式诞生于 90 年代的早期互联网产物现在已经三十多岁了。时至今日，EDM 早已成为了全球公认的网络营销重要方法之一，其卓越效果为互联网人数十年的实践所证实。但 EDM 在我国的应用还处于非常低级的水平，不仅没有系统的理论，在实践中也存在许多误区。
在这样一个重视审美与强调更新及时的时代，EDM 邮件朴实无华的外表与「一旦发出就固定呈现」的内容特质显得有些格格不入。作为用户体验设计师，我们可以做什么让 EDM 不落伍呢？
首先，我们可以在设计层面上避免 EDM 邮件被邮箱软件识别为垃圾邮件，不带敏感词语或内容、淡化商业广告色彩、减少数字与附件使用都有助于降低被邮箱系统屏蔽的风险。我们更可以在全量发送前，对指定邮箱进行小范围测试以确保邮件发送成功率。
其次，从其历史来源来看，早期的 EDM 来源于垃圾邮件，这使人们对其本能地缺乏好感，存在排斥心理。因此 EDM 的节奏和时机必须做好控制，对邮件发送的各类数据做好统计，掌握用户的阅读习惯，能更好地提升邮件的打开率。
邮件内容需要设计为一定的格式来发送，常用的邮件格式包括纯文本格式、HTML 格式和 Rich Media 格式，或者是这些格式的组合。一般来说，HTML 格式和 Rich Media 格式的电子邮件比纯文本格式具有更好的体验效果。但 Rich Media 格式的电子邮件易造成邮件过大，并且无法确保用户在客户端均能够正常显示，所以在设计时我们优先选择 HTML 格式邮件。
与网页不同，我们无法针对不同设备做邮件内容相应的适配设计，兼顾设备特性的通用模版也就成为了设计时的必要关注点。对用户来说，一封邮件阅读体验很差，那么无论邮件的内容多么精彩、多么吸引人，最终的结果也可能只会被丢弃在一边。因此，我们通常会按照移动端尺寸对邮件界面进行设计，注意字体大小、最佳尺寸以及链接按钮的大小等。
除此以外，邮件中链接的定义也应得到我们充分的重视。由于邮件中的链接我们同样无法预先针对不同打开设备进行单独编辑，在有条件的情况下我们可以对链接所跳转的页面进行响应式设计以确保高质量的跨端浏览体验，或者我们也可以采用默认跳转路径而后重定向的传统方式。
EDM 营销与一般的营销方式最大的区别是：EDM 是一对一的沟通，让用户感觉到尊重，让他感觉到这是为他所建立并且是他所独享的沟通方式。在标题、正文的文案上强调「我」，在内容上也应如此。用户在意什么，我们就发送什么。把握住用户关注的信息，帮助用户收集支持 TA 做决策所需的信息。当我们发送邮件给用户，给予其操作行为的反馈或提醒时，不要浪费这最好的营销机会。优先提供给用户与之行为或特征相关的服务与帮助，其次通过个性化服务或产品推荐促进购买或注册转化，有助于我们将营销机会转化为实际销售成果。
做好个性化对 EDM 内容模型要求颇高，但从设计角度讲，我们完全可以以原子设计思维实现邮件内容模块的低成本创建与复用。以通用设计模块为「壳」，内容与组合规则为「核」，快速响应 EDM 的运营需求。
以上 5 点就是我结合近期项目经验所得。EDM 虽老，但设计可以让 EDM 老而弥新。祝经你精心设计的 EDM 邮件，一经发出，封封有回应
文章来源：优设 作者：鱼子酱聊设计
这几天在工作中处理了一个历史遗留问题：弹窗适配，几经折腾终于落定发包。于是我也趁着这个机会把弹窗体系梳理研究了一遍。
我们常见的弹窗有对话框，提示框，有时候在需求沟通中经常会听到产品同学说，给这里加个弹窗，那里加个提示框吧。实际上，这个弹窗到底该不该加？这个弹窗承载的是提示说明文字内容，还是需要引导用户下一步操作？接下来我们从弹窗的属性来聊聊我们的弹窗到底在什么时候加比较合适？用什么形态展示体验会更好？
常见的模态弹窗有这几种：对话框、动作栏、浮层。
对话框：对话框主要是给用户提供选项、相关的操作。另外，在一些对话框中，也可以展现图片、头像、步骤图、其它输入项等。
动作栏：常见的动作栏一般会出现屏幕下方，比如选择某个内容时候，出现的选择。
浮层：弹出窗口，浮动于顶层窗口，气泡。
非模态弹窗：是指不强制用户操作，他的作用相当于内容信息提示，他的出现不打扰用户的当前操作，并且有时间限制，在一定时间里能自动消失。比如「xxx 功能已更新哦」，这种提示是不需要用户点击操作，让用户看到就可以了。
常见的非模态弹窗有这几种：toast/hud、snackbar、notice（通知）
toast/hud：iOS 用户更习惯于在中间感知反馈信息，通常在信息提示完 3 秒左右后会消失，安卓通常会出现在屏幕顶部或者下部，不会遮挡主体内容。需要注意的是 toast 只有文字，hud 是可以带有图标的。
snackbar；可以理解为加强版的 Toast
notice：系统消息、通知推送，也是不干扰用户行为，有消失时间，是非模态的弹窗。
了解完弹窗体系后，我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适？我们可以从下面的几个使用场景来看用什么样的弹窗合适。
1. 重要打断用户操作
在一些重要操作，避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊，有的地方出现得不合时宜，打断了用户的使用状态。所以在设计这类弹框时要非常谨慎，得通过多研究确认是否有必要出现。
对话框相对来说比动作栏更重要，因为在视觉中心，更能强烈引起用户的重视，对于十分重要的内容需要打断用户上一步任务的，采用对话框的弹窗，对于不是特别重要信息露出又需要终止用户上一步动作的情况下，一般采用动作栏弹框。
2. 定制化广告弹窗
如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的，要展示出与众不同的特色，在视觉上比较突出，会使用模态的弹窗浮层形式。
3. 给予一定提示
比如提示用户状态、信息、反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。一般使用非模态的弹窗。
出现在用户操作完之后的反馈，比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。
可以不用弹窗的反馈例子：完成页
比如已支付成功、下载完毕、签到成功，这一类是告诉你上个动作结束了，下一步不需要进行引导了，这种反馈大多数都不采用弹窗形式展现了。
1. 层级关系
弹框是内容和导航的补充，用于通知、操作菜单、成功或加载状态的 toast，他是写在蒙层上面的一层内容。
2. 适配方式
下面我们需要了解的是这几种弹窗在开发那的实现形式。我们可以理解为 2 种形式：
一种是开发直接用系统的接口，缺点是具有不可定制，形式美观度不够好。
另一种是开发用代码会单独写出一个模态弹框系统，这套系统与整体设计语言具有一致性，可以复用在各个任务中，可以定制化设计。
需要注意的是，代码写出来的模态样式要考虑在不同机型的适配情况，考虑不同机型的边界。这个适配也有两种实现形式，一种是固定宽高尺寸，展示在不同机型尺寸中，另一种是常用的等比例缩放。这个就需要开发与设计进行密切的沟通，能尽量合理地在不同机型展现更加合适，避免出现极限的情况。
我们是这样操作的，为了避免尺寸比例混乱的情况，会设计一个弹窗的宽高尺寸范围，开发同学代码写出的这套弹窗的适配在各个机型中，是在一定缩放比例下，适用各个不同情况下的视觉展示。这套弹窗可以调用在首页引导、升级等各个页面的弹窗设计中。
文章来源：优设 作者：咏舍
本系列文章旨在由浅入深、由理论到实践地介绍 VR 设计。无论你在做哪个领域的设计，都能通过这个系列了解 VR 设计的特点。本文是第一集，深入分析 VR 界面的文字设计。
文章来源：优设 作者：爱奇艺XRD
今天，90％ 的媒体互动都是基于屏幕的，通过手机，平板，笔记本电脑，电视和智能手表来与外界产生联系。多屏设计已成为商业设计中不可或缺的一部分，响应式设计正迅速成为常态。作为 UI 设计师，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。
即使是我们只针对一个尺寸进行设计，我们也经常面临设计布局方面的问题。合理运用栅格系统可以帮助我们控制布局结构并实现一致和有组织的设计。栅格系统就像无形的胶水一样凝聚一个设计，即使元素看上去是彼此分离，但通过网格将它们连接在一起，实现良好的层次结构，位置关系和一致性。
设计师和开发者之间的协作过程中，栅格系统在前端开发中是被应用的很广泛一套体系，许多优秀的设计都使用了栅格系统，使用栅格系统可以加速开发并保证视觉还原。栅格系统虽然是传统设计方法中的一部分，但它仍旧能帮助我们去设计这个多终端的世界。看到这里，你可能非常想知道栅格系统在页面中是如何运作的，那么今天我们一起来学习并且实践我们的格栅系统。
「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」
「栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。但是必须学习如何使用网格。这是一门需要实践的艺术。」
——Josef Müller-Brockmann《平面设计中的网格系统》作者
栅格系统可以让你依靠秩序与逻辑去完成设计。
早在 20 世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序，从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展，直到 20 世纪 40 年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 Josef Müller-Brockmann（约瑟夫·米勒-布罗克曼）所著的《平面设计中的网格系统》一书，自 1961 年出版以来畅销至今，对设计界有着深远的影响。史称 Swiss Typography Movement （瑞士新浪潮平面设计运动），后来成为全球风靡的 International Typographic Style （国际主义设计风格)）。
△ 约瑟夫·米勒一布罗克曼 (Josef Muller-brockmann, 1914-1996)
瑞士的一位平面设计师和教师。1958 年任《新平面设计》（New Graphic Design）主编 1966 年被任命为 IBM 的欧洲设计顾问。布罗克曼因他的极简主义设计与简洁的排版、图形和色彩而闻名，他的设计对 21 世纪的众多平面设计师都产生了重大影响。
1. 减少决策成本提高设计理解力
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；UI 设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验。加快认知速度。这意味着用户在使用产品完成特定的任务时，例如发送消息，预订酒店房间或乘车。用户能够连贯地理解并找到下一条信息或下一步要采取的步骤。
2. 响应化
因为人们使用不同类型的设备与产品进行互动，从智能手表的小屏幕到超宽屏电视，交互是流畅的，并且没有固定的尺寸。使用产品时，人们通常会在多个设备之间切换，以完成该产品的单个任务。所以响应式设计不应该是一种品，而是一种必需品。这意味着设计师不能再为单个设备的屏幕构建。多设备环境迫使设计人员根据动态网格系统进行思考，而不是固定宽度。使用网格可以跨不同屏幕尺寸的多个设备创建连贯的体验。
3. 加速团队协作设计
当多位设计师共同设计产品时，一个统一标准就变得尤为重要。如果没有一个统一的框架去约束的话，我们的产品的页面和组件的标准可能各式各样，这样的话整个产品的页面都会比较混乱。因此，网格系统有助于将界面设计工作分开，因为多位设计师可以在统一的布局下进行不同部分工作，并且无缝集成并保持连贯。
4. 加速开发并保证视觉还原
大多数设计项目的实施，涉及到设计者和开发者之间的协作。栅格化提高了页面布局的一致性和复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。
1. 列和槽（Columns and Gutters）
列（Columns） 和槽（Gutters）。列（Column）是内容的容器，水槽（Gutter）用来调节相邻两个列的间距，把控页面留白；列和列间距加上页面边距（Margin）加起来屏幕的水平宽度。列和列间距的内容区域（Content width）由 N个列和（N-1）个水槽组成。通常情况下，web 端采用 12 列，平板采用 8 列，手机采用 4 列。当然，你可以根据项目特点来设计你的网格系统，列和水槽的宽度我们可以利用 8 点网格系统来定义，下面会讲到。列的数量越多，页面就会被分割得越「碎」，在页面设计时就会越难把控，适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的页面设计，列间距宽度数值对页面的影响，与外边距大体类似，即间距越大页面越轻松简单，反之亦然。用户已经习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此竖直方向可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，我们在执行设计时只要在水平方向保持规律的变化就可以了。
2. 页面边距（Side Margins）
页面边距就是内容区域（Content field）以外的空间，比较推荐的设计就是页面边距可以随着屏幕尺寸的增大而增大。页面边距在移动设备上通常是 12Px到 40Px 之间，在平板设备和桌面设备页面边距变化就相当多了。在响应式设计中，你选择了一个页面边距之后，缩小页面宽度时页面还是会有你设置的最小页面边距，直到到达下一个响应点（breakpoint）。当你增大页面宽度时，页面就有更多的页面边距，直到页面宽度到达下一个响应点（breakpoint）。
3. 模块（Field Elements）
模块就是你的设计区块，可以是一段文字，一张图片，或是其他更加丰富的元素。背景元素并不能算作是设计模块，所以并不需要遵循栅格系统。模块的定义是很灵活的，它可以是个小的单位或是元素，也可以是一个元素丰富的区块。
以 12 栅格系统为例，一个 12 栅格系统可以根据业务需要被 2 等分、3 等分、4 等分、6 等分、12 等分，还可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不对称分割，具体采用哪种比例的组合需要我们根据自己业务需求来定。
4. 8 点网格（8pt spatial system）
栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。目前最普适易用的就是 8 点网格。我们也可以利用 8 点网格法来制定产品中的间距，建立 8 点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。8 点网格有如下几点优势：
如果设计上没有立即可识别的间距系统时，这种设计可能会让用户感觉廉价、不一致，而且通常不值得信任。如果设计上遵循一个 8pt 网格系统时，节奏变得可预测和视觉上的愉悦。对于用户来说，这种体验是经过修饰和可预测的，这增加了用户对品牌的信任和喜爱。
无论有多少个设计师在协同合作，现在都有一个一致的间距规范，决策成本将大大降低。设计师可以轻松地从另一个设计师停止的地方开始设计，或者轻松地并行构建。我们定义下规范可以及时和开发同学沟通，因此可以为工程师节省时间。
5. 基线网格（Baseline Grid）
基线网格由密集的水平行组成，这些行提供文本的对齐和间距准则，类似于您在直纹纸上书写的方式。在下面的示例中，每 8px 行在红色和白色之间交替。
△ 基线网格
提示：将所有行高设置为基本单位（8x 或 4px）的增量非常重要，这样您的文本才能与基线网格完美对齐。
△ 字体行高
1. 什么是响应式？
设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来。这种无缝的体验，才是跨屏幕设计的真正难点所在。想要制定一套针对不同设备和屏幕的设计方案，你需要一整套的策略。用户体验同时包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，我们不仅要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用时的效率与体验。
2. 响应式设计的核心步骤
确保核心的用户体验
虽然用户体验是无处不在的，但是对于特定产品，最核心的体验是存在的。产品通常是用来解决用户所面临的特定问题的，它的这一特质让产品变得有意义。关键的内容和关键的功能的组合，通常构成了产品的核心用户体验。如果你并没有想明白这个问题，不妨问问自己：用户需要完成哪些最常见/最重要的任务？找到问题的答案之后，你的产品就应当从各个方面、各个渠道，完整而全面地支撑这些功能，帮助用户完成这些任务。举个例子，Uber 的核心用户体验是随时随地叫车，无论设备的屏幕大小如何，你进行的设计全部都应该围绕着这个需求和功能来进行。叫车是 Uber 的核心功能，即使使用 Apple Watch 这种极小的屏幕尺寸都应该顺利地完成这个任务。
敲定你的产品所覆盖的设备类型
现在的移动端设备屏幕尺寸各不相同，单独为某一个设备设计内容无疑是不现实的。根据你的产品覆盖人群、受众分类、使用场景，综合考虑你的内容会优先呈现在哪些设备和平台上，然后有意识地筛选出常见的设备类型：手机，平板，桌面端，智能电视，智能手表……
不同的设备组合通常是基于不同的场景、需求和服务来构成的，用户会针对不同的屏幕进行不同模式的交互，甚至处理的内容也会有差异。比如说，在手机上，用户更加倾向于使用轻量级的任务，并且进行一定量的沟通和交流。在平板上，用户行为更多集中在内容消费上，并且目前平板的使用量被认为在逐步降低。桌面端依然是用户完成较为专业、复杂任务的首选平台，足以应付复杂多样的内容。了解各种设备类型和使用场景是用来构建用户体验的关键。
针对不同内容来匹配用户体验
并非所有的内容都符合不同设备的使用场景，比如智能手表就不适合展示大量的文本内容。你的产品所覆盖的设备组当中，每种设备的使用场景不同，应该匹配的用户体验也不一样。移动端用户和桌面端用户的需求就是不同的，场景差异也很大。以 Evernote 为例，它可以在多种不同类型的设备之间同步和切换，其桌面端版本就针对用户的内容需求进行了优化：Evernote 的桌面端应用程序针对阅读性的内容和多媒体进行了优化，而移动端的 Evernote 则强化了拍摄记录、图片和音频记录的功能：其次，不同的设备屏幕具备不同的输入方式，设计师如果忽略输入方式上的独特性，也常常会出现许多问题，这里就不扩展开来了。
优先为最小的屏幕做设计
一直以来，设计师都习惯从最大的屏幕着手设计，最后考虑最小的屏幕上的显示效果，这意味着绝大多数的设计都是从桌面端开始设计的，通常桌面端的内容和功能更全面。当桌面端的整体设计完成之后，再推进到其他设备端的设计。然而，在进行桌面端设计的时候，我们常常会遭遇「厨房水槽」困境：由于产品通常会牵涉到多个利益相关方，许多多余的功能会被加入进来。而实践经验表明，移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品设计的起点。当你优先设计最小屏幕所需要的界面的时候，这种局面会强制你从最关键最重要的地方开始设计。这也是之前设计圈和产品开发领域一直所强调的「移动端优先」的策略的由来。在此之后，再进行平板、桌面和电视端的设计，就是一个自然地做加法的过程了。在绝大多数的案例当中，最小屏幕通常是手机屏幕。
测试你的设计
产品的测试环境并不一定都得是在现实世界中寻找，但是在尽可能让真实的用户来做可用性测试，并且在产品发布之前解决所有的用户体验上的问题。
3. 为何要利用栅格系统来进行响应式设计?
响应式可以响应的前提有两点：1、页面布局具有规律性、2、元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较快捷，所以响应式与栅格化天生一对好搭档。
第1步：确定列的数量
第一阶段先不要限制自己的列数。首先，创建一个低保真或高保真的原型。设计一些基本元素和用户流程。在此之后，就开始设计最优的列数和大小。如果在项目开始设计之后不得不改变我们的栅格系统，不要有负担，我们需要有一些试错的空间。
我们在设计页面时，用到最多的布局方式就是等分布局，即页面内容区域被 N 等分，每一份的宽度则根据屏幕宽度自适应调整。那么就从这个角度出发，思考一下页面的网格应该设置为多少列，才能的满足各种等分布局的需要。与 web 类似，移动端最方便的网格之一是 12 列网格。这个网格将允许我们在一行中同时放置偶数和奇数个元素。
对于移动端来说，12 列网格的缺点是一个列的宽度太小，你可能很少创建一个列宽度的元素。如果你选择 2、4 或 8 列网格，请记住在一行中放置奇数个元素可能会出现的问题。
Pro-Tip：
界面设计通常包含数百个不同的页面，因此，一个网格可能不适合所有的页面。如果需要，创建额外的栅格系统，但不要忘记设计的一致性。网格系统的一致性：相同的布局边距、列之间相等或成比例的水槽，以及更改列本身的宽度时其他模块也需要保持相同的比例。
第2步：定义水槽和边距
首先，让我们先翻阅目标屏幕的设计 Guideline，以找出通常页面边距（Side Margins）。目前，Android 和 iOs 的最小推荐布局边距为 16pt。web 端则依照屏幕尺寸不同而不同。这意味着，如果你希望遵循系统指南，则页面边距不应小于 16pt。（但可以更大的）
在选择 12 列网格时，列之间的水槽不应该太大，因为由于列的宽度小和它们之间的大宽度的水槽，列将在视觉上产生分裂的感觉。同时我建议你选择与8pt 间距系统成比例的水槽大小。所以布局的水平和垂直节奏会相互重叠。水槽与页面边距成比例。那么网格更加一致，也将允许我们轻松地在其中放置特殊元素，如轮播（carousel）。
第3步：定义 8pt间距系统
了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗。在大量的实践中，我们提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好地实现布局空间上的设计决策。定义网格系统方法很多，如运用 8 点网格系统、斐波那契数列、某最小原子单位的增量、从底层系统参数化定义间距等，我们以最小原子单位的增量为例去定义网格系统。最小单元格的数值选择需要从两方面考虑：
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4px 表现最佳，但是页面就会被分割的非常细碎，在设计时比较难于把控。因此我们需要根据 APP 的实际情况选择合适的数值，4px 或 6px 单元格比较适合页面内容信息较多，布局排版比较复杂的产品。而 8px 单元格对一般的设计场景都可以很好的满足，比较适合大多数的 项目，因此是比较推荐使用的。
那么假设我们以 8 为基准的去延展系统间距，得到如下间距系统：
1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，这里都是 8 的倍数或能被 8 整除
但是目前间距数量太多，过于细碎也会导致间距比较乱，所以我们继续优化梳理（以 6 为基准，前面个数是后面个数的 2 倍递增），得到以下间距系统：
1、2、8、16、24、32、48、64、80、96
第4步：sketch布局设置
利用 sketch 的布局设置功能，即可快速搭建出网格系统的参考布局，在平时做设计的过程中，可以经常使用 Ctrl+L 快捷键切换布局的显示，提高设计效率。
我们来解释一下这些设置分别是什么：
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的「数量」发生变化。为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。但是目前我有更多的响应策略，例如当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 组成的盒子（BOX）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。
1. 固定栅格或是断点系统（Fixed boxes or breakpoint system）
固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在桌面的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到平板屏幕尺寸临界点时，设计布局马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。下面是常见的断点系统（Breakpoint System）
如图，响应式是以视窗的最小宽度作为基本依据来制定每种宽度下 Columns、Gutters、与 Margins 的响应策略，也就是说 Viewport Min-width 是做出响应的触发条件，视窗每达到一个最小宽度，就会触发该宽度下预设的页面布局方式，而每种布局都是在该宽度下的最佳布局，也是因此，响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。
每个视窗宽度的最小值是触发响应的关键值，因此我们给这些用于触发的关键值起了个名字叫「Breakpoint」，每个 Breakpoint 触发一种响应策略。
2. 流动栅格（Fluid Grid）
流动栅格系统是编辑内容，仪表板，图像，视频，数据可视化等理想的响应策略。当窗口缩小时，内容将动态地发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。在各种情况下，对用户来说，扩展内容的大小比扩展可见内容的数量更有用。
所以我想说的是，断点 BreakPoint 只是一个更改布局的参考点。这就是为什么列宽和水槽的数量不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。
在每个断点处，列计数是固定的，列宽度是最小网格 8PT 的倍数。行高是列大小的倍数，遵循推荐的纵横比。边距和填充是小单位的固定倍数。在断点之间，实际列宽是网格区域的百分比，而不是一个小的单位倍数。内容尺度流畅。
首先从所以屏幕大小中选择一个基本尺寸，然后按照推荐的纵横比以基本大小的倍数构建每个响应式尺寸。当每个块使用相同基础大小的倍数时，就会出现网格。遵循此方法可确保栅格系统一致性，甚至跨产品的一致性。
3. 混合栅格（Hybrid Boxes）
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。后台系统设计、工具型的界面设计就比较经常使用网格和流动网格组合的形式。例如的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。混合栅格在每个维度上有不同的缩放规则，所以它们不使用统一的缩放比。当用户需要调整浏览器的大小以使内容在一个维度上伸缩而在另一个维度上不伸缩时，便使用混合网格。
1. 灵活面板（Flexible panels）
灵活的面板允许折叠和扩展状态。面板的展开状态为固定宽度，用户无法调节。当用户将鼠标悬停在折叠的面板上时，面板就会展开。当灵活的面板扩展时，它们要么压缩内容和网格，要么将内容推到浏览器边缘之外。
2. 固定面板（Fixed panels）
固定面板保持静态宽度，不能折叠，也存在于响应网格之外。
3. 悬浮面板（Floating panels）
此面板样式漂浮在主要内容区域之上，不影响响应网格。浮动面板将任何 UI 元素隐藏在其下方，用户必须将其移除。内联菜单、下拉菜单和工具提示也是浮动的。
写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，我知道对于我自己来说，我花了很多时间理解网格是如何工作的。我在 YouYube 上看了很多视频，也阅读了大量的文章，但每个人都在关注它为什么重要，却不去注重到底怎么在自己的项目中使用这些原则。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，你将会开始阅读这些设计系统。为了帮助理解，这里有一些设计系统概述了它们的网格使用：
在完全理解了网格的工作原理之后，你将成为了一名更好的设计师，因为你知道了你的设计将如何在临界值之间进行转换。你也可以落地你的设计，使它们能够达到像素级完美。这样的规范带来了更一致，更简洁的设计，当用户从一个界面到另一个界面流转时，这真的提升了产品的档次。我建议在你的设计中去应用这些网格，并和开发同学一起，以实践的方式将它们落地，这将会是一个非常不错的进步。
文章来源：优设 作者：IvanZheng
你不知道，香港设计有位比教父更厉害的教父。
香港自古以来作为中国一部分，具有深厚的中国文化根源，但同时又历经156年的西方统治，注定其文化基因会产生特殊成分，这些文化特质体现在了流行曲、武侠小说、电影制作等诸多方面，都产生一定国际影响，而其中同样具有代表性的还有香港设计。
香港设计起步较晚，但发展突飞猛进，很快涌现出大批人才产生了国际影响力，成为“远东设计风貌”中的代表地区。而回归前夕，香港设计师也开始热衷频繁往返内地，与国内设计师或艺术院校进行学术交流，并且逐渐开展在内地的业务，对内地的设计风貌也产生一定的冲击。
而香港跟深圳在地缘上亲密无间，深圳近年被册封为中国设计之都，其地位来源与香港的影响有否关系呢？香港设计是如何走向国际的？香港设计对中国设计师又存在什么影响跟启发？香港设计发展到目前有否青黄不接？
带着这些有意思问题，我们一起来聊聊香港的现代设计。
我们在上一期聊日本设计时，谈到“远东平面设计风貌”，其实香港就是这种风貌的代表中心，不清楚这个风貌的朋友们可以去回顾一下设计史太浓栏目上一期内容：“日本的设计水平为什么那么高”。我们这里大致给出几张海报让大家感受一下。
香港的现代设计发展比内地要早大致20年光阴，也就是1960年左右启动，至今时间长达60年，期间出现大量优秀设计人才与优秀设计，屡屡斩获国际设计大奖，并且对于香港文化的推动，创意产业的提升，作出了诸多突出贡献。香港得以成为远东设计风貌的代表有几个重要原因，包括了地域、政府态度跟教育等。
但在叙述这些原因之前，我想先给大家来点地理知识的普及，就是什么叫“远东地区”？
远东其实是欧洲人的概念，是指以欧洲为中心后，东边的国家，所以远东前面就有了“近东”及“中东”了，中东地区因为物质资源太丰富，常年战争不断所以比较知名，近东极少听，远东是随着亚洲几个国家的崛起所以颇为知名。
远东传统意义上包含的国家有：中国（当然包含了港澳台）、朝鲜、韩国、日本、蒙古、菲律宾、越南、新加坡、俄罗斯东部等等。而需要强调的是，设计圈里谈远东风貌一般不含日本，原因是日本设计足够厉害可以独立成项了，好比一个明星组合里某个成员爆红，独立单飞的情况一样。
而香港平面设计，在国际印象中，也基本满足单飞的条件，当然我说的仅仅是平面设计。我们将话题回到形成这个情况的原因，看看有否值得内地设计圈学习借鉴的地方。
1） 地域
香港沿海地区非常多，并且地理上处于亚洲心脏地带，交通优势非常明显，通常也被视为通过中国内地的一个门户，于是成为了内地、日本、韩国、东南亚、美国及泛太平洋地区交流的中心。
而且香港过去被英国统治了一个多世纪，让市民都兼备两种文化血统，精通中英文，并且对世界各地的文化时尚有足够的包容度，随着商业发展与经济腾飞，香港人也习惯让子女海外留学，这个留学群体就包含了大量设计师，留学归来的设计师带来诸多国际化设计语言，同时也吸引一部分优秀设计师来港发展，这一块我们后面将会详细描述。
2）政府态度
60年代开始，香港旅游业开始兴起，大量国际友人访港，于是1966年香港政府就成立了“香港贸易发展局”，跟当时的香港平面设计发展处在同一个时间，这个机构的职能主要是向世界推广香港，由此就产生了大量的设计需求，并且香港政府有意借助设计为推广手段，重视设计的环节与效果，促使香港设计风格的逐步形成，这种风格就类似日本的双轨制，既有东方韵味又符合国际主流。
香港第一代设计师也由此开始出现。其中包括了王无邪、石汉瑞、靳埭强、施养德、高文安、周志波、张树新、郭乐山等人。
香港政府对于设计的价值是深信不疑的，所以香港回归后， 在2001年成立了“香港设计中心“，这个机构获得特区政府鼎力支持，目的是推动香港成为具备高度竞争力及享誉国际的设计资源中心，除了设计技能的提升技巧与设计思想的交流外，香港设计中心也考虑到设计产业所需的相关技能，比方财经、市场推广、设计生产的管理等，常年举办讲座、展览、赛事等活动，并且通过媒介宣传香港设计，鼓励大家参与并重视设计，所以对香港设计又产生了一次非常重大及有意义的推动。
这一点，有点类似美国设计，香港设计对商业的重视程度非常高，但同时力求在艺术上找到恰当的平衡，关于美国设计，可以回顾设计史太浓之前的《商业设计祖师爷-美国设计》。
3）教育
由于政府对设计创意产业的重视，教育上也同步获得了体现，60年代末香港就开始出现设计专业大学，跟香港设计同步发展，香港设计教育非常专业，开放性强，多元化，并且前沿而务实。
香港设计大学集合了诸多优秀师资，以全英文方式授课，由于地域的优势，可以获取到国际的专业教学资料，还经常聘请国际一流的商业设计师来做客座教授，带来世界前沿的设计资讯，提供大量水平优质的选修课，这种教学配置及质量让香港的设计专业学生毕业后在国际上具有全方位技能及竞争力，从而良性促进香港平面设计的发展。
对于香港设计大师，内地熟知的主要是靳埭强、陈幼坚跟李永铨等，而有一位比前面诸位辈分更高的香港设计奠基人却不太被人谈论，好比一谈香港栋笃笑首先想到黄子华，而忽略了开山鼻祖许冠文一般。
这位大师有着纯正中国名字却并非中国人，这也是让他在内地不够知名的其中一个原因，他生于奥地利，在美国学习设计，法国深造，最后扎根香港发展，他就是在香港设计圈里鼎鼎大名，被公认为香港平面设计之父，类似黑帮里“啊公”这种级别的石汉瑞先生。
石汉瑞1934年出生于奥地利的维也纳，5岁移居美国，在纽约度过了他的青少年时期，成年后在纽约市立Hunter学院学习设计，毕业后去了耶鲁大学攻读艺术硕士，读完再去法国巴黎深造，所以石先生属于超高学历类型的设计师，期间他师从美国“纽约派”大师保罗·兰德及包豪斯1925年毕业留校的鼎鼎有名的设计大师赫伯特·拜耶，所以石汉瑞先生严格来说，其实属于包豪斯血统比较纯正的第三代传人。按辈分来说，他跟在哈佛学习的贝律铭先生（著名华裔建筑师）是同属一个辈分的。
石汉瑞来港发展也算机缘巧合，1961时27岁的他受香港《亚洲杂志》的邀请，担任设计总监，从而开始他的平面设计职业生涯，其时朝鲜战争结束不久，美国此前为了方便从亚洲市场获得物资储备，对日本、韩国以及中国台湾和香港地区所推行的政策是大力扶持其工商业的发展，有了这个前提，香港工商业逐渐兴起，而香港设计与其同步获得发展。由此也可以发现，所以很多大师的诞生都会基于一些社会变革的背景。
在《亚洲杂志》工作了不到4年的石汉瑞，在1964年30岁时独立创业，创办品牌创建与战略咨询公司，以企业形象设计为主要业务，开展全方位、多领域的平面设计工作，是香港最早推行企业形象设计的第一人。而当时香港人对于什么是现代设计，仍然一片模糊。
石汉瑞的代表作非常多，而且合作的都是大牌客户，首当其冲的就是当时的港英政府，比方石汉瑞设计了香港赛马会标志、汇丰银行标志，甚至是渣打银行发行的港币设计。70年代的石汉瑞在香港设计界已经是如日中天，有非常权威的地位。
0年代初，也许因为在《亚洲杂志》任职的缘故，当时的石汉瑞就已经在不断研究将东方传统文化与现代设计进行结合，在香港开创了跨文化设计的先河。对后来的靳埭强及陈幼坚产生巨大的帮助作用。
独立创业后的石汉瑞更是将这种跨文化设计风格发挥到了，前后服务了上百家香港大型企业或机构，石汉瑞平面设计作品的三个主要的特征分别是：创造性的字体设计、独特的实物与文字结合、跨文化的图像结合。而他几乎所有服务香港的作品都基本包含一种设计语言，就是东西文化相互交流与融合中保持一种独特的跨文化风格，比方下面这些作品：
石汉瑞运用中信泰富的英文字母“CITIC”进行创作，采用中西融合的方式将五个字母设计成中国传统灯笼的造型，同时又与企业中文名称的“中”相呼应，寓意着吉祥、信赖以及积极向上的企业经营理念，鲜红的标准色则象征着旺盛的生命力，可谓巧妙之极，浑然天成。
如果要在此讲述完石汉瑞的全部代表作并不可能，所以大致展示了一些可以说明其风格的作品，石汉瑞在香港的成就是公认的，但是石汉瑞虽然擅长做出东方韵味或者中西结合的作品，但他其实完全不懂中文，这是一件颇为神奇的事情，类似的情况还有最知名的中国绘画史是美国作家高居翰（James Cahill）完成的这件事情。
1972年，38岁的石汉瑞主力参与发起香港设计师协会的成立，1975年41岁的他被选为香该协会主席。同时石汉瑞还是国际平面设计联盟（AGI）中唯一代表香港的会员。
2004年时，已经70岁的石汉瑞获得了香港浸会大学（Hong Kong Baptist University）荣誉博士学位，他还曾多次获得国际奖项，包括亚欧基金商标奖、日本创意 （Idea） 杂志世界大师等称誉，以及被国际平面设计协会联合会（ICOGRADA）评为20世纪设计大师。2006年（72岁）奥地利政府为了表彰他对香港和奥地利两地所做出的巨大贡献，授予他金级荣誉勋章。
设计之余，石汉瑞也非常热心于香港的设计教育，60岁过后，出版了诸多重要的设计书籍，比方《跨文化设计—国际市场的沟通及交流》，如今已经84岁的石汉瑞先生仍然定居于香港，但是一般的活动已经鲜见其现身。
转自：站酷-设计史太浓
Dribbble 经历了资本入驻、创始人出走之后，最大的事情应该就是这次改版吧？这个全球最大、最有影响力的设计师社区的每一个动作都必然会牵扯着每个设计从业者的注意力，新版背后到底有哪些变化？这些变化又是出于什么样的想法来修改的？看看 Dribbble 的官博是怎么说的吧：
在过去的10年当中，Dribbble 已经成长成为一个全球性的社区，成千上万的人从这里获得启发和灵感，助力设计，而我们从最初分享设计作品小样的创意社区，逐步成长为一个全球设计师产品和作品集展示和社交的平台。在此，而我们也第一次开始问自己一个简单的问题：【我们到底是在做些什么？】
今天，我们很高兴宣布，我们在过去的10年当中首次进行了彻底的重设计。
在过去十年当中，我们所设计的 Dribbble 页面的特点，是将设计师的作品和内容放在首位，所以叫我们不追随潮流，采用了极简风格的设计，即使潮流来来去去，它们也只是 Dribbble 展示内容的一部分。我们提供了一幅未经修饰的画布，这样就可以和最疯狂最激进的设计探索相辅相成。不过，这么多年来，Dribbble 这种「隐形」的设计，在视觉美学上确实和时代脱节了。这次，我们创建了一套有着一致样式的设计和代码库，用以替代以往不断修改、庞大且不一致的代码。
「我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。」
如今，我们正在改进 Dribbble 的界面，以更加干净的布局、统一的设计系统、更加简化的配色方案、更加轻便的代码库（加载也更加迅速），以及全新配置的文件，来更好地帮你将作品推到最前沿，正确而合理地展示你的创作和个性。
我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。它是你分享设计作品和创造力的理想画布，而新的美学特质也可以更好地反应此刻我们的公司的气质。
在进行重设计的时候，我们明确知道，我们要完全重新思考社交化的设计师作品展示，并且将创意更大化地呈现。对于 Dribbble Pro 用户和 Pro Business 订阅者，你现在拥有一个全新的、经过全面修改的设置和配置页面，可以在 Dribbble 上充分展示自己的个性，
Pro 用户和 Pro Business 用户可以通过上传你自己的首图和定制化的欢迎语，来个性化你的个页面。
你还会注意到，你的个人页面还可以上传更大的照片，这可以让你的作品对于页面的访客、你的客户、招聘设计师的企业人事而言，看起来都是非常出挑的。新的网格布局是可以自定义的，因此你可以充分完美地设置和展示内容。
此外，我们还修改了「关于我们」这个部分，新版当中，这个部分你可以将所有的个人信息汇集到一起，以便完整而充分地展示你的个人经历、展示简历和技能。
如果你正在寻求工作机会，新的信息发送组件，确保了你的客户或者招聘企业可以一键联系到你，他们可以直接从你的个人资料页向你发送信息，非常轻松地和你取得联系。
当然，并非是只有 Pro 和 Pro Business 用户才能拥有高度定制化的个人页面，无论你是普通用户、内容创作者还是内容策划人，Dribbble 上每个普通用户的个人页面也都会升级。尚未订阅 Pro 服务的设计师会注意到，他们的个人页面会更加简洁，而设计作品会以更加聚焦的形式，吸引到每一个访客的目光。
我们将以往的带有分享功能的收藏合集页（之前叫 Buckets）给翻新了，你可以精心策划整页内容和案例，从一个情绪板到完整的项目，这意味着，借助这个收藏页功能，你可以更加轻松地在 Dribbble 上寻找和搜集灵感。
现在，我们可以非常自豪地宣布，即使你并没有将 Dribbble 作品给分享出来，每个人也都会拥有一个策划人页面，你可以在其中搜集和整理自己喜欢的作品，来展示你的个人品味，通过保存别人的作品，来创建新的合集，我们会自动将它添加到你的个人页资料页当中，让全世界的同好因为品位而关注你。
我们在整个改版设计过程中，面临最大的挑战，其实是图片网格，因为这是绝大多数用户每天浏览图片、发现设计灵感的地方，我们有意识地去弱化 Dribbble 本身 UI，避免喧宾夺主，让每个用户的作品成为视觉焦点，减少噪音。
2020 年才刚刚开始，我们迫不及待地想要展示我们计划中的一切。从案例研究到更好的视频支持，再到作品集展示，摆在我们眼前的改版路线图足以证明我们的雄心，所有的这一切都是为了让全球的设计师能够从中获益，走向成功。请期待我们进一步的改版升级吧！
文章来源：优设 作者：Dribbble
在B端的UI设计过程中经常要接触到大量的表单设计，且要展示海量数据，因此如何展示更清晰且让用户使用起来更便捷是设计师主要需要考虑的。结合自己在实际工作中遇到的列表类型总结了 web 表格设计的常用基础列表模式，并进行汇总以便后续使用。
一、基础型列表
web列表中的基础表格样式，通常用于横向表格的纵列数据较少时，使页面不需要滑动条也可以展示完全。操作项一般置于页面最右侧，便于用户浏览完全后进行操作。
二、 带有进度条的列表
用于查看数据完成进度，通常与网格型列表搭配使用，方便数据的直观对比，进度条用不同颜色进行区分，降低用户认知负荷。
三、可进行选择、排序、筛选、表头分组且带有冻结列的复合型表格
由于业务场景的复杂性，在B端系统中通常一个表格会涉及到大量复杂的操作，这就需要将多种样式叠加应用提高使用效率，防止用户产生疑惑。此图中用户既会进行单选或者批量选择，也有可能会对数据进行排序、筛选查看，对于专业术语或用户不常见的名词应给予一定的帮助说明。另外由于指标列选项过多，屏幕无法展示完全，还需要将重要列冻结，其他列增加滑动条来展示。
四、用于小计及总计的表格
小计行可能会出现一页多行的情况，用特殊颜色隔开，方便用户快速识别不同部分；总计行一般出现于页面最末端，通常只有一行，文字加粗显示。
五、行冻结、带有角标的可编辑表格
点击带有角标的表格可直接进行编辑更改数值；
整行冻结：当用户向上滚动查看或者翻页时，冻结的行依然悬浮显示于页面顶部。
六、主从型列表-可展开表格
表格默认收起状态，因为 B 端产品的业务数据量通常较大，默认展开多个主从关系表格对服务器的性能损耗较大。因此设定只有当用户点击下转箭头，此表格单独展开。
七、双排文字表格
适用于一屏以内文字内容较多且不需要完全展示时的解决方案。
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？当用户需要鼠标频繁去滑动横向滚动条查看一屏以外的信息时，易导致操作成本和对屏幕展示信息的记忆成本提高，而产品的易用性降低。因此提供了除增加滚动条外的另一条解决方案，使用双排文字表格，可节省列表空间，部分内容省略表示，鼠标hover时展示全部内容。
总结：
1.关于对齐方式：随着工作范围的深入展开，发现之前做表格时对对齐方式并未做过多深入研究，导致不同项目的对齐方式并不一致，因此总结出一套方法：文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；数据信息右对齐，更加方便数字大小的直观对比；内容一样居中对齐，视觉上更均衡；表头与信息内容对齐方式一致，给用户视觉上的统一感，降低视觉噪音。
2.当设计师把设计稿交给开发时，虽然已经标好注、切好图同时也包括交互注释，但是不代表开发能把界面表达的跟设计稿完全一样，甚至会有很大偏差。我们在设计的时候会考虑到字体大小、是否加粗、对齐方式等设计层级，但前端在开发时可能并不会注意到这些细节，因此需要保持与前端的良好沟通，包括出具走查文档及当面沟通，更能提高工作的质量和效率。
3.由于B端系统的复杂性，常需要不同的表单样式结合使用，因此还需设计时根据业务场景灵活运用。
文章来源：站酷 作者：小魔女4376
在日常的设计工作中，版式即一个画面的骨架，也是视觉传达的重要组成部分，版式整体的活跃程度也能起到改变画面基调的作用，这也就是为什么很多作品看似很「简单」，但却不失设计感的原因。如何把原本比较中规中矩的版式结构通过设计手法将其差异化、提升设计感、增强活跃度，这样做的目的是为了打破墨守成规的形式，提升用户停留时间，以及画面的趣味性，所以本期就和大家一起总结一些常用增强版式活跃度、提升版式设计感的设计手法。
色块叠压法，顾名思义就是改变色块的摆放方式，可以分为两类，第一类是色块与色块之间的叠压。通过色块与色块之间的非常规摆放形式，打破原本常规的版式结构，增强其形式感、活跃度。下面我们举个例子：
通过上下对比，我们不难发现，下侧画面整体版式结构更跳跃，直白地说就是不死板，而且形式感更强，给人的感觉也更舒服、有趣味性；而上侧画面的整体感受并不是说不合理，只不过相对比而言，这种结构形式很常见，版式结构变化性不高，形式感和设计感也稍有欠缺，那么造成这种现象的原因是什么呢？
色块叠压的形式在很多优秀作品中也是很常见的，这种手法对于版式结构的重组、改变也是最直观的一种。比如：
通过色块之间的相互叠压，形成了打破常规的效果，使得页面版式的跳跃性更强。
第二类是色块与主体的叠压方式，通过色块与主体物或者产品之间的相互叠压作用，营造出非常规的设计形式，从而提升版式整体的灵活度以及设计感。举个例子：
这里运用的就是将主体物与色块之间相互叠压的手法，形成了一定的前后关系，而且这里主体处色块最大作用还是打破常规的版面形式，目的是在视觉上给人以更加新颖、更具形式感的感受，且虽然做了结构上的改变，但并没有影响到主体信息的传达。切记，不能一味地追求非常规而忽略了设计本质问题，一定要合理运用。
当作品版式不够活跃的时候，我们可以尝试刻意改变某处的局部信息，将其放大，提升视觉变化的对比性，因为放大的元素其本身就具有很强烈的视觉冲击力以及装饰性，比如大号字体、数字、图形等等，所以局部放大的手法在页面版式设计中也是很常用的一种表达形式。比如：
将主体的某一处细节或者某一局部放大处理，与原本偏常规布局形成了鲜明的对比关系，对页面整体而言也起到了很好的打破版式关系的作用。试想一下：当用户前面一直在浏览比较常规的布局结构时，突然有 1-2 处这样非常规的处理模块，会很大程度上提升页面对于用户视觉的冲击力，给用户留下更深刻的印象，同时也使得作品整体的版面结构更加富有跳跃性。
还有另外一种局部放大形式，即在放大的基础上故意按照非常规的形式摆放，往往也能起到很好的打破版面布局的作用，只不过这种形式在使用时相对不好把握。比如：
类似案例中所展示的一样，通过产品非常规的局部放大以及摆放形式，画面给人的感受更加大气，视觉冲击力更强烈，同时版式的跳跃性也更强。只不过这种形式在运用时要注意：页面整体中最多出现 1-2 次即可，用于活跃版式、提升设计感，一旦出现次数过多，很容易形成杂乱的现象，之所以叫做非常规是因为有常规方式加以衬托、辅助，所以才会在视觉上形成反差。
既然是为了提升版面的活跃度，那么版面中所有的元素都可以是尝试改变的元素，比如常用到的按钮，再或者线条等等。使用非常规的形状、图形也是方式之一，比如最简单的：
说到矩形，很多人都会想到常规形式，而也有一部分设计师会联想到非常规形式 1，少数人会想到 2 和 3 的形式，这四类并没有设计上的好坏之分，而是当我们习惯了常规形式的色块之后，也可以尝试一下其他形式，也是会有意想不到的效果。比如非常规形式 2 的运用：
相比平时看到的矩形排列方式，这一作品则给人很新颖的感觉，原本平面的作品，因为色块形状的改变使得整体有了很强烈的纵深感，版面的跳跃性很强烈，这样的版式还会有人说死板、常规吗？
非常规形状 3 的使用可以参考下面这个案例：
在原本页面中完全统一的形状图形中变换其中一处的形式，对于页面整体跳跃性的提升还是一目了然的，原因在于：此处矩形的形态就属于非常规类型，本身就具有一定的跳跃性、设计感，而用在此页面中又与上下形成了一定的反差对比，所以使得版面整体更加活跃。
还有很多非常规的形状，同样也可以尝试，比如：
想要版面看起来不古板，就要在页面中的每一个视觉元素上找突破。版式听起来好像一个很大的整体一样，其实一样可以抛开整体，把每一个局部作为突破点，寻找合适的视觉表达形式。当某一种形式已经让大家所熟知甚至成为常识的时候，我们不妨稍作改变，在不影响辨识度以及视觉传达的基础上，做一些形式上的调整，往往可以给予版式更强烈的跳跃性以及设计感。
版式就像配色一样，很感性，没有完全一成不变的理论。当我们想要提升版面整体跳跃性的时候，我们不妨试试以上方法，也许小小的改变对于整体而言就是完全不同的两种感受。当然，也不能盲目地追求形式感、特殊性。要切记：特殊是通过对比体现出来的，没有对比，就无法形成很好的视觉反差，同时也起不到应有的作用。还是要提醒大家，一个整体非常规的手法用在 1-2 处即可，太多的话是很难把握的。
文章来源：优设 作者：美工美邦
蓝蓝设计的小编 http://www.lanlanwork.com