界面设计包括哪些细节、如何深入？
我们常说“细节决定成败”，有些界面设计会让人觉得不精致，缺细节，而这些细节又包括哪些呢？如何去深入呢？那么蓝蓝设计和朋友们分享一些界面设计中需要注意的小细节，希望对UI设计师有所帮助！

• 界面元素的对齐，我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐，而不是机械的对齐，但这不是界面元素可以随意摆放的借口，该对齐的内容需要对齐，有时候只是举手之劳，养成好习惯很重要，有点强迫症也不是坏事情。
• 像素，虽然现在的分辨率越来越高，但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
• 界面光源的一致性，一致性是个很大的课题，应该能写一篇论文那么长，细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果，那正文就应该避免用深色的文字向上投深色的阴影
• 图标面积的一致性，这也是一个一直难以避免的问题，而且有很多主观成分，最好的方法是设计的时候放到实际屏幕上以较远的距离查看，是不是有哪些会特别轻或特别重，然后再去调整尺寸
• 文案，虽然这不是直接的界面设计元素，但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
• 别直接使用 Windows 自带宋体 / 黑体里的英文！！！这个不解释
• 谨慎地使用高饱和度颜色、大差别渐变，我们 GUI设计师总喜欢把自己当做艺术家，即使 GUI真算艺术那也是限制最大的一门艺术（天朝的电影、电视剧不算。。。），大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥，所以一些醒目出跳的颜 色和渐变使用起来要比较小心，否则很容易产生“俗气”的感觉

天气类App是手机里不可或缺的软件之一，但是想让你的应用在众多选择中脱颖而出，UI设计就显得非常重要了。今天蓝蓝设计从Dribbble和Behance上收集了一组界面设计出众的天气类应用，风格非常丰富，创意也很惊人，绝对值得UI设计师们一看！也希望它们能给你带来灵感 ：）

Weather

现在市面上存在太多流行的移动设备了，网页设计师们也不得不跟随潮流适应技术发展和变化规律，这些小巧的用户界面设计技能已经让一小部分愿意改变自己的同学们尝到了甜头，有付出就有收获！

国外已经有很多优秀的移动用户界面资源是可用的，这些先驱的宝贵资源可以大大帮助你的移动设计或开发你的响应式网站。相信今天蓝蓝设计要隆重推荐的10个网站，无论是在你设计一个新的移动应用程序还是寻找特定的设计解决方案时，他们都会踏踏实实的帮助到你。

Konigi

这个网站上展示了许多完美的交互设计和视觉设计案例，网站提供了许多不同的方式来引导你便捷的搜寻感兴趣的项目！一定要利用好标签哟。

在智能手机出货量超过PC和功能手机、用户使用App比例超过80%以上的情况下，智能手机App绝对成为了人们生活的主角。对于PC、平板、智能手机之间的跨平台无缝体验，很早之前开发者就开始关注了。比如Evernote会开发几乎所有平台的软件版本，来保证用户在使用各个平台时可以无缝切换；另外Chrome 桌面版和手机端也可以同步数据，我在电脑上打开几个网页，换到手机上时仍能看到那几个网页。

虽然很多人都认识到了App的重要性，但从PC到手机App，这中间仍然存在着很大的体验断层。PC段到移动端还有很多事情要做，比如接下来讲的：当大量App内容被分享到微博、微信上之后，如何从PC或手机上的网页链接完美切换到App。

很多iPhone应用网站的UI设计都颇为精美，朋友们们不会有什么意见的。看来那些UI设计师们都敞开胸怀迎接“苹果style”，创造出干净简约又优雅的网站设计。可不嘛，作为一枚合格的设计师，他们才不会随随便便弄个网站界面设计展示他们的app呢，都卯足了劲设计出新颖的版式，配上美美的图片、大量留白和恰当的字体。今天呢！蓝蓝设计将要带给你的这份灵感清单就是一些绝赞的iPhone应用网站设计！

dcovery

