表单的界面设计是由许多细小的元素所组合而成的集合体，标题和输入框的排列方式有着重要的地位，标题要放在输入框的左侧还是上面？要靠左还是靠右？要怎么排列才能提高表单的完成率呢？蓝蓝设计表单元素ui设计大揭密!

标题和输入框常见的排列方式

1. 放在输入框左边，而且靠左对齐

图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和Web应用和项目的可靠性。

在这篇文章中，蓝蓝设计收集了值得网站设计开发者收藏的JavaScript图形图表库，适合各种图表需求。其中大部分都是免费而且开源的，希望大家能在下面的列表中找到适合自己需求的JavaScript图表和图形库。

1.  JS Charts

在网页设计中使用更多的视频，被认为是2014年的一大设计趋势。当然有一些人会坚持大量使用文本/内容，他们认为内容是网站的根基，其他人则认为需要打破传统，因为访客的好奇心是不会满足于单一的内容铺陈的，需要为访客的好奇心制造惊喜。

无论如何，视频增多文本减少的网站的界面设计在过去的几个月里层出不穷。这样的解决方案有其优缺点，但是至少它引爆了人们的激情。只有时间能证明一切。

蓝蓝设计这里收集了一些新的网页设计的例子，它们带来了更多的视觉冲击，感受下。

案例合辑 

Manaz Productions

该网站毫不犹豫地提供了大量视频而故意削弱了文本量，其实并不奇怪，因为这个公司就是视频制作商，着陆页凸显自己视频制作技巧是很有必要的。

关于英文字体，对我们网页设计师朋友们来说一定并不陌生，即使我们很少做英文语系的网站，但在浏览国外

网站设计的时候，大家一定都会有或多或少的认识。其实不单单是在网页界面设计中，很多移动操作系统和浏览器中都广泛使用了今天蓝蓝设计即将介绍的这些字体。

想必大家也都能猜出来像 Arial、Helvetica 这种大名鼎鼎的字体肯定在里面了，那么还有什么呢？一起来详细了解一下吧！

相关推荐：
《平面排版时，教你突出中文美感的几种方法第二集（基础篇）》
《那些年，我们一起追过的字体》
《快速上手！制作ICON FONT》

首先，补充个小知识：

1.网页设计中的英文字体，一般有以下五类：

serif（衬线）
sans-serif（无衬线）
monospace（等宽）
fantasy（梦幻）
cuisive（花体）

网页设计中最常见的无衬线字体

在常见的两种字体风格中，衬线体的笔划感太”过”，不是特别的商业。随着瑞士设计风格的大力推广，无衬线字体变得愈发流行起来。

建议: 个人认为 Tahoma 以及 Verdana 字符编码效果最好 ，适用于多种环境

Arial

字体族科：Arial, “Helvetica Neue”, Helvetica

变体:

Arial：有时称为Arial Regular以便与Arial Narrow区别，其包括Arial、Arial Italic（斜体）、Arial Bold（粗体）、Arial Bold Italic（粗斜体）和Arial Unicode MS
Arial Black：此字体的特色在于其笔画相当的粗，包含Arial Black、Arial Black Italic（斜体）
Arial Narrow：为Arial的细瘦版本，包含Arial Narrow Regular、Arial Narrow Bold（粗体）、Arial Narrow Italic（斜体）和Arial Narrow Bold Italic（粗斜体）
Arial Rounded：包含Arial Rounded Bold（粗体），此字体可在微软韩文字体Gulim找到
——以上来自百度百科

蓝蓝设计无意中发现这些原型素材，小小地颤抖了一下，感谢网友的无私分享，如果你的作品需要包装并在iPhone上展示，来这儿挑个够吧！

无论哪种角度、哪款样式，都可以在这原型素材中找到，收藏下来，今后就不用到处找咯。

iPhone 5s

作为一名设计师，每年都会沉浸在一些新的界面设计趋势中兴奋不已。接下来，我们将探寻2013年的设计趋势，这绝对是意义非凡的事情。Web设计师必须洞悉所有相关领域的新趋势，紧跟时尚潮流。

这些新趋势让设计变得妙趣横生。但是很多专家还会倡导那些并非最时髦、最震撼世界的设计。当然，响应式设计不仅去年是热点，今年依然还会被人们重视。同样，栅格化设计作为最基本的设计，也会被继续延续下去。

这次，蓝蓝设计想探索一下那些逐渐发展起来的设计潮流。也许过去我们只是偶尔尝试一下这些设计风格，但是今年我们会真正关注它们。

更多留白/负空间

