首页

想优化 UI 作品,这14个设计细节一定要检查到位!

博博


Hi,我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容,用户体验就是建立在坚实的界面设计基础之上的。所以,如果你想要在 UI 设计上提升能力,应该多去思考界面设计背后的原因。

想优化 UI 作品,这14个设计细节一定要检查到位!

今天会跟大家分享一些被广泛运用的界面设计规则,它们能快速使得你的界面设计更干净、高效。


文案要易于理解


用更容易让用户理解(说人话)的引导文案,提升使用体验。

(彩云注:下面 2 个案例中,左侧的“购物车”和“库存 2”太过于术语化,右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候,也一定要注意界面中的文案,尤其是说明文字,控件文字等等,这个点经常容易被忽略。)

想优化 UI 作品,这14个设计细节一定要检查到位!

垂直对齐易于扫视


良好的对齐方式,可以增强内容的可读性,让用户的视线更容易扫描。

(彩云注:左侧的“之”字形视动线比较难阅读,且不够专业;右侧的垂直对齐增强了可读性,也让设计看起来更加统一,能够快速的提升设计细节。)

想优化 UI 作品,这14个设计细节一定要检查到位!

给选项加图标


使用图标、动画作为标签,有助于更轻松地理解内容,它使界面看起来更加理性和丰富,能瞬间抓住用户的眼球。

(彩云注:左侧的导航相较于右边,很难第一时间准确识别它的意思,增加图标后不仅更快看清,视觉上也更加美观。)

想优化 UI 作品,这14个设计细节一定要检查到位!

大段内容要拆分


大段的长句会让内容变得难以阅读。为了获得好的体验和 UI,应该注意拆分内容,并使用项目符号突出关键点,利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。

(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)

想优化 UI 作品,这14个设计细节一定要检查到位!

流程增加进度条


进度条帮助用户追踪流程,它也能使查看上下步骤更加容易。线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。

(彩云注:左边的表单 UI 不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)

想优化 UI 作品,这14个设计细节一定要检查到位!

错误提示要明确


错误提示一定要明确,易于理解,方便用户进行下一步的操作。如果用户不理解界面上出现的错误,用户就会感到很失望,可能会放弃接下来的流程。在 UI 设计时,在正确的地方用通俗的语言说明问题,以避免歧义,这一点非常重要。

(彩云注:我常常遇到各种出错,但出现的提示太过于术语化,也没有提示在正确的地方让我非常苦恼。)

想优化 UI 作品,这14个设计细节一定要检查到位!

按钮要正确合理


