设计常见问题与技巧汇总
本文汇总了10篇关于设计的实用文章精华，涵盖常见操作方法和解决方案。
用户根本不会在意你的界面
真正优秀的用户界面会被无视，而糟糕的设计则迫使用户注意界面，而非内容。用户都是带着目的来访问网站的：买本新书、学习JQuery、与朋友分享一篇文章、发现新音乐、写小说或者仅仅是寻找最近的目的地。他们不会只为把玩界面而来。 实际上，用户根本不在意界面设计。多年来，台式机系统树立的典范和交互式工具的缺失，都使人们开始思考用户界面，它如何发挥作用？如何让设计增色或减分？但用户真的需要关心这些吗？ 用户已经熟知界面的模式和组成元素，但他们根本不在意。多年来，网页设计师们已经在按钮颜色、投影、边框和渐变上花了成百上千个小时，只为了让界面更易用和美观。但事实上，优秀用户界面的终极形态不是易用，而是隐形。 或许你已了解，移动设备是近年来的重头戏。多点触控设备的问世引出了一个轰动性概念——用户界面就是一系列对内容进行的点击操作和事件，移动设备的崛起令人机界面更加自然。这一现象有诸多原因，但对直接对内容进行操作，和摒弃过时的具象化事物（像台式机里的那些）赋予了这些设备极高的易用性，因为它们的界面几乎消失了。 不过我们仍然需要用台式机和笔记本来工作，我们也需要浏览网站、使用web应用程序。那些神奇有趣的多点触控技术，和它创造出的更加自然的新式用户界面，却未必能派上用场。那么，既然还不能为我们所用，我们要继续创作那些过时且“碍事”的UI元素吗？当然不行，隐形界面应该是每位UI设计师与开发者的目标。 界面，而非障碍 界面不该成为用户浏览内容或达成目的的障碍。达成目的之前，用户根本没必要经历那些UI陷阱和胡乱编排的导航。多年来，我们都在使用和发明各种UI障碍。表面上它们似乎能解决某些问题，却给用户增加了更多负担。面包屑就是个极好的例子。通常认为，要让用户了解自己在应用中所处的位置，面包屑是个不错选择。但它更多时候只是平添了不必要的UI元素，影响正常的用户体验。 尽管面包屑并没有直接给用户带来负担，但它占据了屏幕宝贵的空间资源，而这本该用来引导用户达成目的和展示内容。增加面包屑来应对导航问题，不如直接设法解决它。为“修复”某些UI问题，经常会引入新的元素。然而，太多不必要的元素积少成多，最终界面成了一个障碍重重的迷宫。若是一味增加UI元素，界面还如何隐形？ 解决界面问题 这与我们前面所讲的息息相关，但是要打造隐形的界面，意味着要解决更深层次的问题，你得真正解决那些问题所在。我的背有点小毛病，当然，敲一敲和服用镇痛药都能止痛，只是治标不治本。我缺乏运动，经常无精打采，像石头一样僵直。我们对待界面问题也是一样。创作网站和APP时，我们总会发现各种千奇百怪的问题。多数时候我们只是做些表面文章来解决问题，界面下却隐藏着更深层次的问题。此举只是头痛医头，脚痛医脚。 不过这已经成为惯例了，因为我们总得学着与项目经理、网站主、股东、项目进度或仅仅是懒惰抗争。我们总以此为理由进行用户测试和AB测试。“我知道有些不对劲，不过还是通过用户来验证一下这是否真的是个问题。”若想要实现隐形设计，这可不是什么好方法。完全透明的界面意味着解决设计中最深层的问题，它们才不会出来作乱，成为用户的绊脚石。 宽容的设计 宽容，往往是隐形用户界面的一个特征。自然的界面并不限制各种探索性的点击。当用户进入死胡同，它不会轻易显示错误信息，而是将用户引向别处。 宽容用户意味着他们犯错时不要惩罚他们。用户错误操作，往往因为他们无法预料结果。我们总将问题归咎于用户，并弹出大大的警告和错误提示来惩罚他们。当用户踏入陷阱时，隐形的界面会避免责罚他们。相比弹出错误提示，优秀的界面设计能预测应用中出错率较高的地方，并提供解决方法，甚至引导跳转。 宽容也意味着网站或APP的规则可以被用户打破。这是下策，不过假设你打破了妈妈的古董花瓶，想要把它粘回去，却因为手指粘在一起被抓住，这肯定是最深刻的教训。用户弥补他们犯下的错误时，他们将更了解你的APP，别出现那些大红错误图标和晦涩难懂的文案。 首要任务，达成目标 这是个交互设计的绝佳案例，是Cooper正在进行的项目，鉴于它尚未上线，我应该只被允许小小提示一下——以目标为导向的设计。你的界面设计也应该围绕用户的目的展开。不是用户要什么或喜欢什么，去他的，根本不是这么回事。而是挖掘用户的需求，然后指引他们达成目标。这很滑稽，用户对于他们想用什么样的产品总能夸夸其谈，却对自己的目的一无所知。你的职责就是挖掘他们的需求，而非要求。“要求”会导致界面臃肿、障碍重重，令用户厌烦。 找出目标并让用户尽快完成它，他们不在乎其他事情，尽快到达目的地才是对他们最大的回报。不需要为此设计漂亮的界面，避免用过度设计来补偿糟糕的目标引导。 一致性 不错，在用户体验的世界中，我们一直在谈论一致性原则。界面设计中，一致性是重点。如果你的界面元素都放在相同的位置，有着相同的颜色和功能，那么你的界面会
师与＂少即是多＂
@BeForWeb ：过去几个月当中，我一直在马德里的一家创业公司的设计团队当中任职。我的主要工作是为他们的一款主要应用产品进行重设计，这其中确实遇到了不少挑战。我们每天都会问自己同样一个问题，那就是怎样在保证功能性与吸引力的同时尽可能的对产品进行简化。 每轮迭代，我们都会解决掉一些矛盾，然后再回头看看以前的版本，就会觉得从前的体验真是噩梦，看上去也不怎么漂亮。不错，我们是在进步。 作为设计师，我们不断的寻找着能够简化产品的创新方式。我们希望自己的设计方案能使产品用起来更有效率，更具功能性，当然，也要更顺眼。毕竟，我们是设计师。 扁平化设计的爆发将极简风格推到了设计领域的最前线。让事物保持简洁自然是好的，我绝对是简洁风格的粉丝。清晰、符合直觉的界面总是可以赢得用户的青睐。 相关犀利文——腾讯CDC同学的力作： 《终结拟物化与扁平化之争！多研究些问题，少谈些主义》 为用户设计，而不是为你的身份 然而有时，我们会沉迷于为自己的“设计师”身份进行设计，而用户却成为次要的了；我们倾向于让同行拍手称赞，却忽视了能否让用户竖起拇指称赞产品。那些现实世界中的产品设计师们会告诉你，漂亮的外观并非你需要考虑的最首要的问题。 除非你是个超级赶时髦的人，否则你肯定会使用一些看上去不那么好看的应用。为什么会这样？你不也是设计师吗？实际上，我们会使用这样的产品，正是因为它的功能可以体现出自身的价值。同样，我们自己的产品也应该能良好的表现出它的功能性，而不仅仅是漂亮的外观。 我自己用的记账应用肯定不是同类产品中UI最漂亮的，它也不扁平，但确实非常好用，非常有用，帮我节省了大量的时间。 观念：设计优先于功能 我们在很多地方都可以看到这种设计理念的体现，尤其是在Dribbble上。那简直就是UI忍者们的技能秀。我并不觉得这里有什么不妥，但当这些美妙的颜料被涂抹在实际产品上的时候，就会产生一些问题。你在Dribbble里看到的那些令人馋涎欲滴的界面有多少是真正可用的？现实当中有多少实际用户会像设计师所预料的那样对界面产生剧烈的反应？ 观念：功能优先于设计 对于设计师来说，“功能优先于设计”的言论必定是失礼的。我们会对丑陋的字体大喊着“不！”，却可以为很多看上去很漂亮但有悖于诸多可用性原则的iPhone应用拍手叫好。 很多新手设计师，从入行开始就一直身处扁平化的世界里。他们会认为扁平风格才是真正的设计，任何有悖于扁平原则的东西都是错的。实际上，从视觉角度来讲，扁平风格正是现实世界当中的物体概念在数码界面中的抽象体现方式；而如今的很多设计师似乎越发偏离了这一要领，错误的认为某种设计要么是对要么就是错，错误的认为我们的工作只是落实某种图像风格而已。 然而实际上，我们的工作是创造服务与产品来帮助众人；我们的工作是把东西做的稍微好一些，用起来更有意思、更有效率一些。实现这些目标的方法涉及到很多方面，虽然我不愿这样讲，但相比于坚实的整体用户体验及功能性而言，界面的漂亮程度确实是相对次要的。不然我们为什么还要提倡通过MVP来验证假设并进一步雕琢产品？ 相关书籍推荐：《精益设计:设计团队如何改善用户体验》 关于界面中的视觉引导 如今人们都知道“内容优先”的重要性了，这没错。没了内容，我们的设计就只是一层空洞的外壳而已。 我个人的顾虑在于，作为设计师，我们的一些工作也许会对内容优先的原则起到一定的破坏作用。那些力求极简的界面很容易让用户失掉重要的视觉线索。 一个比较常见的例子就是移动应用当中的“汉堡包菜单”(抽屉式的侧边菜单，其图标形式类似于三层汉堡)，这种设计模式也慢慢的在桌面端的网页设计领域普及开了(例如Uber的网站)。一个曾经属于移动端的、用于在极其有限的屏幕规格下体现“内容优先”的解决方案，现在被越来越多的用在了它的作用域之外。(例如Uber的网站，无论浏览器窗口的尺寸怎样调整，导航元素都是被隐藏在汉堡包图标背后的，所以这并非是某种响应式设计策略的体现，我想这也是原作者提出质疑的主要原因 —— 译者注) 在桌面端网页当中使用汉堡包菜单会显得很时尚吗？在如此广阔的可视界面当中刻意隐藏重要的导航元素，这种方式是经过验证的吗？这样的设计方案就是在强迫用户： 必须到某个地方去寻找一些他知道本该在这里看到的东西(导航)。 必须花时间绕路才能完成一个本该相当简单的任务。 这样做无异于在不需要设置障碍的地方立起一道门(想想过去那些炫酷的Flash动画加载页面)。 这种刻意隐藏重要界面元素以突出“更重要的内容”的方式，所破坏的却是“用户优先”的原则。内容再重要，界面再漂亮，如果没人愿意再来使用和浏览，那么又有什么意义呢？ 当我们努力想要移除界面中的一些元素以降低复杂度时，最好认真的想一想自己的理由究竟是什么。我们真的是为了增强用户体验吗？或者只是为了迎合潮流，削尖脑袋希望能够成为“扁
怎样做出优秀的扁平化风格 PPT 或 Keynote 幻灯片演示文稿？
据说上班用excel的比word的工资高，用ppt的比用excel的工资高。无论如何，在职场演讲汇报中，PPT扮演着至关重要的角色。 在它冒出来的日子里，PPT制造出来的糟糕设计比历史上任何其他数字工具都要多，可能只有微软的paint是个例外。 在本文我们将用10个超级技巧来解决糟糕的演示设计肆虐横行的问题，让你可以设计出更好看、更专业的演示。此间你会看到Note Point 【1】上的一些出色的幻灯片设计，还有一些就是你们自己的作品。让我们开始吧！ 不是设计师？ 这个网站的大部分内容主要针对专业设计师和开发人员，或者是起码对涉足这一领域感兴趣的人。 不过本文是写给做过 PPT 的人的。 无论你是学生、领导，还是自助团体，或者是薪水达6位数的企业高管，不管你喜欢与否，从你打开 Powerpoint 或 Keynote 的那一刻起，你就成为了一名设计师。 你已经选择了一个可视化的沟通工具，因此你应当花点时间了解可视化沟通的一二件事。其主要原因之一，尤其对于那些身处商业世界的人来说，是你的同事会下意识地根据你 PPT 的视觉吸引力来对你本人做出判断。 如何培养出色的演示设计技巧？ 如果你还没得到建议的话，学学下面的十项技巧看看。等着瞧，如果你的同事注意到你的幻灯片开始变好，他们很可能会开始请你帮帮他们改进一下自己的片子！ #1 不要用内置样式 为了说明这一点，我打开Powerpoint，随手抓起一个实际的缺省样式然后随便在上面写点文字。这个流程跟无数PPT设计师的工作流程几乎完全一致，其结果就是我读书和工作时看过无数遍的一个典型的幻灯片。 （图中文字：最伟大的幻灯片，是不是很震撼！？） 这就是一个设计秘密，这个片子太恶心了； 跟你在Powerpoint里面发现的许多缺省样式一样的恶心。 诚然，近些年来他们的货色已经有了明显的改善，而Keynote（苹果的演示工具）还有一些不错的模板，但是，你不该把这些视为核心手段，只能在时间紧迫万不得已时才用它们。 此处的关键点是定制发出的声音更有力。你的同事了解也使用那些Powerpoint的模板，如果你不在幻灯片的美感上下点功夫，你的同事马上就能觉察出来。 我知道，让非设计人员抛开模板似乎有些激进，但是你可以的！只要你开始动手前把本文的其他技巧也读完。否则的话其结果可能会比微软的设计师做出来的东西还要糟糕。 #2 使用有质量的照片 照片是独自就能令你的演示出彩的最佳手段之一。它同时也是孤身就能把你的演示搞砸的最佳手段之一。“白色背景下的商业人士”看起来不错，但有点夸张了，显得有点呆板老套。 还有，在白色背景下光溜溜地放一张照片并不意味着它就是好照片。不要为了放照片而把难看和不合适的照片放上去。记住，没有照片好过糟糕照片。 （图中文字：这位女士真把我吓到了） 作为例子，我们把上面的片子和下面的片子比较一下。看出不同了吗？下面片子的图片很独特、很诱人，不落俗套。不要掉进使用蹩脚呆板的艺术这种模式的泥潭，你可以抓住既免费又具有高品质的照片来做出更强有力的、更直观的声明。 找免费图片 你说的这些神奇照片在哪里？对于入门者来说，可以看看 Stock XCHNG【2】，这是一个免费的主题摄影网站, 内容成千上万，质量良莠不齐。还有，你知不知道你可以进行 Flickr 搜索来使用得到知识共享许可的内容？这些照片都是免费的，许多都只要求你列出其归属权，在幻灯片的最后加一张片子把照片来源的链接附上去即可。 （图中文字：不错吧？） 上图就是一个例子，来自于Lauren Tucker【3】，是Flickr上的一个得到知识共享许可的素材。 #3 单色系带来震撼你不必总是要靠花哨的照片或者疯狂的自定义背景来让PPT显得专业。用一个强大的单色系调色板就能做出精彩的演示。 上面的片子就是一个极佳的例子，使用朴实无华的设计，毫无费力就创造出一个看起来棒极了的东西。无论你是否设计师你都可以做出来，对吧？ 这里的关键在于必须非常谨慎地选择你的颜色。颜色太亮太搞笑的话会影响观众的眼睛。同时在辅助色彩要注意大量运用对比。在色彩理论【4】上个速成班对你大有裨益。 如果你需要帮助建立调色板，看看以下三个免费工具【5】。 Kuler Kuler是在线色彩工具的典范。有数千个出色的预置色彩模板可供选择，你也可以利用这款既先进又好用的工具来生成自己的模板。 Piknik Piknik是地球上最基本的色彩工具之一，绝对是我的至爱之一。只需轻轻移动鼠标去改变颜色，滚动一下改变亮度，然后点击复制数值到粘贴板上，大功告成矣。 做网站的时候，我每天都用它来为颜色选用找感觉，包括它看起来会如何、如果覆盖整个屏幕效果会怎样、做幻灯片用哪个颜色好等等。 0to255 0to255也是我的至爱之一，是寻找颜色变化的一款非常震撼的工具。这让它在设计网站的边界和悬
提升网页感的实用方法：合理利用对齐
我们谈论的是整体角度上对齐的一些方法。合理的对齐能让你的设计更诱人，也能更方便用户浏览，提供极佳的阅读体验。几乎页面上所有的元素都需要对齐，无论是文本，还是图像，抑或一组组视频，以及一堆堆按钮和链接。栅格能够帮助你进行对齐，但是不同的元素对齐方法也不尽相同，各自有各自的奥妙。不要为了对齐而对齐，要为了用户体验而对齐，这才是本文宣讲的目的。 对齐决定了元素的摆放位置以及和其他元素之间的空间关系。好的对齐能够让元素与元素之间的间隔更流畅，让元素彼此的搭配更协调。 为什么所有的元素都需要对齐？ 很多人不喜欢栅格系统，因为有所限制，他们不希望自己的创意受到妨碍。 通俗上讲，栅格就是一大堆能够帮助我们创造区块的栏；而CSS中，排版的核心是盒模型，想要打破栅格很难。 为设计加入对齐 当然，并不是每一次都需要全部对齐。对不对齐，取决于你的设计作品或者工作方式。或者，可以在设计时不管对齐，大致创意完成后，再给设计加入对齐。 要注意：不要因为对齐，而使设计过于死板，让网站丧失了趣味性和探索性。对齐意味着你需要开始钻研布局技巧和栅格了——不过这次不用6栏栅格，用的是4栏。 全屏覆盖的栅格——6+4。使用软件为Gridset App.当你的设计很适合使用栅格布局时，那么请用之。让元素对齐栅栏，布局可选项非常丰富，即便是最简单的4+6。 主要元素的对齐 文本 和CSS对齐相同：左、右、中，调整。十分的简单 www.awwwards.com 对齐和可读性，需要好好权衡。不能光顾着对齐，而忽略了整体设计和可读性。 例如，少量的文本可以尝试居中对齐，而大量的文本居中对齐会影响可读性。 标题居中对齐效果很棒，但是标题的效果还取决于和正文的对照。如果标题居中对齐，而下文大量文本如果采用左对齐，效果就不佳。 wearemovingthings.com 不同寻常的对齐方式还要考虑到文化差异，有部分文化从右到左阅读，大部分文化都是从上到下，从左到右。因为大部分文化都是从左到右阅读，所以尽量不要采用右对齐，可读性很糟糕。右对齐一般在页底呈现，展示联系地址、联系信息，或者在顶部出现，展示导航链接 图像 图像的对齐很麻烦，因为每一张图的尺寸都不一样。小尺寸的图像易于放置，而且不影响内容。大的图像会打破阅读节奏，因此最好不要用过大的图像。一般有两种方法：第一种是把图像放在内容之外（开头或者结尾），另一种方法是文本内穿插图片。第一种方法很简单，可以采用全尺寸的大图，看起啦效果也不错，方便响应式设计。 第二种方法稍稍复杂，图像的位置要把握好。图像首先要和文本区域合理对齐（左或右），这是一种方法。另一种方法是图像稍稍超出文本区域。 在文本区域内嵌入图像，如果做得巧妙，文图结合的够好，会提高可读性、趣味性。 背景图像 背景图像是个限制，尺寸、图像选择都很困难。当背景图像和文本对齐结合时，背景图像需要符合CSS规则：绝对定位，上还是下？左还是右？这时候就需要根据自身设计来考虑背景图像的设置了。如果你的背景图像是重复的图案，便需要考虑图案与内容的对齐关系，如何利用背景图像来更好展现前景元素？ 元素组 无论是设计还是开发，当谈到“模块”这个词的时候，广义讲，含义差不多，都是一组彼此联系的元素。比如说一组链接便是一个链接模块，图像+覆盖其上的标题大文本也可以是标题模块。 有两点需要考虑：模块内部元素的对齐？模块与模块之间的对齐？ 模块内部元素的对齐： 当然元素组并不一定要紧挨着，比如说Logo和导航链接这种，可能会在顶部和底部同时出现。这种元素组就一定要对齐，虽然当你浏览底部的时候会看不到顶部，但是如果上下Logo没有对齐，用户能“感觉”出来，这也很重要，一致性设计。 模块与模块之间的对齐： 再比方说链接，某些导航链接可能做得稍稍复杂，文章开头一个大标题主链接，然后下文又提供了稍小的副链接，同时还画出了一个图标，也能链接，这边是一个复杂的导航模块，可以尝试着用这个模块与其他模块对齐。 总结 现在你对对齐有了一定的了解，希望从现在开始，设计时考虑对齐因素，让设计更加有序，有组织的布局元素、元素族。利用栅格进行对齐，尽量保证每一个元素都对齐合理。 原文地址：tutsplus
实用推荐！网页中常见的错误
在设计网页的过程中，射鸡师们难免会犯点错。尤其是初出茅庐的新人们更加容易在实现新点子的过程中出错。别说是新手了，就算是经验丰富的行家也得注意提高警惕，避免犯这些错误。很多开发者越来越依赖网页模板来减少设计出错的机会。让我们来留心看看这些常见的错误吧。 网页结构上的瑕疵 很多设计师把握不好承载信息的空间与留白之间的平衡。文本、图片和菜单应放在能与之形成足够反差的背景上，通过调整各元素之间的间距来营造干净整洁的外观，拥挤的页面是不能抓住访客注意力的。创建网站的过程中记得检查页边距和padding样式。 举个好栗子 → feedafever 浏览器那些事儿 你的网站应该在所有的常用浏览器里都完美展现。很多设计师只不过是忘记了检测浏览器兼容性，或者匆忙之中跳过了这一步。那些依赖网站模板的开发者们经常犯这种错。常用的浏览器有好几个呢，每一个又有一堆不同的版本，足以将事情搞得越来越复杂。之所以有如此之多的版本，是由于许多用户不肯升级他们的浏览器。要找出网站目标用户群体常用的浏览器，并针对它们检查你网站的兼容性。 令人抓狂的导航 这个错误可不得了，可以瞬间把感兴趣的访问者吓跑。访客访问网站时是冲着他们所需的信息而来的，这些信息应该最多在三次点击之内找到，而很多设计师把内容埋藏得太深了，使访客感到受挫。文本部分和导航元素应该被恰当地突显出来以引导用户，又有不少人在主页、产品、关于等栏目的标签上使用了用户不熟悉的词汇，导致他们产生困惑。网站模板对于需要开发新网站或者重新设计已有网站的中小企业来说是个很好的选择，能将正确的导航元素各归各位。 flash和音乐的使用 新人们对flash和背景音乐有某种迷恋，而代价就是变慢的响应速度和受阻的页面加载过程。很多用户接入网络的速度其实并不快，需要等很久页面才加载完，这就打断了原本流畅的浏览体验，结果很可能是用户改主意访问其他站点。带有flash的网站模板应该在开发工作进行之前检测过才行。 带背景音乐的网站并不是那么受欢迎。尽管在网站的指引音频中用上音乐也许不错，但仍需提供音效控制权给用户，而不是从一开始就自动播放。 不加标签的链接 网站上的所有链接都需要加上正确的标签。不管你是自己从零开始建站还是使用模板，这一点都至关重要，不然用户就弄不清楚这个链接将要指向何方。将相似的链接用同样的颜色或字体编组，改变已访问链接的颜色，使用清晰可见的按钮都是值得鼓励的方法。注意了，有时候设计师可能会忘记将文本块中的链接标记出来。 字体出错啦 过小或过大的字体都会带来错误的印象，使用最优字号的web安全字体是传达信息的最好方式。字体可不能带有妨碍阅读和理解的花哨样式。用字体玩太多的花样是一个应该避免的常见错误。网页模板可以大大降低犯这种错误的几率。 图片未优化 网络用图应调整尺寸或压缩大小，以节省空间和加载时间。若非如此，加载图片需要很长的时间，而访客一般不会再等下去，而是转投其他网站。提供缩略图预览并将缩略图链接到更大尺寸的图片可是个聪明的解决方法，很多设计师都没有注意到。常用的图片格式有JPG，PNG和GIF，其他格式加载的时间会更长一些。当一张或几张图标被用作背景时，设计师得小心处理加载时间和图片优化程度的问题。 不当的色彩组合 在给网站选择颜色的时候，设计师可能没将网站目的和目标客户列入考虑范围。企业网站和医疗类网站的适用颜色是不一样的。使用强烈冲突的颜色或者颜色太多都是不明智的选择。许多设计师没有遵循使用三原色的法则。有需要的时候可以用用这些个互补色（原文complementary colors，可能是作者笔误）的深色调。有许多颜色漂亮的网站模板可以用作参考。 糟糕的文字格式 搜寻信息的访客倾向于先扫描文字再深入考究细节，一大坨文字会让他们反胃的。很多设计师都没有设计利于扫描的文字格式。着重号、数字编号、标题、小标题、用加粗或颜色来强调文字都是些经常被忽略的简单方法。这个时候网站模板就是个聪明的设计参考点。 网站设计过程包含了数个重要的阶段，设计师们要时刻注意防范可能发生的错误。有些错误由于疏忽造成，而有些则因缺乏相应知识造成。上面提到的小tips可大大减少出错的机会。