现在全屏背景的网站界面设计非常流行，如果有同学想要做类似的网站设计，那图片与文字就很关键咯，特别是图片上的文字，从字体选择到配色、排版都需要同学们好好斟酌。
今天蓝蓝设计带来10个小技巧，同学们阅读完可以小试牛刀，说不定加上文字就成了点睛之笔，学起来吧！

你必须首先要有合适的图片，好的排版，知道如何充分利用现有资源整合出最佳效果。如果你觉得你已经做好接受挑战的准备了，那么下面的10个小贴士对你会很有帮助的：

1、添加对比

Pack

当你在计划设计一个网页设计的时候，不一定要完全依赖电子设备。学会如何手绘可以帮助提高网页设计的效率，给你更多的灵感。
ui设计学院里都会给学生们教授很多基础课程。毫无疑问，很多大型机构或者创业公司都在使用返璞归真的方法来进行界面设计创作。无论你是长期涂鸦的骨灰级高手，还是刚刚起步的素描小菜鸟，能够使用纸张与画笔来进行创作是非常重要的设计技能。不用担心。模仿铅笔功能的一些工具也不是盖的。在这个以设备为主打的时代，还是很大的空间来进行简单又能被认可的设计创作。
实际上，我常常听到很多人埋怨设计师们浪费太多时间与成本在使用PS制作精致的方案草图。手绘则具备更大的灵活性，它可以帮助你在缩减成本的同时发展更具原创性的方案草图。

无论你是在一个大公司工作，或是一位自由职业设计师，通过手绘草图来与顾客交流都是必不可少的。

为什么要绘制草图？

手绘草图相对数字线框图或者电子绘画更有优势。它方便携带，简单易懂，更具创造力，屡试不爽。没有什么比使用笔和纸更简单直接的表达方式了。
我发现，客户更喜欢在获得信息的同时能够提出建议和进行更改。使用电子设备制作出来的图纸看起来接近成品，这样会让客户失去建议和修改的欲望。手绘草图则非常随意，你可以随意修改。

关注人类心理学的一些研究是非常有意义的。通过对人类心理的推敲，蓝蓝设计讨论人社会心理，这能够帮助创业公司开拓市场，因 为受欢迎的内容和大众心理有着最直接的关系。问题的关键是，很多心理学对于网站设计者有着很强的启发性。心理学帮助网站界面设计开发者看清人们的思维如何运作。今 天，我们和大家分享几条对网站ui设计师非常有益的建议。

1.太多的选择等于没有选择。

根据Sheeya Iyengar教授的心理学研究，我们能够洞察人们处理多重选择时的心理变化。“选择就是放弃”，Iyengar教授，《选择的艺术》的作者这样总结说。 社会心理学发现，当人们面多过多选择的时候，他们的表现非常相似：他们不会做任何选择。这就是所谓的“安全选择”。

结合到网站设计中：

太多需要用户去点击的东西，会让人觉得混乱。就拿我自己的网站来说，当我把两侧的工具栏撤掉一半之后，注册的用户大大增加。思考你的网站最终、最核心的目的，关注集中一点，删掉无关紧要的点缀和内容，直到你的内容只剩下最本质最重要的内容，这样你的用户才愿意呆在这里。

2.网站访问者读宽屏文字更快，但他们喜欢短屏文字。

大多的网页设计组成都是明亮的背景（通常是白色的）以及黑色的内文，但也有少数的网站设计是属于暗色系的、或是色彩鲜艳的网页界面设计。

但你曾想过为什么有些网页用鲜明颜色、有些则选用白色当背景吗？

这跟使用者的“动机”有很强的关联性。如果把使用者用某个服务的动机，简单用二分法来说，一个是“功利”动机、而另一个则是“享乐”动机，那么：

• 功利动机适合低唤起、高亮度设计
• 功效被定义为有用的特征或是状态，使用者寻求功效。例如，当你每次在使用计算机时，你可能就有一个功利性的动机在背后，像是协助你算帐更快。

研究显示，属于功利动机的消费者在低唤起环境，会比起高唤醒环境，更容易产生正向认知。唤起程度是指外界环境如何刺激引发我们的感觉，像白色较容易营造低唤起环（较不会刺激我们的感觉）、而红色则容易营造出高唤起环境（刺激性较强）。

举例来说，使用 Google 的使用者许多是因为功利动机，像是搜寻资料、观察信件……。所以 Google 网站和应用程式主要以白色为主，对使用者而言，身处于低唤起环境，不容易刺激人们的感知，使用 Google 服务时会比较轻松自在。