这可是规划旅游方案的一枚利器，等你到了目的地还能靠它探索更多乐趣。

蓝蓝设计将分析列表在各种情境的界面设计方法，以及需要注意的事项。

列表常见的使用情境

1. 概观：浏览较多的的信息时，列表可以提供一种概观性的的方式来呈现内容。
2. 逐一浏览项目：用户可能逐一或随机的的阅读信息，就像是 Facebook 动态信息。
3. 搜寻：用户可能在列表上寻找他们想要的信息，就像是 Google 搜寻结果。
4. 分类与过滤：用户可能正在分类信息或者使用一些方式（档案大小、名称）过滤内容。
5. 项目的整理、新增、删除与分类：用户正在整理信息，此时很有可能需要多选、搬移的辅助功能。

模式1. 双面版选择器

双面板列表是一种将列表区分为两个区域的一种设计模式，用户可以自由在第一个面上选择项目，第二个面版上会显示面板一选择的项目内容。

优点

• 操作非常的有效率，不需要来来回回的在不同列表切换。
• 减少用户记忆与认知的负担，使用者不必了解内容在列表上的位置，也不需要学习如何返回列表。

缺点

• 需要比较大的屏幕时才能支持。

「好的产品关注功能，优秀的产品关注情感」

趣味性、愉悦度，这些都是针对用户情感化设计的领域。

功能、实用性，这些需要很强逻辑性的事物很难和情感产生关联，并不是指这些不重要，它们很重要，它们是基础，但缺少了情感的作用，很难产生一些东西，像：快乐、愉悦、悲伤、美…

花、大海、春天、小屋… 这些都是很普通的名词，但将它们富有诗意的组合在一起：我有一所房子，面朝大海，春暖花开。接受者会投入不同的情绪去理解这样一个组合。

上面这些名词就像我们在界面设计过程当中所遇到的各种元素，按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起，由此用户产生了情绪上的波动。

交互设计的本质是对用户行为的一种界面设计，直达内心的UI设计能够影响用户自身的情感，从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人，为什么？因为人的本质是非理性的，逻辑是理性层面的考量，而面对情感这个潜藏在理性背后的东西，需要设计师有深厚的功力，这不是单纯技巧上的问题，而是一种时间、感觉、情绪等综合的圆熟。

针对用户情感进行设计时需要考虑产品的用户群，情感设计的应用将会为产品塑造个性，需要明确产品个性是否与目标用户相符。所以题主需要考虑一下，所说的趣味性是否与产品所预期的个性相符，这很重要。

扯回到正题，交互设计中的趣味性如果让我用一句话表达，我会说：「情理之中，意料之外」

btw：自己对有趣的定义可能会与大家不太一样。

蓝蓝设计对每一个网址做了简单的说明，你可以先了解大概的教程类型，再决定是否学习。（提醒：大多数教程为英文网站，童鞋们不要担心，趁机锻炼下英语，也可以用google翻译）

假如你想从零开始学习如何建造一个网站，还可以到蓝蓝设计每日博客去发现蓝蓝设计精心推荐的网站 : ）

01  Html.net

如果你的问题为：什么是CSS，它是怎样被创造的，它如何运行工作，有哪些基本语法？所有这些都可以在这个网站得到答案。

生命在于运动，体育运动是保持健康活力不可缺少的一个环节，与运动相关的网站设计自然也要充满积极向上的风格。运动服饰、运动员、运动方式，展示运动过程中的美。

特写的照片是除视频外最能展示运动瞬间美的载体，所以一张激情十足的照片加上动感的交互方式，是塑造运动网站界面设计之美的神兵利器。今天就和蓝蓝设计一起感受这些充满活力的正能量网站吧!

更多与运动相关的网站设计欣赏：http://www.lanlanwork.com/

Solasie

网页设计中，切图输出是指UI设计师将手边绘制完成的原始图稿转换成网页界面设计用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。今天蓝蓝设计就和朋友们分享一下网页设计中图片格式的选择技巧
以UI设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：