矩形色块为背景色，圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变，或者也可以把某些单色渐变转化为纯色。另外，在不包含黑白灰的色彩组合里，仍可以根据需要自行加入黑白灰，比如用于填充文字的颜色。
1. 高端
视觉调性高端的色彩，通常具有明度低、饱和度低、颜色数量少等特点，所以很多高端的设计都会以深色作为背景色，因为深色更显低调、更具神秘感，所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。
2.科技
想要表现科技感，色彩的整体调性通常会偏冷色系，明暗对比要强，且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色，然后用高饱和度、高亮度的青色和紫色作为辅助色，这时这些辅助色就会非常的跳跃，具有一种发光的效果。
3.时尚
其实所有调性的配色都应该要尽量时尚一点，即使是想表现复古，也不能太土，所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类，一类是以纯色作为背景，这种色彩比较适合于品牌设计、网页设计、画册设计等；一类是以渐变色作为背景，这种色彩比较适合于电商设计、广告设计等。
4.酷炫
酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配，比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格，其色彩就属于酷炫类的。该类设计通常也是以深色作为背景，图片元素会使用高饱和度且对比很强的渐变色，色彩相对较多。
5.好吃
即让人感觉很有食欲的色彩搭配，这种色彩通常以暖色为主，比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业；而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。
6.夏天
目前正值火热的夏季，所以葱爷专门整理了一些适合表现夏季的好看色彩，该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色，然后以黄色或红色、白色作为辅助色，这种色彩组合会给人清凉、快乐的感觉。
7.清新
小清新的视觉感受为轻松、柔和、淡雅，要达到这样的效果，颜色的明度通常是比较高的，饱和度偏低，常用的颜色有浅青色、浅绿色、浅黄色、粉红色等，在奶茶、女性护肤品的相关设计中比较常见。
8.快乐
快乐是张扬的、是活泼的，所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多，通常也是以暖色为主，但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性，所以想要表达快乐，黄色通常是少不了的。
9.可爱
跟儿童、年轻女性相关的设计，通常需要表现出可爱的调性，这类色彩通常是用冷色和暖色相互组合，颜色的明度同样不会太低，否则会有压抑的感觉，另外饱和度也不要过高，饱和度稍低一点效果会更柔和一些。
10.健康
想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶，还有黄色的小野花等等，所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩，红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉，所以整体的颜色明度不要太低。
11.运动
要想让色彩动起来，对比一定要强，可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色，所以常用于表现运动的设计里。
12.科幻
这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合，给人的视觉感受是稳重而大气，科技感和神秘感并存，所以背景色通常也比较暗，喜欢用青色和黄色这种比较亮的颜色作为点缀。
13.喜庆
在设计节日海报或促销海报时，通常需要表现出喜庆的调性，有些设计师会局限在大红色、黄色、和橙色里，这样搭配出来的色彩容易土，而想要解决这个问题，一方面可以加入冷色搭配使用，另一方面颜色的饱和度和亮度也不要过高。
14.复古
这类色彩的特点是颜色的饱和度会相对低一点，而且大多数情况下，整体的明度通常也不会太高，常用类比色搭配和对比色搭配。
15.中国风
具有中国风特色的颜色和色彩组合有很多，葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高，有点复古和充满文化气息的感觉。胭脂（暗红色）、缃色（中黄）、绀青（深蓝色）、黛（褐色）等是中国风常用的颜色。
16.梦幻
梦幻具有奇妙和神秘的感觉，好像在黑暗中找到了一点曙光，奇遇了惊喜一般，所以大多数情况下，背景色会使用从深色到亮色的渐变。颜色相对会比较丰富，而且以渐变色居多。
17.女性
女性是温柔的，是感性的，所以该类色彩组合通常为类比色，偶尔会用一点对比色作为点缀，以增加画面的活泼气息，颜色的明度和饱和度都不能太低，当然饱和度最好也不要过高，粉色、紫色是常用于表现女性的色彩。
18.优雅
优雅可以理解为低调、高级、温和、安静，所以这类色彩的对比通常不会太强，饱和度也会比较低，整体的色彩调性会偏中性，常用卡其色、麻色，还有单色组合及类比色组合。
19.经典色彩组合
除了以上十八大调性，葱爷还给大家推荐一些经典的配色，很难把它们具体归为哪一类，但是我们在做很多设计时，用上这种配色总能得到不错的效果，比如红黄黑、红白蓝、黄绿黑、等等，在很多平面海报设计中经常能看到。
B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。
格式塔主要包括 7 个基本原则：
今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？
我们先看 2 张截图，分别是不同分辨率下的界面效果。
可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。
当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。
相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。
例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。
通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。
IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。
在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。
另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。
用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。
下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。
在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。
例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。
通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。
特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。
主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。
当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。
而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。
共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。
在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。
虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。
格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。
今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
快速迭代的产品存在着同质化趋向，如何做出差异性？如何将品牌精神向外传达？如何在有限的时间内，满足产品需求的同时带给用户更好的
体验感，进而体现设计的价值呢？静态画面动起来或许是个不错的选择！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在 UI 设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面 2 个案例中，左侧的“购物车”和“库存 2”太过于术语化，右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。为了获得好的体验和 UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单 UI 不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在 UI 设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是 UI 中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有 2 种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则，这些点虽然基础，但却经常被人忽略。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
无论作为设计师还是普通浏览者，大家观看一个网站时最先接触到的就是网页的头部区域，这部分内容为网站的其他各个方面设定了基调，在网页设计中起着非常关键的作用。
尤其是如今简洁设计比较盛行，多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力，同时要兼顾创造力和实用性。根据一项Google的研究，用户只需要短短数秒就可以形成对一个网站的看法，甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。
在通常网页设计中，首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分，头部信息起到了一种邀请作用，它应该提供有关网站的基本信息，以便用户能够在几秒内了解网站的主要内容。
如果以招聘活动站点为例，整个头部区域设计要明确传达企业形象，及本次招聘活动的特点。给浏览者一个强烈的视觉印象，企业已向你发出邀请，我们对人才十分渴求，等等信息… 如果有线上线下活动同时参与，那么在整体风格上尽量保持一致。
网页头部的任务是给用户提供一些基本问题的答案：代表什么品牌，提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣，那么就是正确的设计。
那么主要元素通常包括：
在设计网站头部内容时，从思维层面来讲没有任何东西会限制你的创造力，它应该是令人难忘的、简洁和兼具实用性的，是一个可以展示创造性的开放领域。
下面让我们一起来看看头部内容设计的一些技巧。
1. 关于尺寸
对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字，但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。
因此，我们不要拘泥于精确的像素概念，最好遵循经验积累的常识规则。
头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面，较小的头部区域是一个不错的选择，而对于落地页或者企业客户首页，头部区域可能会更大，而且多数大客户会有主视觉单屏展示页。
如果某些网页，例如落地页头部内容较长的情况下，最好在首屏给下一屏内容露出一些空间，这样用户就可以意识到下一页还有内容，引导用户滚动。
2. Logo展现
当一个人发现自己在陌生网站上，总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果，但是多数用户如果他们常规位置找不到预期的信息，将会不假思索地认为这个页面是难用的和不规范的，需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化，我们今天主要说大多数受众。
Logo ——与居中或右侧放置相比，用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo，那么可以把它居中放置，尽管它的有效性仍然比放在左侧要低。
3. 吸顶导航栏
吸顶导航，换句话说就是「粘性标题」，当你滚动页面时，导航区在页面中跟随，现在成为一个网页设计标准。如果不违反网站整体设计理念，请将导航栏吸顶固定。无论是PC端还是移动端设计，这都是一个好的选择：
可根据页面内容展示要求，向下滚动时调整导航背景透明度，尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度，使用户能找到但又不过于抢眼。
总之，固定导航栏有助于提升用户体验，保持用户导向并给予了他们更多控制权。
3. 关于图片的应用
头部内容所用图片可以选择直接和要表达的业务相关性很强的，例如招聘类网站使用招聘场景图片；也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容；
高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事，唤起用户的情感，并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站，试着做一个透明的标题，它可以更好地显示图像，并保留了主要链接。
轮播图片——如果客户给了几张代表该企业业务的出色照片，这种方式就没错！企业希望用户可以滚动浏览一组精美的高分辨率图像。
插画——网站的头部图片必须能引起读者的共鸣，建立起人与人之间的联系。如果图片是独特的且易于辨认，即使是从网站标题中剪切出来，效果也会很好，可以利用当今的插图潮流来实现这一点。
4. 视频或动画
当然我们也不能只关注静态图片，添加视频也是最有效的网站头部创意之一。如果可能的话，尝试着在头部内容中添加主题视频材料，很多网站利用在背景中添加短视频来吸引用户，尽可能以最好的方式展示他们的公司或产品。
△ 华夏幸福校招官网首页动画，拨云见日的效果加上中式剪纸风格的运用，将公司各业务线融合到几个转轮中，产生了故事性的动画场景。
如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例，各大公司对应届生群体的追逐，很大程度上体现在对该群体审美和喜好的迎合上，年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。
当然不一定只有满屏大型动画，一般动画越复杂面积越大占用流量越多，客户打开延迟也影响观感。这时候我们可以根据功能不同，设计一些交互性的动画，去提升客户使用感受，尽量不影响网页打开速度。
5. 移动端头部设计
网页头部不可能只显示PC端的网页上，还应该正确显示在移动端的网页上。因此，在近年的设计中，网页必须具有响应性，并且能够很好地适应各种移动设备，这样才能带给用户完整的设计体验。
移动设备的日常使用广泛性早已影响网站设计，即使在PC中，也有一些细节看起来像是面向移动设备的网站设计。例如，Banner和汉堡包菜单都起源于移动设计。
移动端有着与PC端不同的屏幕尺寸和操作方式，很多时候需要设计师在一开始就考虑到两种界面的适应情况，比如在PC上顶部一条的导航，到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容，在移动端会向下层延伸，首层界面成为一个内容聚合页。
网站是以头部内容为先导的，它就像是一张独特的名片。因此，我们在设计网站时，尽可能最大限度地关注该区域。
最后还要提醒大家，一定记得定期更新网站头部内容哦！以校园招聘大客户为例，大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格，以保持网站的新鲜感和时效性。
以上只是在工作中的一些点滴体会，微不足道。感恩能在UXD集体中不断成长。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
很多人很喜欢国外的极简设计，先不看 Dribbble 上五花缭乱飞机稿，哪怕是博客编辑器 Wix.com 上的模板看着都很令人羡慕。为啥国外的网站都那么极简，国内就学不来呢？
十年前，我以为这是因为国民审美和设计师水平没上来。现在，我发现这件事情没那么简单啊！假想一下，你去下一个国外的极简 UI 模板来，把文字改成中文，评审时能过稿吗？
我估计十有八九过不了，产品经理肯定有一大堆信息、功能和运营入口要塞进去。可这应该怪万恶的资本主义，为了赚钱而不把审美自由当回事吗？
尼尔森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做过一次研究试验，发现不光是中国的公司决策层，就连中国的用户也未必就喜欢非常极简界面。
这次研究中，12 个中国人和在中国生活的外国人（应该是欧美为主）被邀请来，在 8 个网站上完成简单的任务，并且一边使用一边说出他们的想法和意图（Think Aloud）。
P.S. 这 8 个网站中有简洁的也有复杂的，对中国人展示中文，对外国人展示英文，以此形成对比。
很多外国人在使用较为复杂的网站时（被翻译成英文的中文网站），抱怨比较多。他们在中国生活，对这种网站设计已经见怪不怪了。
虽然也有人说好话，称赞信息展示明确直白，但也有人抱怨很难用的。至少大部分外国人对于复杂页面的问题比简洁页面的问题要多得多。
而相比他们，中国人普遍不觉得那些复杂页面有什么特别的，因为那些很“普通”、“正常”，甚至“传统”。
相反，抱怨简洁页面难用的反倒更多，例如：
“单从设计角度来看，图标、图片、布局都很好，符合很多人，至少年轻人都喜好。简单、干净，既没广告，又没有无用信息。但问题是，它也没什么有用信息——我在这些网站里看不到什么有用的东西。所有的功能介绍都只是在玩文字游戏，没有实际含义，没点真实内容。”
P.S. 以上是从英文资料的翻译。
中文的信息传递效率就是比英文高，我们也早就习惯了这一点。《联合国宪章》被翻译成六种语言，其中就数中文最薄。
2017 年，Twitter 把原有 140 个单词的限制放宽到了 280，却唯独没有把这改版提供给中文、日文和韩文，理由就是语言密度足够大了。
所以说，中文用户对单页信息量要求更高，这就是很正常的事了。
同样的一句话，虽然中文更简短，但是视觉密度更高啊。
会点排版的人都知道，视觉密度的节奏很重要，要全局考虑的。如果有一个地方的视觉密度比较高，那么整个页面的视觉密度都要匹配上才能和谐。否则一下子太疏一下子太密，就会丧失统一感。中文的间隙和比划之间的间隔都比较小，也注定了页面的其它部分为了匹配上这个节奏，不能太疏。
这就是为什么，把一些英文板式直接拿来填充中文会很奇怪。难怪我去一些繁体中文网站时，会感觉比简体中文网站更复杂拥挤。其实咱们大陆地区由于使用简体字，视觉密度已经比繁体字要松很多了。
说到这里，不是要为一些又复杂又不好用的设计进行辩解。只是说，简洁并不代表好用。当我们随口说出“少即是多”这种设计概念时，也不可忽视，凡事都有个度。看到国外那种极简设计时，也稍微自信点，简洁并不是我们唯一追求的方向。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
20 世纪末到 21 世纪开始，宣传品牌与产品的阵地不再局限于印刷品，电视、电台及现场活动，而是出现了网站，网站可以链接更多陌生人，而且没有时空限制。
1997 年的谷歌网站
美国最火的设计风格只要有人将资料放到网上，远在日本的一名中学生都可以去学习了解，所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展，但在展开内容前，要搞清楚一个问题，就是网页设计属于平面设计吗？
国内早在差不多 20 年前，建站公司就开始独立存在，所以这个问题蛮有争议，尤其是 UI 设计也很成熟之后，大家更愿意认为此学科是独立的。
中国建于 1994 年的第一个网页，主要对外沟通
平面设计的定义不管怎么粉饰，简单而言就是：以某种目的，将文字、图像、图形安排在一起。网页设计也是如此，唯一区别是网页具有动态，但这种动态属于若干个静态设定的切换关系，其关键帧也是平面设计。
2003 年时候的淘宝网
我在国内蛮早就从事网页设计工作，早年甚至可以自己独立完成网站，除了页面设计，还包括套 ASP 程序（Active Server Pages 动态服务器页面），用 table 布局前端等，当然这些技术如今早已过时。
12 年前史太浓独立完成的网站
因此这段历史我就是参与者之一，所以本回不仅是对搜集资料的剪裁分析，还会结合不少自身经历体验跟大家分享。
首先我们来简单回顾下互联网的发展与网页设计的演变。
互联网发展到如今已经像空气一样存在，断网已经如同缺氧那么严重，而互联网的诞生最初跟两件事情相关。
第一件大家也许比较熟悉，就是在 20 世纪 50 年代末美国国防部高级研究项目总署（the United States Department of Defense，Advanced ResearchProjects Agency，简称 ARPA）成立了。
美国国防部高级研究项目总署 logo
其成立的根本原因是冷战背景下，苏联不但先于美国在 1957 年将卫星送上太空，而且世界第一枚多级远程弹道火箭发射也试验成功，因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人，所以 ARPA 是一个专门研究国防技术的“事业部”，聚合美国当时最牛的几百位科学家，研究如何将最先进技术应用到美国国防。
人类第一个卫星由苏联在 1957 年发射
由于这些科学家当时分散于全国各地，因为如此厉害的科学家肯定本身有重要事务，而不是放着随传随到，因此大伙无法专门聚在一起专门干这事，而是远程协作，所以就需要一个有效的远程沟通工具。
这个工具不能只局限于语言声音，还要做到资源共享，更关键的是要高效安全，信息不可被盗取，当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。
麻省理工科学家约翰·利克利德
此处省略一堆过程与专业技术术语，反正如此这般，利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”（the World Wide Web）。
互联网时代开启
事后证明，国不国防是一回事，这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”，将他们发送到目的地后可以重新组装，也就是“分组路由”的雏形。大家了解到这个程度就可以了，再往深里说意义不大，况且我也说不清楚，
而时间很快去到 1987 年，这是第二件事情，这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件，名为“超级文件”（Hypertext）。
苹果 1987 年的“超级文件”软件
比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来（当时网络上的内容其实非常有限），等于是谷歌百度的前身了。
后来这个软件进化为“超级媒体”（Hypermedia），除了可以检索文字，还可以找到图形、声音、电影及电视图像。
苹果软件“超级媒体”软件
再然后，苹果公司将这种技术跟日本索尼公司发明的 CD-ROM（compact disc read only memory，于 1982 年发明）进行结合，变成“互动光盘”，这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中，苹果公司的工作人员往里面塞进了文字、图形、动画，而且形成一个复杂的索引架构。
CD-ROM 中的互动界面
这样一来就形成一个灵活且可互动的内容库，大家可以根据需要选取想看的部分，有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑，比如“平行文本”、“多层”“矩阵”“网络系统”等，这里作很简单的介绍：
平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写，这等于如今的鼠标经过效果。
网页中的“鼠标经过”效果
多层就是看一个内容的时候可以看到其它相关部分，等于如今网站中的“相关推荐”。
网页中的“相关推荐”效果
矩阵就是将资料布局到一个网格中方便大家查询，等于现在的产品系统，新闻系统一类。
网页中的“产品系统”效果
网络系统就是可以联系外部信息，其实就等于友情链接一类了。
当时间去到 1991 年，美国政府开始投入资金将“互联网”引入公共学校，而经过 6 年，世界上就有 3000 万个网络用户，2000 年左右，美国就有三分之一的家庭实现了联网。有流量就有商机，于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站，变成一种宣传展示的渠道，不亦乐乎。
90 年代可口可乐的官网
所以最初的“互动光盘”设计其实就等于第一代网页设计。
1994 年时候，中国有个人因为公务出差去美国见证过互联网的神奇，回国之后辞职，在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴，这人就是马云。
阿里巴巴早期的网页设计样式
20 世纪 90 年代恰好是网站建设数量急剧暴增的时候，充满了商机，大家可以理解为近几年短视频暴增一样，根据回顾统计，在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。
所以用“网页”一词是因为最初蛮多网站都是静态，网站后台是后来慢慢才发展形成。
1997 年时候的麦当劳网站设计
但网页设计最初的暴增还没有直接为平面设计师创造岗位，因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来，以便有更专业的表现。
我在 2010 年时候开始从事网页设计，恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司，大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。
史太浓在 2010 年前后的网页设计
他们本质上就是从一名开发人员入行，所以他们会从实现效果端来规划设计，跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题，也因此产生出更多更好的视觉效果，反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”，争论要点就是很多效果程序根本做不出来。
史太浓在 2010 年前后的网页设计
这样的事情其实一直在全世界发生，所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起来，而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。
史太浓在 2010 年前后的网页设计
这样的变化结果就是不断优化网页设计的表现效果。
那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时，最典型例子莫过于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因为人才稀缺，收入可以是我们的 2-3 倍，那时候最流行就是用 flash 做所谓的“体验馆”。
全 Flash 网站
“体验馆”的大致效果就是能在网站场景中做一些换部件，换颜色，或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站，开发制作费用高达 300 多万。
但好景不长，因为智能手机的崛起与 4G 通信技术的发展，互联网的主阵地慢慢往移动端迁移，而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛，而我们这一代网页设计从业者可以说见证了全过程。
全 Flash 网站
当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城，据说后来项目就没发展起来。
说到商城，网页设计还有一个重要的主题变化，就是从企业网站到平台网站到电子商城再到手机网站，App 应用，公众号，小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”（User Interface 用户界面）这样更专业化的称谓取代。
史太浓 2013 年前后的 UI 设计
因为革命性的屏幕触摸技术的诞生，很多网站本身就可以通过触屏控制，所以从定义上来说，UI 设计可以说包含了网页设计。
史太浓 2013 年前后的网页设计
随着移动互联网的不断发展其实也拔高了 UI 设计门槛，因为要考虑很多交互体验问题与技术规格标准，有点像当时乌尔姆学院做产品设计那一套，有很多理科属性的知识融入进来。
所以网页设计经过仅仅 30 年的发展，就走向细分领域的拆解，分裂出企业网站设计（偏向品牌与广告）、电商设计（偏向营销）跟移动端设计（偏向交互体验）。
史太浓 2018 年前后的电商网站设计
但不管如何，这个过程中平面设计的本质属性仍然没变，只是要解决的问题更多元化，更具体了。
根据历史纪录，美国的设计师杰西卡·哈芳德（JessicaHelfand）是较早以平面设计师身份参与到网页设计中的，比如 90 年代她为美国“发现频道”设计了网站。
美国“发现频道”90 年代的网站
哈芳德生于 1960 年，目前还活跃于设计圈，她也许是最有资格感叹互联网设计形式剧烈变化的人之一。
杰西卡·哈芳德
本期内容没有谈及太多具体人物及作品，因为在有限篇幅里本期内容已经高度浓缩，更多是在给大家整理一个框架。
关于网页设计发展的经历，也欢迎大家根据自己的体会参与到讨论中，说出你们的故事。
本期故事讲到这里，感谢各位，下期再会！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
移动端网页在今天虽然已经变得越来越重要，但我们在日常使用中依然会遇到一些糟糕的页面。近日，开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。
在移动端方寸地，有细节才能抓住用户，可以参阅这《60个以小见大的设计细节！》，保证会学到很多。还有，记得不要犯《ANDROID应用中十大常见UX错误》
众所周知网页加载速度是网站性能的一项重要衡量指标，毕竟很多时候用户并不总是在WiFi状态下浏览网页，所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。
当网页映入眼前，凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样，当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。
随着移动设备性能的提升，很多移动网页设计者倾向于在移动端堆叠更多的内容，这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性，比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程，以至于有些用户要“抱怨”自己手指太肥。
某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点，比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时，也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好，但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。
网页弹窗在桌面端已经令用户厌烦不已，可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果，但无疑也会遭受到用户更多的厌恶。
当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本，这听上去的确是一个好想法，可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时，自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。
作为用户当然可以理解网页开发者在页面上设置一些广告，可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看，横幅广告的思维好像还停留在1999年，可现在已经是2013年末尾了。
总结看来，Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项，也许是时候考虑做一些改进了。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
提到网页设计，最先想到的是当今主流的韩国设计和扁平化设计，当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑，很多时候，在开始做设计之前脑子里会来回浮现这些风格的设计。那么，怎样在主流设计方式中做出有自己特色的网站呢？我们从以下几点介绍在大环境下提升网站设计形式的方法。
那么，怎样在主流设计方式中作出自己的特色呢？我们从以下几点介绍些提升网站设计形式的方法：
在众多的设计师追逐主流风格的同时，民族文化感觉的设计越来越少，不光在国内，在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果，但是却有一种非常淳朴的民族风格，这也是最吸引人的地方，每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格，在商业产品类型的设计推广中同样适用。
日本眼药水网站，将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示，与漫天遍地的明星代言广告形成对比，同样是眼干、眼涩、眼疲劳，同样是以办公室、上班族为消费群，文化创意上的突破使人眼前一亮。
(小编按：那个妹子是我的女神横山美雪，吗？)和风服装店，日本特色的风铃、简约的插画，”和风”，大和民族追求与自然的和谐之美，从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重，反映了朴素美学的内敛性格。
缅甸传统舞蹈音乐合奏网站，缅甸古代戏剧舞蹈，是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中”傀儡步”、”傀儡爬跳”等成为现代缅甸舞的基本动作，是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式，突出舞蹈者主体，用在网站上更显神秘。
http://www.itwillbeastounding.com/
俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一，是莫斯科有名的芭蕾舞与歌剧剧院；是俄罗斯历史最悠久的剧院，享誉天下，是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统，更重要的是，在俄罗斯丰富的民族音乐与舞蹈的沃土上，建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中，同样大量留白处理给了图片展示更多的空间。
大面积整站或局部性使用高清图片，在之前设计分享中我们见到了很多案例，这里介绍几个日本以图片展示为主的网站，精致的图片不需要过多的装饰。
坂本龙一是日本当代最让人尊崇的音乐家之一，音乐领域涉猎甚广，在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为”大众明星”的原因，一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握；另一方面则在于他能在商业、艺术和实验之间找到平衡点，作出既有实验意义又有动听旋律的作品。
http://moonlinx.jp/special_issue/003/
日本设计强调材料的内在之美，注重与大自然的和谐，珍惜自然材质，这与日本自然资源相对稀缺有很大的关系。日式风格中，回归自然是最大的特色，推崇贴近自然、强调自然主义，让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景，拉近了观者与产品的距离。
http://www.ishiyamasenko.co.jp/
传统工艺美妆店铺，单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果，为网站加分，导航中加入商城外链可直接在线购物，利于用户体验。
日本联合新闻社，社内的场景图片很好的展示要表达的主旨。
街区是一个城市的重要标志性特色，将这样杂乱无章的旧街道作为网站通栏头图，配合简介的形式设计，也能很出彩。
美宝莲日本网站，将实体店作为网站背景，搭建成实景的巨幅海报展板，这种形式是否比存粹的明星代言更接地气些？！
对比下面两个日韩服饰类网站，可以看出日本网站在图片选择上更注重产品本身，极具质感和张力的图片真实朴素，力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配，通过环境的营造来提升产品的品味和档次，产品只是搭建系统中的一部分。
图素质量低是我们在设计过程中经常遇到的情况，我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感，将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢？！
箔工艺，金银箔具有很好的延展性，将金银打展成薄膜状，与绢结合，应用于古代服饰中。此文化再京都有四百余年的历史，现在主要用于文物修复。取箔工艺品的一个局部，重新组合作为整张背景，贴片处理的文字与背景的融合更显古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情况下，采用水彩的滤镜效果，背景加入点状网格，极具形势感的箭头做引导，个性十足。
全日本剑道联合会，网站采用时间轴展示的形式，从1950－2000年每一期获胜者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差较大，所以网站设计成了古朴做旧的年代感风格，加入很多早期照片中的截图作为插画元素，确保了风格统一。
http://www.kendo.or.jp/champ/#/about
Daum是韩国最大的门户网站之一，以邮件和社区产品为核心，是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。
也有整体黑白加入局部彩色色的案例，将复杂图片简化处理，对于简洁的页面设计来说，这是个不错的方法。每个版块都是黑白照片做背景，文字做JS动态移入效果，在图片的某个元素上加入VI主体颜色，故事感很强。
手绘、矢量图形设计的图形场景环境，用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者，给人放松愉悦的心情。相比图文混排更贴近生活。
狗粮推广网站，将网站设计成宠物乐园，各个品种的狗狗们都有自己的一段视频，内容是狗狗们对几种产品的喜好对比。
http://www.solvida.jp/solpa/#/MainPage/001
企划创意公司，技术上只是一个简单的FLASH站，但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇，加入互动效果而引发的更多惊喜也进一步提升了用户参与度。
用3D拼图建造起一个小型城市，4个建筑代表网站要展示的4个心理学的具体分类，建筑物夸张的拟人化动作实现页面跳转。
http://www.soc.nara-u.ac.jp/kokoro/
日本儿童专用鸡蛋，此网站将所有产品相关内容装进鸡蛋中，食用后产生的剩余物可大变身继续用于其它物品的生产，循环利用避免环境污染，所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果，hover及跳转都伴随非常可爱的音乐和动态，恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。
日本山形放送局的地区地形图，大家都看过现实版的景点手绘地图，该网站也用了这种形式。比较有意思的是他的功能非常强大，是一个可放大缩小的真实版地图，没有跳转，完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解，以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎，重要景点默认做了动态处理，跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。
这种形式在新加坡儿童乐园的设计中也同样得到了使用。
设计风格也是体现一个国家文化的重要方式，严寒漫长的冬季成为俄罗斯的标志，在页面上打造一个同色系的冰雪世界，反而使彩色的主体信息更加突出。
一个优秀的网站它的交互性也非常重要，拥有好的交互性可以让浏览者有着更高的参与感，并且也能增大网站自身传播效果，还可以提高用户对自己的网站的依赖性和忠诚度。
Panasonic剃须刀产品JS展示站，设计形式与松下电子实现”星罗棋布的网络社会”和”与地球环境共存”的理想呼应，整站的背景都是由动线点组成的动态图形面拼合而成，图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品，还有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
东京交响乐团，该网站对用户的参与性做到了极致，从网站主内容上没有关于东京交响乐团的图片文字信息，用户可以在页面专属音乐键盘提示的情况下，用独创音乐的新颖形式创作属于自己的个性音乐，并对音乐逐帧做了记录，可以返回欣赏创作成果，并分享到各网站。
SPECIAL-T 绿茶网站，玩过网游的同学们都知道游戏中做任务有地图寻路功能，该网站采用了这个原理，在大海中建立类似于西游记的龙宫，用户在没有任何导视的情况下，360度无死角在海洋里自由探寻，最终的成果便是在一段时间的遨游后到达网站的终点产品引导页，阐释special的感受。
http://ogreen.special-t.com/en/
如果你想要一种优雅而直观的产品展示方式，全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心，当然也可能马上让访客失去兴趣，这都取决于你是否能够驾驭这类高大上的设计风格。
日本福祉大学，校园内外学生学习、活动氛围的场景视频作为背景播放展示，视频上一层则是手动切换的内容介绍字幕，一个大学的网站更像是一个微电影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底摄影记录展示站，整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水，阳光穿透海面，碧海蓝天，比静态的照片更能展示生命的气息。
bc服装网站，暗色的动态视频做背景，与前层简单的图文排版形成反差，图片hover的3D立体效果令人耳目一新。
图片与视频的混排切换展示，拉伸后展开整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍摄的视频，用时间倒数计时的方式，记录在这一碗日清方便面泡好的3分钟内，世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写，加入了用各国语言描述倒数计时的声音，视频中间穿插有和日清logo呼应的装饰语言，隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯，时间可自行选择切换到想要的那一帧。
以上五点都是当下主流设计中另辟蹊径找创意，简单五点很难将所有好的创意都涵盖在内，除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化，以及信息传播的习惯、方式，还有网页开发技术的进步。对于绝大部份网站来说，没有强大的专业力量去研究用户新的习惯和需求，也不可能开发出新的技术功能，只能在一些大型的网站中窥见一些发展的趋势，再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性，那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展，更好的创意、更新的想法都来源于我们真实的生活感受，想要我们的网站变得更强大、拥有更好的用户体验，无可厚非，我们应该做的是大胆、大步地去尝试。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
大家好，我是 Clippp。今天为大家分享的是「菜单导航」。一个简单的汉堡菜单就可以包括多种不同的样式，可能有的样式甚至没有官方的名称，但因为样式的差异在功能上这些菜单也会出现差异性。
我们可以通过分析这些样式，来思考不同的样式代表着怎样的设计含义和设计目的，不能因为简单常见而忽视了功能的内核。
关键词：横条、多个菜单选项
这个图标的样式简洁易懂，通常位于网页和 App 的上下角，用来告知用户这个按钮之外还有更多内容可以探索。
当产品有多个菜单选项时，考虑使用汉堡图标来显示，但尽可能避免在桌面视图中使用。
关键词：垂直、内嵌菜单
通常位于屏幕或窗口的右上角或顶部，是用于打开带有附加选项的图标，打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。
关键词：水平、内嵌菜单、web
水平三点式菜单同样常位于屏幕或窗口的右上角，用于打开菜单或显示相关项的操作。
因为图标样式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
关键词：子分类、子功能
九宫格菜单通常用于打开同一产品中包含不同子产品或子功能，可以在它们之间快速切换，此图标常位于产品主页的右上角。
关键词：过滤、排序
过滤式菜单由三行不同长度的线段水平叠放而成，是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用，或者与全局过滤器结合使用。
关键词：样式特殊、时尚感更强
作为汉堡图标的替代品，与显示列表菜单的目的相同吗，但是这些样式我们平常见的可能会比较少，更常用在充满现代感、时尚感和艺术感的网站上。
不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。
慢来比较快，如觉得有帮助，请点个赞，谢谢！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com