从菲茨定律(Fitt’s Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。

(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用好色彩心理学


颜色是 UI 中不可缺少的部分,它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。

(彩云注:左侧的蓝色按钮颜色并不符合用户对于删除的心理预期,右侧的红色按钮对用户的心理预期有危险和警告,用红色代表删除能够让用户集中注意力关注这一特殊的操作。)

想优化 UI 作品,这14个设计细节一定要检查到位!

单列更易保持关注度


用单列展示内容,能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时,将所有信息垂直对齐时,能更好的保持用户关注度。

想优化 UI 作品,这14个设计细节一定要检查到位!

优先社交媒体账号登录


当用户准备登录或注册你平台的时候,把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号,能很好地增加点击率。

想优化 UI 作品,这14个设计细节一定要检查到位!

选择状态要清晰


在用户做选择的时候,需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

(彩云注:左侧的问题在于选中状态不清晰且选项的颜色过于丰富,右侧的选中状态清晰且选项颜色只有 2 种,选中和非选中,体验会更好。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用留白分组


如果想给信息分组,使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素,空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。

想优化 UI 作品,这14个设计细节一定要检查到位!

控件样式保持一致


保持设计的一致性,能够降低功能复杂度并让用户更快决策,一致性设计让用户更快熟悉操作而不需要太多思考。(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

想优化 UI 作品,这14个设计细节一定要检查到位!

搜索中的占位符要用好


在搜索输入栏添加适当的占位符,提示用户可以在平台上搜索和找到的内容,这样可以提供用户参考并带来更好的用户体验。

想优化 UI 作品,这14个设计细节一定要检查到位!

总结


以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则,这些点虽然基础,但却经常被人忽略。


作者:彩云Sky¹

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



网站设计之十:如何做好网页头部内容设计?来看这些设计师的总结!

博博

无论作为设计师还是普通浏览者,大家观看一个网站时最先接触到的就是网页的头部区域,这部分内容为网站的其他各个方面设定了基调,在网页设计中起着非常关键的作用。

尤其是如今简洁设计比较盛行,多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力,同时要兼顾创造力和实用性。根据一项Google的研究,用户只需要短短数秒就可以形成对一个网站的看法,甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。


头部区域在哪儿?


在通常网页设计中,首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分,头部信息起到了一种邀请作用,它应该提供有关网站的基本信息,以便用户能够在几秒内了解网站的主要内容。

如果以招聘活动站点为例,整个头部区域设计要明确传达企业形象,及本次招聘活动的特点。给浏览者一个强烈的视觉印象,企业已向你发出邀请,我们对人才十分渴求,等等信息… 如果有线上线下活动同时参与,那么在整体风格上尽量保持一致。

如何做好网页头部内容设计?来看 58 设计师的总结!


包含哪些内容与功能?


网页头部的任务是给用户提供一些基本问题的答案:代表什么品牌,提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣,那么就是正确的设计。

那么主要元素通常包括:

  • Logo 或品牌标识
  • 交互指引
  • 标题Slogan
  • 导航要素
  • 搜索功能

在设计网站头部内容时,从思维层面来讲没有任何东西会限制你的创造力,它应该是令人难忘的、简洁和兼具实用性的,是一个可以展示创造性的开放领域。

下面让我们一起来看看头部内容设计的一些技巧。

1. 关于尺寸

对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字,但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同,分辨率也可能不同,因此用户看到的内容也不一定完全一样。

因此,我们不要拘泥于精确的像素概念,最好遵循经验积累的常识规则。

如何做好网页头部内容设计?来看 58 设计师的总结!

头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面,较小的头部区域是一个不错的选择,而对于落地页或者企业客户首页,头部区域可能会更大,而且多数大客户会有主视觉单屏展示页。

如果某些网页,例如落地页头部内容较长的情况下,最好在首屏给下一屏内容露出一些空间,这样用户就可以意识到下一页还有内容,引导用户滚动。

2. Logo展现

当一个人发现自己在陌生网站上,总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果,但是多数用户如果他们常规位置找不到预期的信息,将会不假思索地认为这个页面是难用的和不规范的,需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化,我们今天主要说大多数受众。

如何做好网页头部内容设计?来看 58 设计师的总结!

Logo ——与居中或右侧放置相比,用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo,那么可以把它居中放置,尽管它的有效性仍然比放在左侧要低。

3. 吸顶导航栏

吸顶导航,换句话说就是「粘性标题」,当你滚动页面时,导航区在页面中跟随,现在成为一个网页设计标准。如果不违反网站整体设计理念,请将导航栏吸顶固定。无论是PC端还是移动端设计,这都是一个好的选择:

  • 例如长页面展示、浏览内容同时客户需要导航区总是在视线范围内。
  • 如有滚动信息,不断提示客户点击,则可置顶或置底处理。

如何做好网页头部内容设计?来看 58 设计师的总结!

可根据页面内容展示要求,向下滚动时调整导航背景透明度,尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度,使用户能找到但又不过于抢眼。

总之,固定导航栏有助于提升用户体验,保持用户导向并给予了他们更多控制权。

3. 关于图片的应用

头部内容所用图片可以选择直接和要表达的业务相关性很强的,例如招聘类网站使用招聘场景图片;也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容;

如何做好网页头部内容设计?来看 58 设计师的总结!

高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事,唤起用户的情感,并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站,试着做一个透明的标题,它可以更好地显示图像,并保留了主要链接。

如何做好网页头部内容设计?来看 58 设计师的总结!

轮播图片——如果客户给了几张代表该企业业务的出色照片,这种方式就没错!企业希望用户可以滚动浏览一组精美的高分辨率图像。

如何做好网页头部内容设计?来看 58 设计师的总结!

插画——网站的头部图片必须能引起读者的共鸣,建立起人与人之间的联系。如果图片是独特的且易于辨认,即使是从网站标题中剪切出来,效果也会很好,可以利用当今的插图潮流来实现这一点。

4. 视频或动画

当然我们也不能只关注静态图片,添加视频也是最有效的网站头部创意之一。如果可能的话,尝试着在头部内容中添加主题视频材料,很多网站利用在背景中添加短视频来吸引用户,尽可能以最好的方式展示他们的公司或产品。

如何做好网页头部内容设计?来看 58 设计师的总结!

△ 华夏幸福校招官网首页动画,拨云见日的效果加上中式剪纸风格的运用,将公司各业务线融合到几个转轮中,产生了故事性的动画场景。

如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例,各大公司对应届生群体的追逐,很大程度上体现在对该群体审美和喜好的迎合上,年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。

当然不一定只有满屏大型动画,一般动画越复杂面积越大占用流量越多,客户打开延迟也影响观感。这时候我们可以根据功能不同,设计一些交互性的动画,去提升客户使用感受,尽量不影响网页打开速度。

5. 移动端头部设计

网页头部不可能只显示PC端的网页上,还应该正确显示在移动端的网页上。因此,在近年的设计中,网页必须具有响应性,并且能够很好地适应各种移动设备,这样才能带给用户完整的设计体验。

移动设备的日常使用广泛性早已影响网站设计,即使在PC中,也有一些细节看起来像是面向移动设备的网站设计。例如,Banner和汉堡包菜单都起源于移动设计。

如何做好网页头部内容设计?来看 58 设计师的总结!

移动端有着与PC端不同的屏幕尺寸和操作方式,很多时候需要设计师在一开始就考虑到两种界面的适应情况,比如在PC上顶部一条的导航,到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容,在移动端会向下层延伸,首层界面成为一个内容聚合页。


写在最后


网站是以头部内容为先导的,它就像是一张独特的名片。因此,我们在设计网站时,尽可能最大限度地关注该区域。

最后还要提醒大家,一定记得定期更新网站头部内容哦!以校园招聘大客户为例,大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格,以保持网站的新鲜感和时效性。

以上只是在工作中的一些点滴体会,微不足道。感恩能在UXD集体中不断成长。

作者:58UXD

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计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,却唯独没有把这改版提供给中文、日文和韩文,理由就是语言密度足够大了。

为什么千万别随便学国外的极简设计?

所以说,中文用户对单页信息量要求更高,这就是很正常的事了。


视觉密度差异


同样的一句话,虽然中文更简短,但是视觉密度更高啊。

为什么千万别随便学国外的极简设计?

会点排版的人都知道,视觉密度的节奏很重要,要全局考虑的。如果有一个地方的视觉密度比较高,那么整个页面的视觉密度都要匹配上才能和谐。否则一下子太疏一下子太密,就会丧失统一感。中文的间隙和比划之间的间隔都比较小,也注定了页面的其它部分为了匹配上这个节奏,不能太疏。

为什么千万别随便学国外的极简设计?

这就是为什么,把一些英文板式直接拿来填充中文会很奇怪。难怪我去一些繁体中文网站时,会感觉比简体中文网站更复杂拥挤。其实咱们大陆地区由于使用简体字,视觉密度已经比繁体字要松很多了。

为什么千万别随便学国外的极简设计?


简洁 ≠ 好用


说到这里,不是要为一些又复杂又不好用的设计进行辩解。只是说,简洁并不代表好用。当我们随口说出“少即是多”这种设计概念时,也不可忽视,凡事都有个度。看到国外那种极简设计时,也稍微自信点,简洁并不是我们唯一追求的方向。

作者:体验进阶

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






网站设计之六:4000 字快速回顾20多年的网页设计发展史!

博博

20 世纪末到 21 世纪开始,宣传品牌与产品的阵地不再局限于印刷品,电视、电台及现场活动,而是出现了网站,网站可以链接更多陌生人,而且没有时空限制。

4000 字快速回顾20多年的网页设计发展史!

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上,远在日本的一名中学生都可以去学习了解,所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展,但在展开内容前,要搞清楚一个问题,就是网页设计属于平面设计吗?

国内早在差不多 20 年前,建站公司就开始独立存在,所以这个问题蛮有争议,尤其是 UI 设计也很成熟之后,大家更愿意认为此学科是独立的。

4000 字快速回顾20多年的网页设计发展史!

中国建于 1994 年的第一个网页,主要对外沟通

平面设计的定义不管怎么粉饰,简单而言就是:以某种目的,将文字、图像、图形安排在一起。网页设计也是如此,唯一区别是网页具有动态,但这种动态属于若干个静态设定的切换关系,其关键帧也是平面设计。

4000 字快速回顾20多年的网页设计发展史!

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作,早年甚至可以自己独立完成网站,除了页面设计,还包括套 ASP 程序(Active Server Pages 动态服务器页面),用 table 布局前端等,当然这些技术如今早已过时。

4000 字快速回顾20多年的网页设计发展史!

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一,所以本回不仅是对搜集资料的剪裁分析,还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。


国际互联网络与超级媒体


互联网发展到如今已经像空气一样存在,断网已经如同缺氧那么严重,而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉,就是在 20 世纪 50 年代末美国国防部高级研究项目总署(the United States Department of Defense,Advanced ResearchProjects Agency,简称 ARPA)成立了。

4000 字快速回顾20多年的网页设计发展史!

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下,苏联不但先于美国在 1957 年将卫星送上太空,而且世界第一枚多级远程弹道火箭发射也试验成功,因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人,所以 ARPA 是一个专门研究国防技术的“事业部”,聚合美国当时最牛的几百位科学家,研究如何将最先进技术应用到美国国防。

4000 字快速回顾20多年的网页设计发展史!

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地,因为如此厉害的科学家肯定本身有重要事务,而不是放着随传随到,因此大伙无法专门聚在一起专门干这事,而是远程协作,所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音,还要做到资源共享,更关键的是要高效安全,信息不可被盗取,当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

4000 字快速回顾20多年的网页设计发展史!

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语,反正如此这般,利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”(the World Wide Web)。

4000 字快速回顾20多年的网页设计发展史!

互联网时代开启

事后证明,国不国防是一回事,这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”,将他们发送到目的地后可以重新组装,也就是“分组路由”的雏形。大家了解到这个程度就可以了,再往深里说意义不大,况且我也说不清楚,

而时间很快去到 1987 年,这是第二件事情,这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件,名为“超级文件”(Hypertext)。

4000 字快速回顾20多年的网页设计发展史!

苹果 1987 年的“超级文件”软件

比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来(当时网络上的内容其实非常有限),等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”(Hypermedia),除了可以检索文字,还可以找到图形、声音、电影及电视图像。

4000 字快速回顾20多年的网页设计发展史!

苹果软件“超级媒体”软件

再然后,苹果公司将这种技术跟日本索尼公司发明的 CD-ROM(compact disc read only memory,于 1982 年发明)进行结合,变成“互动光盘”,这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中,苹果公司的工作人员往里面塞进了文字、图形、动画,而且形成一个复杂的索引架构。

4000 字快速回顾20多年的网页设计发展史!

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库,大家可以根据需要选取想看的部分,有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑,比如“平行文本”、“多层”“矩阵”“网络系统”等,这里作很简单的介绍:

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写,这等于如今的鼠标经过效果。

4000 字快速回顾20多年的网页设计发展史!

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分,等于如今网站中的“相关推荐”。

4000 字快速回顾20多年的网页设计发展史!

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询,等于现在的产品系统,新闻系统一类。

4000 字快速回顾20多年的网页设计发展史!

网页中的“产品系统”效果

网络系统就是可以联系外部信息,其实就等于友情链接一类了。

当时间去到 1991 年,美国政府开始投入资金将“互联网”引入公共学校,而经过 6 年,世界上就有 3000 万个网络用户,2000 年左右,美国就有三分之一的家庭实现了联网。有流量就有商机,于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站,变成一种宣传展示的渠道,不亦乐乎。

4000 字快速回顾20多年的网页设计发展史!

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。


网页设计的高速发展


1994 年时候,中国有个人因为公务出差去美国见证过互联网的神奇,回国之后辞职,在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴,这人就是马云。

4000 字快速回顾20多年的网页设计发展史!

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候,充满了商机,大家可以理解为近几年短视频暴增一样,根据回顾统计,在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态,网站后台是后来慢慢才发展形成。

4000 字快速回顾20多年的网页设计发展史!

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位,因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来,以便有更专业的表现。

我在 2010 年时候开始从事网页设计,恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司,大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行,所以他们会从实现效果端来规划设计,跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题,也因此产生出更多更好的视觉效果,反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”,争论要点就是很多效果程序根本做不出来。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生,所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久,css+div 布局就成主流了,再然后 HTML+css+js 也成熟起来,而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

4000 字快速回顾20多年的网页设计发展史!

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时,最典型例子莫过于 Flash 的“死亡”。2010 年前后,懂得用 fash 建站的人非常吃香,因为人才稀缺,收入可以是我们的 2-3 倍,那时候最流行就是用 flash 做所谓的“体验馆”。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件,换颜色,或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站,开发制作费用高达 300 多万。

但好景不长,因为智能手机的崛起与 4G 通信技术的发展,互联网的主阵地慢慢往移动端迁移,而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛,而我们这一代网页设计从业者可以说见证了全过程。

4000 字快速回顾20多年的网页设计发展史!

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城,据说后来项目就没发展起来。

说到商城,网页设计还有一个重要的主题变化,就是从企业网站到平台网站到电子商城再到手机网站,App 应用,公众号,小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”(User Interface 用户界面)这样更专业化的称谓取代。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生,很多网站本身就可以通过触屏控制,所以从定义上来说,UI 设计可以说包含了网页设计。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛,因为要考虑很多交互体验问题与技术规格标准,有点像当时乌尔姆学院做产品设计那一套,有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展,就走向细分领域的拆解,分裂出企业网站设计(偏向品牌与广告)、电商设计(偏向营销)跟移动端设计(偏向交互体验)。

4000 字快速回顾20多年的网页设计发展史!

史太浓 2018 年前后的电商网站设计

但不管如何,这个过程中平面设计的本质属性仍然没变,只是要解决的问题更多元化,更具体了。

根据历史纪录,美国的设计师杰西卡·哈芳德(JessicaHelfand)是较早以平面设计师身份参与到网页设计中的,比如 90 年代她为美国“发现频道”设计了网站。

4000 字快速回顾20多年的网页设计发展史!

美国“发现频道”90 年代的网站

哈芳德生于 1960 年,目前还活跃于设计圈,她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

4000 字快速回顾20多年的网页设计发展史!

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品,因为在有限篇幅里本期内容已经高度浓缩,更多是在给大家整理一个框架。

关于网页设计发展的经历,也欢迎大家根据自己的体会参与到讨论中,说出你们的故事。

本期故事讲到这里,感谢各位,下期再会!

作者:设计史太浓

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计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列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项,也许是时候考虑做一些改进了。

作者:程远

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!








网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

博博

提到网页设计,最先想到的是当今主流的韩国设计和扁平化设计,当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑,很多时候,在开始做设计之前脑子里会来回浮现这些风格的设计。那么,怎样在主流设计方式中做出有自己特色的网站呢?我们从以下几点介绍在大环境下提升网站设计形式的方法。

那么,怎样在主流设计方式中作出自己的特色呢?我们从以下几点介绍些提升网站设计形式的方法:


> 赋予民族文化特点


在众多的设计师追逐主流风格的同时,民族文化感觉的设计越来越少,不光在国内,在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果,但是却有一种非常淳朴的民族风格,这也是最吸引人的地方,每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格,在商业产品类型的设计推广中同样适用。

日本眼药水网站,将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示,与漫天遍地的明星代言广告形成对比,同样是眼干、眼涩、眼疲劳,同样是以办公室、上班族为消费群,文化创意上的突破使人眼前一亮。

http://www.medical-youkai.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

另辟蹊径谈创新!提升网站设计形式的几种方法

(小编按:那个妹子是我的女神横山美雪,吗?)和风服装店,日本特色的风铃、简约的插画,”和风”,大和民族追求与自然的和谐之美,从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重,反映了朴素美学的内敛性格。

http://hanamichiya.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

缅甸传统舞蹈音乐合奏网站,缅甸古代戏剧舞蹈,是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中”傀儡步”、”傀儡爬跳”等成为现代缅甸舞的基本动作,是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式,突出舞蹈者主体,用在网站上更显神秘。

http://www.itwillbeastounding.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一,是莫斯科有名的芭蕾舞与歌剧剧院;是俄罗斯历史最悠久的剧院,享誉天下,是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统,更重要的是,在俄罗斯丰富的民族音乐与舞蹈的沃土上,建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中,同样大量留白处理给了图片展示更多的空间。

http://www.bolshoi.ru/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 与网站主题相关的高清图片的应用


大面积整站或局部性使用高清图片,在之前设计分享中我们见到了很多案例,这里介绍几个日本以图片展示为主的网站,精致的图片不需要过多的装饰。

坂本龙一是日本当代最让人尊崇的音乐家之一,音乐领域涉猎甚广,在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等,为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为”大众明星”的原因,一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握;另一方面则在于他能在商业、艺术和实验之间找到平衡点,作出既有实验意义又有动听旋律的作品。

http://moonlinx.jp/special_issue/003/

另辟蹊径谈创新!提升网站设计形式的几种方法

另辟蹊径谈创新!提升网站设计形式的几种方法

日本设计强调材料的内在之美,注重与大自然的和谐,珍惜自然材质,这与日本自然资源相对稀缺有很大的关系。日式风格中,回归自然是最大的特色,推崇贴近自然、强调自然主义,让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景,拉近了观者与产品的距离。

http://www.ishiyamasenko.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

传统工艺美妆店铺,单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果,为网站加分,导航中加入商城外链可直接在线购物,利于用户体验。

http://www.kazurasei.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

日本联合新闻社,社内的场景图片很好的展示要表达的主旨。

http://go-jimbou.info/

另辟蹊径谈创新!提升网站设计形式的几种方法

街区是一个城市的重要标志性特色,将这样杂乱无章的旧街道作为网站通栏头图,配合简介的形式设计,也能很出彩。

另辟蹊径谈创新!提升网站设计形式的几种方法

美宝莲日本网站,将实体店作为网站背景,搭建成实景的巨幅海报展板,这种形式是否比存粹的明星代言更接地气些?!

http://www.maybelline.co.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

对比下面两个日韩服饰类网站,可以看出日本网站在图片选择上更注重产品本身,极具质感和张力的图片真实朴素,力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配,通过环境的营造来提升产品的品味和档次,产品只是搭建系统中的一部分。

http://quael.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法


> 对图片进行特殊处理


图素质量低是我们在设计过程中经常遇到的情况,我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感,将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢?!

箔工艺,金银箔具有很好的延展性,将金银打展成薄膜状,与绢结合,应用于古代服饰中。此文化再京都有四百余年的历史,现在主要用于文物修复。取箔工艺品的一个局部,重新组合作为整张背景,贴片处理的文字与背景的融合更显古代文化的精妙。

http://www.hiroto-rakusho.com/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

人物素材粗糙的情况下,采用水彩的滤镜效果,背景加入点状网格,极具形势感的箭头做引导,个性十足。

http://www.kanenavi.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

全日本剑道联合会,网站采用时间轴展示的形式,从1950-2000年每一期获胜者的照片和信息,可以看出由于70年代以前都是黑白照片且像素低,和近期的彩色照片反差较大,所以网站设计成了古朴做旧的年代感风格,加入很多早期照片中的截图作为插画元素,确保了风格统一。

http://www.kendo.or.jp/champ/#/about

另辟蹊径谈创新!提升网站设计形式的几种方法

Daum是韩国最大的门户网站之一,以邮件和社区产品为核心,是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。

http://www.daum.net/

另辟蹊径谈创新!提升网站设计形式的几种方法

也有整体黑白加入局部彩色色的案例,将复杂图片简化处理,对于简洁的页面设计来说,这是个不错的方法。每个版块都是黑白照片做背景,文字做JS动态移入效果,在图片的某个元素上加入VI主体颜色,故事感很强。

http://www.streetreach.org/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 创意图形化环境的设计


手绘、矢量图形设计的图形场景环境,用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者,给人放松愉悦的心情。相比图文混排更贴近生活。

狗粮推广网站,将网站设计成宠物乐园,各个品种的狗狗们都有自己的一段视频,内容是狗狗们对几种产品的喜好对比。

http://www.solvida.jp/solpa/#/MainPage/001

另辟蹊径谈创新!提升网站设计形式的几种方法

企划创意公司,技术上只是一个简单的FLASH站,但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇,加入互动效果而引发的更多惊喜也进一步提升了用户参与度。

http://www.aquacp.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

用3D拼图建造起一个小型城市,4个建筑代表网站要展示的4个心理学的具体分类,建筑物夸张的拟人化动作实现页面跳转。

http://www.soc.nara-u.ac.jp/kokoro/

另辟蹊径谈创新!提升网站设计形式的几种方法

日本儿童专用鸡蛋,此网站将所有产品相关内容装进鸡蛋中,食用后产生的剩余物可大变身继续用于其它物品的生产,循环利用避免环境污染,所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果,hover及跳转都伴随非常可爱的音乐和动态,恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。

http://www.kewpie.co.jp/egg/

另辟蹊径谈创新!提升网站设计形式的几种方法

日本山形放送局的地区地形图,大家都看过现实版的景点手绘地图,该网站也用了这种形式。比较有意思的是他的功能非常强大,是一个可放大缩小的真实版地图,没有跳转,完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解,以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。

http://www.nhk.or.jp/yamagata/mitekero/

另辟蹊径谈创新!提升网站设计形式的几种方法

九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎,重要景点默认做了动态处理,跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。

http://www.amakusamura.jp/

另辟蹊径谈创新!提升网站设计形式的几种方法

这种形式在新加坡儿童乐园的设计中也同样得到了使用。

另辟蹊径谈创新!提升网站设计形式的几种方法

设计风格也是体现一个国家文化的重要方式,严寒漫长的冬季成为俄罗斯的标志,在页面上打造一个同色系的冰雪世界,反而使彩色的主体信息更加突出。

另辟蹊径谈创新!提升网站设计形式的几种方法


> 赋予与产品相关的交互形式,重视用户参与性


一个优秀的网站它的交互性也非常重要,拥有好的交互性可以让浏览者有着更高的参与感,并且也能增大网站自身传播效果,还可以提高用户对自己的网站的依赖性和忠诚度。

Panasonic剃须刀产品JS展示站,设计形式与松下电子实现”星罗棋布的网络社会”和”与地球环境共存”的理想呼应,整站的背景都是由动线点组成的动态图形面拼合而成,图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品,还有松下文化。

http://panasonic.jp/shaver/lamdash/dna/index.html

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

东京交响乐团,该网站对用户的参与性做到了极致,从网站主内容上没有关于东京交响乐团的图片文字信息,用户可以在页面专属音乐键盘提示的情况下,用独创音乐的新颖形式创作属于自己的个性音乐,并对音乐逐帧做了记录,可以返回欣赏创作成果,并分享到各网站。

http://tokyocitysymphony.com/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

SPECIAL-T 绿茶网站,玩过网游的同学们都知道游戏中做任务有地图寻路功能,该网站采用了这个原理,在大海中建立类似于西游记的龙宫,用户在没有任何导视的情况下,360度无死角在海洋里自由探寻,最终的成果便是在一段时间的遨游后到达网站的终点产品引导页,阐释special的感受。

http://ogreen.special-t.com/en/

另辟蹊径谈创新!提升网站设计形式的几种方法


> 视频与特殊版式的结合


如果你想要一种优雅而直观的产品展示方式,全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心,当然也可能马上让访客失去兴趣,这都取决于你是否能够驾驭这类高大上的设计风格。

日本福祉大学,校园内外学生学习、活动氛围的场景视频作为背景播放展示,视频上一层则是手动切换的内容介绍字幕,一个大学的网站更像是一个微电影展示。

http://www.n-fukushi.ac.jp/lifestyle/

另辟蹊径谈创新!提升网站设计形式的几种方法

Mikihiko Kyobashi 海底摄影记录展示站,整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水,阳光穿透海面,碧海蓝天,比静态的照片更能展示生命的气息。

http://www.mikihiko.com/

另辟蹊径谈创新!提升网站设计形式的几种方法

bc服装网站,暗色的动态视频做背景,与前层简单的图文排版形成反差,图片hover的3D立体效果令人耳目一新。

http://bananacafe.com.br/

另辟蹊径谈创新!提升网站设计形式的几种方法

图片与视频的混排切换展示,拉伸后展开整站播放效果。

http://getgoingtoday.org/beyond

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法

日清食品,微距拍摄的视频,用时间倒数计时的方式,记录在这一碗日清方便面泡好的3分钟内,世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写,加入了用各国语言描述倒数计时的声音,视频中间穿插有和日清logo呼应的装饰语言,隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯,时间可自行选择切换到想要的那一帧。

http://www.nissin.com/jp/

另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法另辟蹊径谈创新!提升网站设计形式的几种方法


结语:


以上五点都是当下主流设计中另辟蹊径找创意,简单五点很难将所有好的创意都涵盖在内,除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化,以及信息传播的习惯、方式,还有网页开发技术的进步。对于绝大部份网站来说,没有强大的专业力量去研究用户新的习惯和需求,也不可能开发出新的技术功能,只能在一些大型的网站中窥见一些发展的趋势,再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性,那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展,更好的创意、更新的想法都来源于我们真实的生活感受,想要我们的网站变得更强大、拥有更好的用户体验,无可厚非,我们应该做的是大胆、大步地去尝试。


作者:ranger

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






图标定制设计之十:这6种类型的菜单图标和用法,这篇全总结了!

博博

大家好,我是 Clippp。今天为大家分享的是「菜单导航」。一个简单的汉堡菜单就可以包括多种不同的样式,可能有的样式甚至没有官方的名称,但因为样式的差异在功能上这些菜单也会出现差异性。

我们可以通过分析这些样式,来思考不同的样式代表着怎样的设计含义和设计目的,不能因为简单常见而忽视了功能的内核。


汉堡菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:横条、多个菜单选项

这个图标的样式简洁易懂,通常位于网页和 App 的上下角,用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。


垂直三点式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。


水平三点式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。

因为图标样式是水平的,所以更容易在 web 上或者在表格等水平方向中使用。


九宫格菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。


过滤式菜单


这6种类型的菜单图标和用法,这篇全总结了!

关键词:过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。


汉堡菜单变体


这6种类型的菜单图标和用法,这篇全总结了!

关键词:样式特殊、时尚感更强

作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。

这6种类型的菜单图标和用法,这篇全总结了!


最后


不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。

慢来比较快,如觉得有帮助,请点个赞,谢谢!

作者:Clip设计夹

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考

图标定制设计之六:客户说B端图标太普通没新意,该怎么解决?

博博


今年年初,我到客户现场进行需求沟通,在沟通结束后,客户问了我一个问题,我竟然不知如何回答,只在当时说了:“好的好的,我们会进行优化的。”

当时客户是这么说的:“为什么界面的图标这么普通,毫无新意,能不能设计的好看点。虽然我们是 B 端产品,但这样子的图标真的不好看。”

虽然我心里知道 B 端产品首先是以可用、易用为主的,那么图标也不例外,在评价图标设计的时候,我们首先看图标是否体现了可用与易用,是否让用户通过看图标就可以联想到这个功能是什么(合理、无歧义表达);同时图标是否符合设计规则,让界面看起来统一与专业。若图标符合以上要素,就可以再来看图标好不好看的问题了。

不过这并不是一位客户的问题,后面我们还遇到了很多客户有类似的问题,一上来就想要视觉层面好看的图标、有创意的图标、颜色丰富的图标。

那 B 端图标设计真的只需要考虑好不好看吗?作为设计者的我们,还能做什么呢?其实,B 端图标设计是带着脚镣在跳舞,小小的图标藏着大大的智慧,下面我们一起来看看吧~


引言


图标也叫 icon,它是对现实世界的概括、抽象、隐喻,在产品软件中,它会向我们传达功能与操作。

有些图标已经成为人人熟悉并一致认同的传播语言,例如删除、设置、男士、女士、刷新、电话、邮件,看到这些图标,人们的反应基本是一致的,无需再多说什么。

客户说B端图标太普通没新意,该怎么解决?


图标分类


图标在 B 端界面的用途我们就不展开长篇大论说了,简单来说图标除了做点缀,还可以直接表达功能与用途。因此,我们可以将 B 端图标分为两大类:示意类图标和半装饰类图标。

1. 示意类图标

示意类图标(也有称之为功能类图标)是指可以向用户示意功能用途的抽象化图形,可以和文字配合使用,也可以单独使用。

该类图标在中后台系统的界面中会比较常用,例如基础组件、导航菜单、状态、功能性模块。示意类图标不仅以可用的方式丰富了界面效果,在一定程度上也缓解了用户的视觉疲劳(试想,全是文字的界面会怎么样)。

客户说B端图标太普通没新意,该怎么解决?

2. 半装饰类图标

为什么我们要取名「半装饰类图标」呢?原因在于,在 B 端界面上,不会无缘无故出现纯装饰、毫无寓意的图标,任何图标的出现即便原本是为了装饰,设计者在设计时也需要思考其含义属性。

该类图标会在中后台导航、中后台工作台、Dashboard、B 端网站等地方出现,它们可以让 B 端界面活跃起来。

客户说B端图标太普通没新意,该怎么解决?

我们可以发现,某些场景下使用示意类图标会更好(比如基础组件),某些场景下使用半装饰类图标会更好(比如 B 端网站),某些场景下使用任意一类图标都可以(比如中后台导航菜单)。

回到一开始客户的问题:把图标设计的好看点,他说了好几个地方,记得好像有树控件 、导航菜单、按钮等。设计者们需看看目前客户讲的场景是哪个,有些场景不适合亮丽的图标,这会喧宾夺主,例如基础组件中。

我们深刻了解 B 端图标类型的使用场景,在设计决策时会更加得心应手。


图标设计规则


虽然示意类图标和半装饰类图标视觉形式不同,但在绘制上的规则是互通的。我们团队输出了一套企业级 B 端图标设计规范,不仅可以帮助新人设计师快速上手,并且可以使团队内设计师高效协作,保证设计结果的一致性。接下来和大家分享下思路,这是一套可复用的方法。

1. 约定图标绘制区域

我们需要给一整套图标约定合适的绘制区域,保证不论哪位设计师输出的图标,均符合设计标准。并且原始图标大小一致,可以保证前端使用也非常友好。

假如都是 48px*48px 区域绘制的图标,它们均缩放到 16px*16px 即可;如果一个是在 48px*48px 画板上绘制的,一个是在 88px*88px 画板上绘制的,它们都缩小到 16px*16px,会导致图标看起来视觉不一致。若期望它们看起来一致,就需要专门为不同画板的图标设计绘制规则。

客户说B端图标太普通没新意,该怎么解决?

这里在和大家分享一个小心得:我们团队在约定图标绘制区域时,发现了一个问题。Antd 的图标是绘制在 1024px*1024px 画板上的,但又有一些团队是绘制在 16px*16px,到底应该选取哪种画板呢?经过实际操作后我们发现,画板越大,设计细节可以越丰富。但缩小到小尺寸时,会有小数点的虚边(不过不妨碍前端应用,用户也看不到虚边)。而小尺寸画板绘制图标,画板全在视线范围内,设计师绘制图标时更有安全感。所以,不论用什么尺寸的画板,只要团队成员一致认同即可,不用过于纠结。

2. 设置出血位

除了要让图标绘制到统一的画板中,我们还约定了出血位,要求所有图标均保留出血位(出血位默认使用固定值),出血位起到的作用是:防止设计师图标绘制不小心贴边后,图标在实际应用场景中会出现缺失现象。当然,出血位的默认数值并不是一成不变的,允许设计师在绘制一些特殊形状的图标时,有调整空间,保证视觉平衡。

客户说B端图标太普通没新意,该怎么解决?

3. 约定元素调整规则

针对示意类图标:

线条:我们会要求设计师在绘制图标的线条/圆点时默认使用某个数值,然后设定线条粗细/圆点大小的递增或递减规律,例如以 2 的倍数为主基调绘制,默认为 6px 粗细/6px 大小。但允许设计师在绘制图标时,不合适用默认数值的,就按照增减规律去指导设计,如下所示。

客户说B端图标太普通没新意,该怎么解决?

圆角:图标采用何种内外圆角设计会影响图标给人的感觉,数值大的圆角会让用户感觉亲切;数值小的圆角会让用户感觉硬朗、专业。采用哪种圆角方式,设计师可以参考产品调性去规定。

客户说B端图标太普通没新意,该怎么解决?

针对半装饰类图标:

半装饰类图标在设计上也不是随意为之,除了要可以表达文案内涵外,假如是一整套的图标系列也需要约定元素调整的规则。

例如约定在「几何图形+业务图形」的设计基础上进行发挥,保证图标放到一起具有很强的一致性。并且半装饰类图标还要设定色彩范围(主色、辅色),如此可以让界面色彩不杂乱,严谨有序。可以看到腾讯云官网的图标采用了类似的设计方法。

客户说B端图标太普通没新意,该怎么解决?

4. 分层打造秩序

对于图标画板来说,它不是一个平面,它就像楼房一样,是分层的。从底层到最上层的内容依次为:主画板区域、核心内容绘制区域、基础图形参考区域、实际图标。

客户说B端图标太普通没新意,该怎么解决?

5. 从基础型拓展

我们在设计图标时,都应该先从基础型开始思考——圆形、矩形、三角形、正方形等,保证设计构图上的节奏感和规整性。当基础型无法满足需要的时,以它们为准向外散发,在遵循设计规范的基础上,做视觉上的平衡和微调。

如果是落到实际软件中应用的,建议所有图标最后都要合并路径,保证图形规整和干净,同时便于正确输出和使用。


图标画板尺寸


在「2.1、约定图标绘制区域」中,我们说到了要为一套图标约定统一的画板区域,但这个事情给设计师造成了困扰,还不止一位设计师问我:“那是不是我不能再用其他尺寸的画板来设计图标了。”答案当然是否定的。约定画板尺寸不是约束,恰恰是在规则中给予了设计师有序拓展的能力。

假如不约定画板尺寸,那么设计师直接放飞,每个图标都有自己的尺寸,并且有些还会出现长方形的形态。毕竟每个人的工作习惯不同、面对的产品不同,直接打开软件画图标是最快的方式。

而首先约定画板尺寸,设计师就会有条理地进行绘制,在遇到特殊情况时进行有序拓展,我们可以称之为场景拓展法。例如设计师可以为 B 端基础组件、工作台常用导航模块、结果页的图标各自设计一套绘制尺寸。

那设计师要怎么判断什么时候采用场景拓展法去设计呢?我们可以优先使用默认画板尺寸设计图标,在遇到特殊场景不允许情况下,采用场景拓展法去执行,针对界面风格有场景区别的,可以规定几类画板尺寸,为不同场景使用。


线型与面型


线型图标与面型图标也是设计师经常在讨论的话题,他们常常讨论「什么情况下使用线型图标,什么情况下使用面型图标」。做过比较多 B 端产品的小伙伴可以发现,没有说哪种场景必须使用线型图标,哪种场景必须使用面型图标,主要还是看当前产品调性合适哪种,并且使用某类型图标后,对界面产生的效果是什么。

例如当界面图标较多时,采用面型图标,会显得页面很重,会把用户视觉引导到图标而不是重点数据上。

线型图标与面型图标在界面中使用,是一项系统工程,是由多方因素决定的。但我们设计师需要保证 B 端界面图标使用的统一性,即便按照场景区分,也需要认真思考,是不是有必要。就如界面字号使用定律一样,建议不要超过 3 种,多了会让界面杂乱,降低界面设计品质。图标也是如此,不论面型还是线型,要站在产品角度去整体把握,而非线型和面型的简单选择。很多 B 端产品是两种类型混用的,但它们很好的划分了使用场景。

这里我总结了一些线型图标与面型图标常用的场景(以 B 端中后台为例,但这并不是唯一选择):

1. 在导航上(菜单极其多),常见默认用线型,选中用面型。

客户说B端图标太普通没新意,该怎么解决?

2. 在导航上(菜单很少,单层),粗一些的线型图标或者面型图标都会用,且会比较个性化,以提升产品整体调性。

客户说B端图标太普通没新意,该怎么解决?

3. 在基础组件中,通常使用线型图标,且颜色浅,用户可以把注意力聚焦在信息本身。

客户说B端图标太普通没新意,该怎么解决?

4. 在表格数据的状态中,面型和线型是均分使用的状态出现。

客户说B端图标太普通没新意,该怎么解决?

5. 在文字按钮中如果要添加图标,让界面展现更丰富,线型按钮居多。假如一旦按钮很多,面型图标会让界面显得太重。

客户说B端图标太普通没新意,该怎么解决?

6. 若标题区要出现按钮,面型按钮会使得区块显得更整体。

客户说B端图标太普通没新意,该怎么解决?


视觉尺寸与规范尺寸


这里还想和大家说说「视觉尺寸与规范尺寸」的事情。之前遇到设计师这么问:“既然已经约定了图标的设计规范,那是不是就严格按照规范区间来(严格按照基础图形参考区域来),但是有些图标不适合直接套用规范啊。”

是的,其实很多不规则图标是不适合直接套用规范的,就像一份周报格式不是所有岗位都适用一样。如果设计师发现有些图标直接套用规范不可行,是可以根据「视觉大小一致性」进行微调的。这不仅保证了前端开发的便捷,也保证了界面视觉的整洁。


图标命名


既然是一套 B 端产品层/企业级图标库,那么必须要有规范的命名方式,这样会方便设计师之间的协同,也会更方便开发与设计之间的协作,同时查找效率会提升。

那么命名有什么规律呢?其实只要根据项目的情况,团队内有统一的认知即可。关于命名的中英文,也是视团队而定,各有优缺点。比如是英文,那会方便开发直接用名字,不用重新取名(当然设计师取的英文名开发不喜欢,也会改);用中文的话,方便检索。

可以是:

尺寸/类型/图标名称/状态
16px/导航/上传/默认

形态/格式/图标名称
面型/方型/新增

模块/图标名称/状态
导航/分享/正常


三方图标库


好用的三方图标库还是很多的,虽然图标库质量参差不齐,但还是在一定程度上解放了设计师天天画图标的痛苦。这里介绍几个图标质量不错的网站:

1. Noun Project

网站链接:https://thenounproject.com

客户说B端图标太普通没新意,该怎么解决?

2. Iconfont

网站链接:https://www.iconfont.cn

客户说B端图标太普通没新意,该怎么解决?

3. ICONS8

网站链接:https://icons8.com

客户说B端图标太普通没新意,该怎么解决?

4. Font Awesome

网站链接:https://fontawesome.dashgame.com/

客户说B端图标太普通没新意,该怎么解决?

5. IconPark

网站链接:https://iconpark.oceanengine.com/home

客户说B端图标太普通没新意,该怎么解决?


写在最后


当客户提出图标好不好看时,是一个正常人的反应,试着想想我们自己,不也总是会很表面得看待一件事情么。因此,客户不会知道原来一个小小的图标也是藏着大大智慧的。不过没关系,当我们了解了小图标内部的大智慧后,我们可以更轻松的驾驭图标了,也可以知道在何种场景下,使用何种图标可以提升界面展示效果,得到客户的好评。

作者:小果

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考







手机及小程序界面设计之十:超详细解读:UI导航设计不仅仅指的是导航栏

博博

编者按:其实网页或者App中的导航(Navigation)这个概念远不止我们熟悉的导航栏,而是一个更加广的交互概念:引导用户和产品进行有效的交互,实现用户的目标。本文将详细地介绍界面的导航设计

一个网页或App产品要想有很好的可用性(usability),需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面,那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求,让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。

超详细解读:UI导航设计不仅仅指的是导航栏


导航


首先,让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中,当我们从一个地方到另一个地方,需要一些引导和指示。英文中Navigation这个词来源于拉丁文,原意就是:操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。

所以回到UX/UI设计上,导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品,作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效,用户体验能得到极大的提升。

在你刚开始设计你的界面时,就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素,比如按钮(buttons),开关(switches),链接(links),标签(tabs),条(bas),菜单(menus),区域(fields),让用户在不同的界面之间进行切换。

我们工作室的设计思路是,在界面设计的早期就全面地思考导航的设计,包括界面的布局,页面间如何切换,导航元素的放置和具体功能。并且通过低保真原型来进行验证,保证用户能清楚地理解所有重要的操作。如果跳过这一步,设计将有巨大的风险,其他事情有可能到头来都白干了。所以无论,对用户还是客户还是设计团队来讲,做好这最基础的部分是非常有好处的。

超详细解读:UI导航设计不仅仅指的是导航栏


菜单(Menu)


菜单是我们最熟悉的具备导航功能的元素,它向用户展示了界面的所有重要选项。基本上,它可以是用动词命名的一系列指令,用户可以用它来指示系统做出动作,像保存,删除等;它也可以是一个用名词命名的目录,用来代表不同内容的集合。

在界面设计中菜单可以放在不同的位置(侧边菜单,顶部菜单,底部菜单等),拥有不同的交互和视觉形式(下拉菜单,上拉菜单,滑动菜单等)。要想设计好菜单的位置、交互和视觉形式,设计师需要经过全面的用户调查,包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标,为用户体验打下坚实的基础。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

这是一个博客APP的界面设计,采用了侧边菜单以及目录的形式,文字直接说明内容,再加上图标来做为辅助的视觉说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ludmila Shevchenko

这个UI概念设计的例子很好的运用了颜色作为标记,这是一种很有效的导航技巧:每个分类的背景色使用了和目录相同的的颜色,这样目录和内容有着非常强的相关性,用户能自然地将他们联系起来。


行为召唤(CTA)


CTA是用户行为召唤的简称(call to action)。CTA简单来说就是指设计师通过设计,刺激用户去做出一些行动。相应的,CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮,标签或者链接。

不管在什么界面,CTA元素都是高效的交互行为的核心,极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话,用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面,它都必须是最瞩目的元素之一,用来直接地告诉用户怎么用这个产品。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Eugene Cameel

一些CTA元素直接用图标形式而没有任何文字说明,但只适用于大家都熟知其含义的图标,比如听筒图标和信封图标。上图这个例子中,这个听筒图标就是这个界面中一个焦点,是一个典型的CTA元素,引导用户快速地实现他们的目标。不需要任何文字说明,用户也能懂点击这个图标的结果。

但是,如果一个图标的含义不是那么明显或者可能造成误解,最好还是加上文字说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tania Bashkatova

上面这个例子是一个关于制作海鲜的网站的着陆页(Landing page)。页面的标题let’s cook还有食材照片是一个CTA,但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮,用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系,把用户的注意力拉到关键的交互区域中。


条(Bar)


条(Bar)指的是界面中一组用户可以点击的元素,用来快速与产品进行互动,或者还能让用户知道事件的进程。

标签条(Bar)

最基本的条是标签条(Tab bars),常出现在APP界面的底部,让用户能在APP的不同模块间快速切换。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

载入条(Loading bar)

载入条是用来告知某个动作的进展,用户可以通过时间、百分比或者其他信息了解整个过程。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

进度条(Progress bar)

给用户提供反馈,让他们了解事件的进度,比如说计划的事情完成了多少。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Valentyn Khenkin


按钮(Button)


按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令,跟系统进行交互从而实现他们某个目标,比如发送邮件,买一个东西,下载文件,播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好,是因为按钮很好地模仿了人和真实世界里跟物品的交互。

现如今的UI按钮有不计其数的设计样式,能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击,因此需要具有非常高的视觉识别,有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格,同时又能在视觉上跳脱出来。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

以下是在APP和网页设计中常用的几种具备附加功能的按钮。

汉堡按钮

汉堡按钮隐藏着一个菜单。当用户点击他们的时候,能把菜单调出来。有这个名字是因为它是由三条水平线组成的,看起来就像是汉堡的形式。它是一个典型的交互元素,也是颇具争议的元素。

大多数用户知道点击这个按钮能展开一个菜单,所以不需要额外的说明。汉堡菜单极大地节省了界面的空间,能让界面看起来更简洁,也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计,通过隐藏菜单让整个设计更统一,界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议,但因为这极大的好处,它目前仍然被广泛的使用。关于这个元素的主要诟病是,对于一些对界面不太熟悉的用户来说,这个比较抽象的设计元素可能会让他们产生困惑。所以,在决定使用汉堡菜单前,应该调查一下目标用户的接受程度和他们的需求。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来,从而实现一个简洁的页面布局和视觉效果。

加号按钮(Plus button)

一般通过这个按钮,用户可以实现添加某个内容的动作,比如添加新的联系人,状态,笔记,位置等所有用户在产品里能做的基本动作。有时候,点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容,这取决于是什么产品。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容(图片,视频,文字),在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作,但因为给予了用户选择空间,所以还是对用户很友好的一种设计。

分享按钮(Share Button)

分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下,这个按钮都是用社交平台的Logo作为视觉形象,这样非常易于识别和认知。


开关(Switch)


同样,这也是一个用户非常好理解的元素,在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计,特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题,从而设计出很好的用户体验。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio

这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然,同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究,可以到来源查看。


选择器(Picker)


也很好理解,就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表,上面是一列数值,比如小时,分钟,日期,度量,币种等等。通过滑动列表,用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio


复选框(Checkbox)


复选框是可以用来同时标记多个特定的内容。同样的,也是借用了我们在现实世界里熟悉的概念。我们在考试的时候,或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样,复选框同样用得很多,主要在设置页面设计里。不过,复选框还有另外一个用得比较多的地方,那就是含有任务管理,待办事项,时间记录等类似功能的App或者网页。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

上面这个是一个待办事项App的概念设计。用户点击复选框后,表示这个内容已经完成。字体变粗的同时颜色发生了改变,这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。

界面的导航(Navigation)是用户体验设计的核心之一。毫无疑问,如果你看不到路, 你就去不了你的目的地。用户现在正面对着越来越多的网站和APP产品。越来越多的选择会让用户期望这些产品具备符合他们使用习惯的导航设计。


图标(Icons)


图标可以定义为一个象征着某个概念或物体的视觉形象,有着加强与受众沟通的目的。会和文字结合一起使用,将想要传达给受众的信息表现出来。在界面设计中,图标通常是象形符号或表意文字,对可用性和成功的人机交互有重要意义 。

毫无疑问,图标的其中一个重要作用是可以有效地替代文字描述。因为比起文字,用户对图片的理解速度更快,所以这个特点能极大提升用户体验,增强产品的导航和对用户的引导。但是,需要注意,即使是轻微的歧义或者误解都会导致糟糕的用户体验。所以在设计图标的时候要做必要的测试,根据目标用户平衡好文字和图标的使用。最有效的方式是同时使用图标和文字,这样大部分用户都不会有问题。电商APP或者网站最常使用这样的形式来给用户足够的信息,让他们能轻松快速地浏览。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

根据图标的功能,我们可以将它们分为一下几类:

交互式图标(interactive icons)

这类图标具备交互功能。他们是可点击的,能回应用户的要求,触发图标代表的动作。这种图标告知用户按钮、控件或者其他界面交互元素的功能或者特点。在大多数情况下,这类图标的意义明确,不需要文字辅助说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ Tab Bar

超详细解读:UI导航设计不仅仅指的是导航栏

△ 菜单概念设计

说明性图标(clarifying icons)

起到说明作用的图标,设计师用它来表示某一个特点或者内容的种类。它有时候不属于界面布局的元素或者并不具备直接的交互功能。经常和文字结合使用。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

娱乐性和装饰性图标(entertaining and decorative icons)

这类图标注重抓人眼球的视觉效果并非功能,通常用在节日或者特别款的场景。他们能有效地吸引用户的注意力,增强视觉冲击力。

复活节和春天主题的图标:

超详细解读:UI导航设计不仅仅指的是导航栏

△ 图片作者:Arthur Avakyan

APP图标(app icons)

在各个平台上可交互的品牌标志,展示品牌和产品的形象。最常见的就是我们手机界面上每一个App的图标,上面通常是品牌和产品的Logo。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Arthur Avakyan

网页图标(favicons)

就是我们经常在网址栏或者书签里看到的URL前面的那个小图标,也是代表着产品或者品牌的形象。能让用户在浏览网页时给他们快速的视觉提示。

超详细解读:UI导航设计不仅仅指的是导航栏


搜索区域(Search Field)


搜索区域又常常被称作搜索框(search box)或者搜索条(search bar),代表着用户可以在这个区域内输入想要搜索的内容。它是那些有着很多内容的网站或APP的核心导航元素,像博客,电商,新闻等产品。设计得好的搜索框能让用户轻松地找到想要的信息。因为它能帮助用户省去很多时间和精力,所以它是一个对用户特别友好的界面元素。

它的设计形式有很多种,可以是标签的形态,也可以是引导输入的一条线或者简单的一个搜索图标。大多数情况下搜索框的图标是一个放大镜的样式。基本上所有的用户都懂得这个图标的含义,所以能实现非常直观的导航设计。想要在这个图标上做文章的话,要好好测试一下,因为改得不好的话会严重影响交互和界面的可用性。搜索框还可以加入提供候选项的下拉菜单或者自动填补内容的功能。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

另外需要注意的一点是搜索框控件在界面中的位置。在网页设计中,搜索框经常出现在网页的顶部。这是一个很恰当的设计,因为通常网页的顶部区域具有很高的可见性,用户打开网页就看到了,不需要再花时间去找到这个控件。举个反面例子,如果一个电商网站因为搜索框的设计有问题,导致用户没办法快速方便地找到想买的东西,网站销售表现会受到极大的影响。因为现在很多网站都将搜索框放在网页的顶部,所以用户也养成了在那里找到搜索框的习惯。

至于App界面的话,要视具体情况而定,设计师可能面临更多的限制。如果是一个有着大量内容的APP,而且搜索是核心功能之一的话,那么一般放在一个显眼的标签条(tab bar)上。如果搜索并不是核心功能,那么可以把它藏到菜单里或者只在需要的用到的地方显示或者时刻显示出来。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh


标签(Tag)


标签是一个标有关键词的可交互元素。标签其实是给用户提供快速通道的元数据,用户可以通过它快速导航到与关键词相关的所有内容。除了网页或者App本身带有的标签,在很多情况下用户也可以自己创建标签。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Design4users

标签这个界面元素被广泛地应用在用户原创内容平台(UGC)的界面设计里。当用户上传图片、状态到社交网络的时候,可以加上关键词作为标签。上图就展示博客网站Design4Users运用了标签来加强网站的内容导航。通过点击某个标签,能切换到带着这个标签的所有内容的页面。标签是友好的搜索引擎优化(SEO-friendly)技巧,能提高用户搜索内容的成功率。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Unsplash

再举一个例子,上图是图片素材网站Unsplash的界面。当用户想要下载图片时,可以输入描述图片的关键词作为标签。通过这样的形式帮助用户有效地找到想要的图片。我们还可以注意到,输入框内加入了引导用户进行操作的说明,这样更进一步地提高了产品的可用性。设计的细节真的很重要。总而言之,标签是一种用户可以自行创造的导航元素,拉近了界面和目标用户之间的距离。

全面地设计好整个界面的导航不是一件容易的事,需要一些心理学、交互模式、用户测试的基础知识,还需要在项目的早期思考清楚网站或者App的信息架构。但是做好这一点的话,能够让你的产品很好地帮助用户解决他们的问题,给优秀的用户体验打下坚实的基础,让他们对你的产品产生越来越大的粘性。

作者:程远

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!



手机及小程序界面设计之九:手机端表格设计:我整理了一套循序渐进的处理方法

博博

Z Yuhan:对于手机端的表格设计,本文将为你提供了一些思考方向,希望能够带给你启发。

表格似乎和移动设备很难融合,强行贴上还真有些毁三观。即便是想方设法地避免,也总会有这样那样的原因,而不得不同时面对它们的时候。

其实有很多方法可以优化手机端的表格,但是可能不一定每一种都适合你遇到的情况,所以我整理了一套循序渐进的处理方法。


一. 整理信息


假设你在设计一款类似微信聊天群的功能,PM给你一张「成员信息表」,并要求你把它放在群成员管理界面上。这张表格里的信息的排列方式也许非常随便,看起来让人摸不着头脑。

手机端表格设计:我整理了一套循序渐进的处理方法

△ 组员信息表

首先你需要弄清楚这张表格摆出来的意义是什么。假设这张表格是为了「让群主查看并管理成员」,那么你就能分析得出:

  • 「头像和昵称」是基本信息,用来分辨成员身份。
  • 「活跃度」肯定是用来进行成员管理的主要依据,最好以此进行排序,其次“加入时间”也是重要的辅助信息。
  • 「是否为好友」可能对群主本人也是较为在意的信息。
  • 「性别和位置」在通常情况下并不重要。
  • 「ID和个性签名」对成员管理和查看几乎没有什么帮助。

按照重要程度摆放各信息,并合理排序后,表格看起来就更好理解了:

手机端表格设计:我整理了一套循序渐进的处理方法

△ 整理后的组员信息表


二. 界面整合


如果你的情况不允许对表格对形式进行变动,那么可能就真的要用手机端展示表格了。

在确保文字能够看清的情况下,表格很有可能横向展示不全,所以滑动难以避免。以下两点可以优化表格的滑动体验:

  • 将第一列基本信息固定不动,只滑动其余辅助信息。
  • 让用户能够看到展示了多少信息,还有多少是隐藏的。

这样,复杂的表格至少能够从表面上融入手机界面了:

手机端表格设计:我整理了一套循序渐进的处理方法


三. 优化细节


再仔细看看这张表格,即便不做大的调整,还是有很多地方可以通过微调来改善体验:

  • 「ID和个性签名」这种对于实际场景(管理和查看成员列表)没有帮助的信息可以去掉。
  • 「性别」信息可以使用符号、颜色等方式简化。
  • 「好友」数量不多,所以可以用标签的形式。
  • 「活跃度」和「加入时间」用户可能在管理成员过程中需要进行正向和负向排序。

优化后,表格看起来更简单了:

手机端表格设计:我整理了一套循序渐进的处理方法


四. 信息设计


手机的窄屏对于表格来说总不是最佳选择,所以如果可能的话,还是避免使用这种形式。

一个人在同一时间的注意力是有限的,大多数情况并不需要像传统印刷品那样,完整列出所有信息。重新思考真实的使用场景和用户心理,你会发现并不需要一次性把所有东西都扔出来。

如果你想要像微信那样,用头像+昵称这种形式,也许很容易被给你表格的人反驳:

手机端表格设计:我整理了一套循序渐进的处理方法

你可以筛选出相对有用的信息提供给用户,并用更有意义的方式整理出来:

  • 「头像和昵称」依旧是不变的基本信息。
  • 「活跃度」是群主进行成员管理的主要依据。
  • 「加入时间」是成员管理的辅助信息,但是时间长短可能比加入日期更加一目了然。
  • 当成员数量较多时,自定义排序依旧重要。

于是原本臃肿的表格可以被整合重新设计成完全不一样的轻便形式:

手机端表格设计:我整理了一套循序渐进的处理方法


总结


本文提供了一些思考方向希望能够带给你启发,以后遇到类似问题,不要老老实实地把表格原封不动地贴到手机上了。

作者:程远

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档