首页

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

博博

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

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


> 赋予民族文化特点


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

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

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 设计师的总结!






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

博博

编者按:周一无水文!这篇好文将给同学们科普何时能用单页网站,设计时有哪些技巧,有哪些优秀范例可以借鉴,以及文末推荐一大波专业的单页网站资源,干货份量绝对足,充电时间到 >>>

@十萬個為什麽 :单页设计,是一项处理小型网站的绝佳技巧,甚至有些网站你可能认为一张页面搞不定,也同样适用。从易于维护,到减少带宽占用,使用单页网站的好处不胜枚举。

假如你应对的是个小型网站,通常只有几个页面的那种,可以考虑使用单页设计,看看它是否能简化项目,对用户更加友好。继续阅读,你将了解它的益处,何时使用(或不该使用),还有一些你该遵循的绝佳惯例。


单页设计的益处


很显然,单页设计并非所有项目的理想选择。但假如可能的话,有一大堆理由使用它。

直观易用

默认情况下,用户要浏览单页网站,只要知道如何滚动就行。你也可以加入箭头或其他浏览暗示,但除了少数例外,其实滚动就足以让用户在各部分间穿行。


Green13


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

完全不用担心用户身陷多层导航中,无休止地寻找他们所要的东西。如果页面上有多个部分,页头或其他导航链接通常很有帮助,不过即使没有它们,网站仍然是可用的。

维护起来更快速、更简单

这点并非既成事实,编码良好的单页网站,或许编写起来比多页网站更快。设计过程有时可以花更少的时间,尽管这取决于单页网站的复杂程度。


Andreaballerino


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

一旦你脑海中有基本的布局,单页网站还能利用某些特定的设计约束来加快进程。尤其较之于多页网站而言,单页网站各个部分要保持无缝衔接。如果你已经明确哪些能做哪些不能,这类约束的确能加速页面开发。

维护也更简单。当你只需要处理一个页面,维护工作就大大简化了,只要网站本身编码良好。

它迫使你进行简化

这条构筑了上面一点。当你只有一个页面要处理,你不得不把一切简化为它们最基本的形态。不再需要一页页毫无用处的市场宣传。你必须直截了当、开门见山。


Varsity


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

更具SEO潜力

高质量的站内链接,是网站在搜索引擎中的表现的重要组成部分。尽管搜索引擎并不是很多网站必须的最大流量源,它们仍然重要。

单页网站的链接总是指向自己。搜索引擎抓取时,这可以增加网站的权重。

叙事的手法促使用户有所行动

单页网站往往从叙事角度出发,这点多页网站可不擅长。这可以促进转换,激发用户采取行动。


Wild


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

人们习惯于聆听故事,不论在线上还是线下,所以这点有着显而易见的用户体验优势。我们儿时就开始阅读和听故事,于我们而言,这是自然而然的事情。

易于组织

再也不需要组织一列列数不清的页面和子页面了。无需多虑每个页面是父级还是子级。也没有庞杂的导航菜单和子菜单。所有都在一页上。是要包含导航链接,还是让用户滚动,这取决于你,就看是否有助于提升用户体验。网站如果有多个页面,是绝对不会这么考虑的。

Stefansohlstrom

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

减少带宽占用

尽管不像从前,对服务器而言已经不成问题,不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用,会赢得流量有限的用户的感激。

消灭了移动版网站

当然,响应式设计不只限于单页网站。但即使采用了响应式设计,网站越复杂,让它适应小屏幕还是愈发困难。单页网站并不复杂,这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变,也更容易成就适用于小屏幕的设计。


Bearonunicycle


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


要不要用视觉差滚动?


视觉差滚动可能是互联网中发生过的最美妙的事情,也可能是个被滥用的噱头,来蹂躏我们浏览器,这取决于你怎么看。无论你站在哪一方,它似乎近期并不会消失。

就我而言,我希望有时间和地方来实现视觉差滚动。这个效果对于某些单页网站大有裨益,而对于另一些则是噱头,甚至更糟:难以使用。关键是要明确一点,你使用视觉差滚动真的能提升网站的易用性吗,还是因为你觉得它看起来很酷?

如果要使用视觉差滚动,还要考虑一件事,使用Javascript还是纯CSS技术来实现。关于这两个选择,请参见资源部分了解更多信息。


何时使用单页网站,何时不用?


虽然有单页网站大有益处,但它们也不是完美的全尺寸适配方案。虽然很多时候单页网站比多页网站更合理,但也有很多时候不应该使用单页设计。

总之,假如你的网站只有少数页面,单页网站或许是最佳选择。将一切浓缩在一个页面上,能让网站整体具有更现代的外观,如果内容精简,那么单页网站可以让它看起来更丰富。

单页网站的另一个普遍案例,就是发布预告页面。它们通常是单页网站,带有新闻邮件的注册表单。多数情况下,发布预告期间面向大众的信息很容易组织在一个页面上,所以,设计这些页面时优先考虑这种风格是很合理的。


Clientsy


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

产品单一的电商网站,也是单页网站表现优秀的领域。如果你只卖一种产品,无论它是实体或是虚拟的,何必劳烦使用多个页面呢?一个简单的单页网站才是更好的销售工具。


Franzsans


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

可能你觉得更复杂的电商网站不适合用单页网站,但它仍然可行。当然,有十多种产品的网站中我会避免使用,不过单张页面也足以轻易支撑一个简单的在线商店,通过弹出窗口来承载产品详情和支付流程。


Simplygum


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

不该使用单页网站的情况十分明确:庞大、复杂,或必须保有海量信息的网站不适合做成单页网站。在这些情况下,使用相对传统的网站结构更加明智。


混合型网站


虽然有大量的单页网站存在,但也有很多混合型网站。它们给人印象是个单页网站,但通过ajax、弹出窗和类似技术,它们事实上包含了多页内容。

网站Dang & Blast就是这方面的绝佳案例。


Dangblast


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

如果无法让所有东西彻底融入单个页面,这会是和很好的解决方案。

说到单页网站,某些站点用了某种“取巧”的办法。它们的主站是个单页网站,但在其他域名下也有个博客(有时是Tumblr或托管在WordPress.com的网站)。这么做没有问题,它能突出主站的信息,也不用舍弃博客带来的好处。


单页网站的绝佳惯例


优秀设计的多数准则,在单页网站中仍然适用,其实也适用于任何网站设计。还有一些额外的东西需要牢记,其中有些之前已经提到了。

保持简单

设计如果对于你试图表现的内容而言过于复杂,对你和你的用户都没有任何好处。相反,要尽可能简化设计和内容,还能表达出你要的信息。


Petertoth


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

导航链接还是有帮助的

正因为用户可以通过滚动来浏览你的网站,但并不意味着这是最友好的方式。如果你的网站很长,有很多部分,这点尤其正确。除非有特别好的理由,还是应该加入直达特定部分的链接,来使你的网站更加友好。


Fraudforcesummit


分割内容

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

分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块,用户才能更容易找到他们所需。


Ritchiejacobs


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

让所有的背景都有所作为

单页网站常常有大幅背景。当然,有时候这些背景很朴素,或带有平铺纹理;不过也有单页网站利用所有的空间来挥洒创意。前面提到了,这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片,如果这样做与内容更相符的话。

相关资源:


Johnjacob


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


单页网站的资源


单页网站的资源成百上千,还包括模版;我们这里重点关注表现突出的几个。

PureCSSParallax Scrolling:Keith Clark的这篇文章阐释了如何通过纯CSS打造视觉差滚动效果。如果你不想用JavaScript(或者不懂)的话,这是个很好的选择。

Skrollr:“为剩下的人准备的视觉差滚动”。这是个独一无二的库,适用于移动端和桌面。不需要jQuery,只有原生JavaScript。

Stellar.js:Stellar.js是另一个简单易用的视觉差滚动库。它提供了很多设置选项和iOS支持。

One Page Website Wireframes:如果你不确定如何构建你的网站,这个单页网站线框图集是很好的出发点。免费下载。这里(Graphicburger)还有第二集可供下载。

One Page Love:One Page Love是首屈一指的单页网站集合,里面有超过5000个网站案例,并且一直在更新。他们还主打大量模版和其他资源。

Start Bootstrap:Start Bootstrap集成了海量的免费单页网站Bootstrap主题。主题适合机构、自由职业者、作品集、着陆页等等。

One Page Love Templates:除了丰富的网站集合,One Page Love也提供免费和收费的模版。

One Page Mania:One Page Mania提供独特的网站和模版集合,供你下载或购买。


结论


对各种网站来说,单页设计都是非常棒的选择。尽管它们不是小型网站的唯一设计方案,对很多项目而言它都是值得考虑的。思考使用单页设计的理由,然后也思考不用的理由,再做决定。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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






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

博博

编者按:酒店预订网站大多功能繁多,在视觉美观上有天生劣势,想平衡两者非常考验设计师的功力,借鉴相关的优秀网站是捷径,今天@AnyForWeb_UED 从众多在线预订网站中提炼了10条设计的技巧 >>>


一、用户需要一目了然的重点


进入酒店预订网站或是板块的用户一般来说目的性很强,他们心里其实已经有了很完整的设想,而来到网站只是为了完成计划。因此,让用户在首页就直观的看到他们需要的内容,并且尽可能的减少其他不重要内容的出现,这是一个提升用户体验的好方法。


Agoda


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

正如Agoda的设计,网站首屏以令人浮想联翩的风景图作为背景,酒店预订的快捷入口最为抢眼,就连公司口号标语也只是简短的出现在页面上方。首页设计以热门内容为主,根据大多数用户的喜好和点击查询量列出推荐,这样的想法确实很好,但是底部显示的“热门国家地区”和“热门城市”是不是有点太多了…


二、用合适的大图作为背景


用美观的高清大图作为网站背景似乎已经成了一种万能的设计方法,一张大图搭配简单的文字,就能轻轻松松让网站变得莫名的高大上。在图片的选择上,“是否足够美观?”可能是我们一味的关注点,而“是否合适”也许对我们的整体设计更重要。这里所说的“合适”包括很多方面,色彩、布局、大小,甚至图片中表达的含义。

如何选好图片:《设计师找图技巧!如何快速准确找到合适的网页背景大图?》


Airbnb


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

Airbnb的网站的图片使用方面很值得借鉴。首屏主要以大图片为主,在熙熙攘攘的人群中有一男一女快乐的行走,有一种回家的感觉。下半部分分别使用了具有各地特色的照片作为背景,让用户能更直观了对当地风俗有初步了解。


三、切换图片时减少误点可能


在酒店详情页中最受关注且最先出现的是关于酒店的一些图片,而这些图片内容对用户来说可能又爱又恨。当用户正在浏览的时候会觉得图片表现完整但有些杂乱,而当用户没需求的时候又会因为一些正常的操作造成误点。如果网站能先展示一部分图片,让需要查看更多图片的用户点击进入一个专门的图片板块,并且对这些图片进行分类,便于用户有针对性的快速找到自己需要的内容,这样的设计才更符合用户体验。


游多多


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

游多多的详情页图片使用了鼠标悬停后放大图片的效果,另外设有“全部图片”按钮。

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

点击“全部图片”出现弹窗,左侧显示关于图片内容类型的分类,供用户自行选择;右侧显示图片和缩略图。这种形式让图片部分的条理十分清晰。


四、完整详细的酒店信息


酒店信息详情页中的信息内容都大同小异,但一些细微的差别却能令网站的用户体验大相径庭。大多数网站的介绍以“酒店简介”之类的官方信息作为首要内容,其实,用户实际需要的并不是这些官方资料,与其息息相关的实用型内容才是他们最关注的。


住哪儿


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

住哪儿网酒店详情页的内容排序与大多数网站不同,文字介绍部分以“酒店设施”、“酒店政策”、“酒店介绍”…的顺序排列,真正按照用户的实际需求来做设计。


五、特别信息应该特别标注


这里所说的特别信息并不全部特指重要信息,也可以是一些网站方认为需要引起用户注意的优惠信息、赠送项目,或者数量提醒等。


Booking


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

Booking是一个专业的全球酒店预订网站,网站中的设计都比较人性化。正如案例中显示的酒店预订环节,使用的文字及其色彩都以使用者角度出发,对用户可能会感兴趣的内容作了不同颜色的显示,这种做法很利于促成销售。


六、图文并茂的生动点评页


其他用户的点评是很多正在选择的用户都会关注的板块之一,这些点评意见可能会对他们的最终选择起到很大的引导作用,因此这部分的设计更应该被重视。常规化的划分会让用户觉得沉闷单调,尝试着设计一个活泼生动的点评板块,让用户更容易接受和认可。


到到网


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

到到网的点评部分设计成了对话框的形式,并且支持图文并茂,增加用户的信任感,也让用户在浏览的时候更有参与感。


七、情感化预订日历


预订日历虽然只是一个很细小的环节,但是用户很容易在这里产生混乱,所以给予用户及时的交互反应变得格外重要,色差显示或小批注都不会显得多余。但在这部分的设计中也要注意,区域始终应该保持整洁,不能因为内容多而疏忽视觉感受。


去哪儿网


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

去哪儿网的预订日历设计表现的十分体贴。在选择日期的时候显示浅蓝色底纹,并且用小标识告诉用户总计天数,很大程度的减少了用户的思考时间。


八、互动产生反馈


用户在浏览任何网站时都喜欢有一种“我不是一个人在浏览”的感觉,所以每次鼠标悬停产生的一个小动作都会让用户觉得很温暖。


艺龙网


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

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

艺龙的首页交互效果做的很充分,几乎每一处悬停都会有反馈。但虽然案例网站的交互反应比较多,却也不会令人感到多余和复杂。这也给了我们一些启发:当一个页面中交互动作多的时候,需要注意产生的反应最好在一个指定的范围内,一旦超出范围影响到其他版块,就会令人觉得过于繁琐。


九、拆分复杂的流程


酒店预订的流程大多不会很复杂,和一般网上购物的流程大致类似,但首次预订的用户可能会少了一些安全感,而拆分并且显示整个过程就是消除用户不安的最好方法。


同程网


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

同程网站很仔细的对整个过程做了拆分。将每个比较重要的环节用口语化的文字表现出来,让用户不仅能够对之后要做什么有了清楚的了解,同时增加了网站的亲和力。


十、减少输入框和必填项


满屏的输入框和标记着红色星号的必填项与生俱来着一种令人反感的视觉体验,而很多网站恰巧就是这么做的!为什么一定要让用户必须先注册才能预订或者购买?这种强制性的行为要求会让用户觉得自己处于很被动的位置。如果网站能以柔和的态度解决登录注册问题会不会更好?


途牛网


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

比如途牛网的做法,“登录或注册可以获得更多优惠”,这样的引导也许更容易让用户心甘情愿的接受。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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






提升网站设计的10个小技巧

丽洁

每个人都是从初学者开始他的设计之旅的,你的审美眼光也要像其他事物一样经过训练。看 Dribbble 的设计可能是非常有帮助的,但有时候你只是欣赏设计,却不明白为什么。

 

没有灵感、没有优质的设计素材、不知道要设计什么,所有这些原因都可能会拖慢你的速度,让你感到沮丧。所以现在我将和你分享 10 个极其简单的设计技巧,帮你改善你的设计作品,而且不需要额外学习新的技能哦。

 

请记住,我提供的不是必修遵守的规则,而是大多数时候都有效的技巧。

 

1)把你的设计作品去色。

如果你没有好的想法或优质的设计素材,那么你可以把你的作品去色。你可以通过正确的构图获得野兽派的设计。这么做有助于你理解平衡、留白,以及如何使用文字和几何图形。

 

让我们来看一个案例:


 


2)用“平衡方案”测试你的画面。

我自己发明了一套测试画面的方法:用简单的几何图形代表画面中内容,然后通过比较页面中色块的面积来确定页面是否平衡。当你在自己的作品中使用这个方法时,会得到下图这样的效果。

 

 

通常你需要通过视觉进行判断,但这里我们可以做一些简单的计算帮助理解:

 

左边区域的黑色矩形加起来约为:

(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX

 

而右边的大长方形数约为:

446×446=198916PX

 

他们只是相差了一点点 3.9558%。

 

注意:圆形比长方形小,但由于相当锐利和细致,使它更吸引人的注意。

我在设计之前没有计算过。经过多年的练习,这只是成为自动的,因为你的眼睛会感觉到错误的平衡。

 

3)用背景来呈现设计。

我之前带来的例子是在灰色背景上呈现的,但你可以尝试不同的东西。这有助于为你的设计创造一些景深。但要注意,在一个真正的网站中,你不会有那么多额外的空间,所以这只是一个展示技巧!


 

4)使用推荐的字体大小。

不要再整天浪费时间去实验字体大小。一般情况下以下字体大小是合适的:段落使用 14-18 pt 左右,副标题使用 24-36 pt,标题使用 96-144 pt 左右。Figma 的默认大小对于排版来说是相当不错的。虽然它们看起来会很小,但这是正常的。

 

有些字体相对于其他字体会偏大或者偏小,所以你应该以标准字体为基础。比如 Roboto:如果字体大小接近 14-18 pt 的 Roboto,那就非常适合用于段落。

 

 

5)拥抱 Z 轴。

如果你有一些具有透明区域的图片,你可以利用它们来创建一些分层。

 

在网页开发中,CSS 代码有一个 Z-index 的参数,可以用来把图像带到其他项目的后面或前面,给人一种立体的错觉。

 

让我们看看我的一个简单的设计,其中就利用了这种技巧。

 

 

6)开始使用柔和的颜色。

鲜艳的色彩虽然美好,但往往会导致画面过于刺激。现在非常流行在设计中使用更加柔和的色彩,你可以在下图拾色器中红色标记区域内选取更柔和的颜色。

 


 


7)让画面有呼吸感。

在我看来,多一些留白要比没有留白更好。杂乱无章的设计就通常都很糟。你可以通过以下方式获得呼吸感。

 

1、保持大量的背景可见。

2、用间距避免文字墙效果。

3、使用不会吸引太多注意力的图片。

4、精炼你的文字。

 

 

 

8)在设计中使用噪点。

通常当我们想到设计的时候,我们会想到干净、流畅、清晰等概念。但完美就存在于缺陷之中。

 

在你的设计中,当你想给自己的网站一个优雅或艺术的外观,噪点是一个强有力的朋友。

 

此外,应用微妙的噪点让你的构图看起来像电影一样,这对视频和动态网站来说效果非常好。

 

你可以通过使用 Photoshop,在白色背景上创建一个 2-4 K 的高斯模糊,然后将其应用在你的画板上,从而获得一些噪点纹理。

 

 

9)开始寻找更好的字体。

我们电脑上预装的字体通常都不是很好的选择。要想找到更好的字体,可以开始上网冲浪或看 youtube 视频,了解精彩的字体和字库。

 

但要注意:很多字体都不是免费的,在没有授权的情况下使用它们可能会给你带来麻烦。不过不用担心,大多数的字体都有免费版本!

 

虽然有大量不同的字体和风格,但一般来说,我把它们分为三大类。

 

1、古典字体

2、现代字体

3、正文字体

 

通常情况下,前两种也可以用在正文中,只是字体的设计者希望你把它们当作标题来使用。

 

古典字体包括Abril Fatface、Playfair Display、Volux、Chalga和许多其他字体。

现代字体包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....

 

 

10)利用几何图形。

这可能是最难利用的技巧,但如果应用得当,画面会非常有冲击力。

 

利用几何图形有助于强化布局中的概念和秩序,甚至不需要使用额外的图像。找到合适的几何图形是很难的。目前我还是不能很好地掌握它。

 

但是有一个诀窍是,把你的文案中的字母、数字和标题当作几何图形:把它们做成巨大但微妙的形状,或者用一些特定的字母作为形状(字母 A 就很好用)。

 



作者:知群

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



复杂网站的导航模式要怎么设计才合理舒适?

鹤鹤

具有大量库存商品,或是涉及复杂产品的网站,通常会提供产品类别页面,或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表,但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤,让用户不用一下子面对海量的分类信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Eddie Bauer 在其全局导航中, WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容,以及促销子类别(例如SHOP FLANNEL 和 SHOP FLEECE )的链接。

类别页面通常提供以下组合:

  • 类别的描述、解释及其包含的内容
  • 带有描述和代表性图像的子类别菜单
  • 推销该类别中的特色产品

并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火,因为用户需要通过额外的步骤才能查看特定类别的产品。

许多网站完全省略了类别页面,而是将用户直接引导到产品列表页面,在那里他们可以借助过滤筛选的方式来浏览产品。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Bonobos 网站上的 Pants & Jeans 链接不是类别页面,而是将用户直接带到产品的列表页面。这种方法通常效果很好,因为它尽快向客户展示了他们可选的选择。

虽然本文偏向于电商网站中的类别页面的探讨,但实际上这些页面也用于其他类型的网站,特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况,但最好根据领域对你的设计进行测试,以防你的用户需求与购物型用户的需求不同。

何时使用类别页面

如果您的电商网站所涉及的产品非常复杂,以至于您的许多客户需要经过学习之后才会使用,才能正确地过滤和比较产品,那么类别页面就是一个好主意了 。此外,具有 大类别和大量子类别的网站,有时会提供某种类型的独立类别页面,以帮助用户找到有意义的起点。

不过,你可以决定让特定的产品具有类别页面,而其他的则不具有独立的类别页面。例如,Lululemon 主打的健身服装产品(大多不需要分类页面),同时也销售一种名为 MIRROR 的昂贵的家庭健身产品,后者需要更详细的解释,因此有自己的分类页面。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面,但并未为其所有产品类别使用类别页面。

阐释复杂产品

类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项,他们可能还没有准备好单击单个产品。与随机点击不同的产品相比,类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。

例如,智能手表通常会有不同的功能和价格范围,著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面,列出了不同类型的智能手表,并提供「立即购买」、「了解更多」 以及「比较」的选项。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异

子类别的特征

购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而,一个拥有大量产品和内容,并组织成许多子类别的网站,仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品,此外它还可以为国外的购物者提供帮助。

REI 销售用于各种户外活动的许多产品,从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后,页面跳转到一个包含所有露营产品的列表面,用户可能会不知所措,而且无趣。相反,REI 让链接指向到一个传统的类别页面,而不是列表,这个页面包括:

  • 子类别 (帐篷, 睡袋 , 远足)
  • 该类别中最受欢迎的品牌(Osprey、YETI)
  • 与类别相关的季节性信息(寒冷天气徒步旅行)
  • 建议(如何选择睡垫、食物储存和处理的技巧)

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。

不要强迫客户浏览类别页面

如果你的网站确实提供了传统的类别页面,请同样为用户提供了避免进入这些页面的简单方法,并在他们愿意时,也能直接转到产品列表页面。为你的站点的全局导航,提供指向子类别产品的列表页面(比如使用超大导航 Megamenu ),以及指向传统类别页面的链接。

可能还需要确保搜索结果始终指向产品选项,而不是将购物者引导到类别页面。在我们的研究中,Zappos 会将某些搜索结果指向到以品牌为中心的类别页面,而不是链接到该品牌的产品。

在用户测试的时候,一位参与者看到孩子后很生气,因为搜索她最喜欢的品牌 Sam Edelman 时,她进入了一个具有促销感的传统类别页面,而不是指向她要的产品。对她来说,这感觉像是一个不必要的额外步骤。

「当我进入 Sam Edelman 时,我想看到结果。我不希望打开一个品牌的分类页面。」

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

当用户在 Zappos.com 上搜索「sam edelman」时,她很恼火地看到一个没有列出任何单个产品的品牌类别页面。

当用户搜索时,他们希望立即看到结果。

混合:在产品列表页面上提供类别信息 

为了避免传统的类别页面的缺陷,并提供对产品列表的快速访问,许多电商网站现在在主产品列表页面中,结合混用了少量的类别有页面的设计——例如简短的描述性内容,或简短的子类别菜单。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在女士紧身裤 产品列表页面上,Lululemon 包含了一些传统会在类别页面上显示的元素:营销内容(蓝绿色框标注的区域)和对不同紧身裤样式的解释,以及指向这些子类别的链接(以黄色框标注的区域)。

这种混合呈现方法效果很好,因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它,而不感兴趣的用户可以简单地跳过,直接快速访问实际的产品列表。

说明内容

一些电商网站在 产品 Banner 旁边加入营销的内容和元素,这些元素传达有用的信息而不会减慢用户的速度,就像传统的类别页面一样。

高级珠宝零售商 VRAI 使用混合式设计,在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中,圆形订婚戒指页面中,包含了带有价格的产品列表,以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明,以及更多详细信息。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

在这个列表页面中,VRAI 包含了促销内容(以蓝绿色框标注)和说明性内容(以黄色框标注)。其中所呈现的图文内容是典型的传统类别页面的特征(没有产品列表)。

子导航

一些零售类的网站不使用类别页面,而是提供指向产品列表页面上的子类别的导航链接。这些链接(这是最初发明类别页面的原因之一)让用户轻松浏览网站的产品库存。

例如,Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别,并提供指向该子类别的链接。这些内容直接显示在产品列表上方,帮助用户了解可用类别项目,并且直接导航到这些类别。

复杂网站的导航模式要怎么设计才合理舒适?我总结了7个方面!

Ann Taylor 的网站在 裤子 的列表页面的顶部,加入了不同裤子款式和合身度的说明和图片,以便用户了解其中的差异。

文章来源:优设  作者:陈子木
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


开启新时代的响应式网页设计

鹤鹤

///

它是如何开始的-固定屏幕

在千禧年来临之前,我们首先开始在单一视图屏幕中进行UI设计,这类屏幕在当时最流行的尺寸是640x480。大多数时候,我们甚至没有考虑让屏幕滚动,而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑,当时的大部分网页也是用Flash或HTML创建的,并带有用于布局的表格。那是在智能手机出现之前,随着事物的发展,我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路,CSS已得到长足的发展,“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history


///

它现在怎么样-响应式设计

随着CSS3的发布,我们获得了对“媒体查询”(Media Queries)的访问权限(译者注:随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries,即“媒体查询”),此后不久,Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来,我们一直使用“响应式网页设计” (RWD) 创建网页布局,作为一种网页设计方法,仅需基于一种屏幕尺寸进行设计,“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期,当移动电话还不兼容媒体查询或JavaScript时,“移动优先”和”渐进式增强”的概念就成为了非常流行的方法,当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计,我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时,我们使用“媒体查询”来更改整个页面布局。

 

///

它的未来是什么-组件驱动

很快,使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport(视口)的“媒体查询”获得了许多强大的工具,但我们也缺乏很多适配的可能性,因为“媒体查询”是一个适用于整个页面的通用解决方案,并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力,也缺乏将“响应式”样式注入“组件”本身的能力。


当我们谈到组件时,这里指的是页面上的“元素”,这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容,每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information(全局视口信息)来设置这些组件,但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时,这使得它变得更加困难。

好消息是这个生态系统正在发生变化,而且它正在迅速变化,这需要我们进行一些思维转变:考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展,“响应式”网页设计的新时代即将到来。从目前的情况来看,自从我们第一次引入 “响应式网页设计” (RWD) 以来,仅仅10多年的时间,这个生态系统已经准备好迎接CSS发生一些相当大的改变。


让我们深入研究一下可以期待哪些类型的变化,这会如何改变我们的设计方法,以及我们如何考虑界面设计。

 

///

用户能够设置基于个人偏好的“媒体查询”

简单来说,我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表,但能给你一些想法,这些基于偏好的“媒体查询”可能包括:

这些将帮助我们构建更具活力和个性化的网页体验,专门满足我们用户的专属需求,尤其是那些希望网站易于访问的用户。更进一步说,这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子,当用户的操作系统偏好设定为“减少动效”时,他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好,并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme(配色偏好设定),它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”,它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”(container queries),通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估,尽管今天使用它并不安全,但重要的是要了解其发展方向。

简而言之,“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立,与现代设计系统保持一致,真正成为“即插即用”模块,可以转移到任何页面或布局,而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法,因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要,我们应该研究一下。

 

///

考虑各种形态因素

由于各种“形态因素”(form factors)的变化和扩展,例如新的屏幕类型,可折叠屏,我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中,请记住,这是最具实验性的,并且只是一项正在进行的工作,仍在尝试解决我们可能遇到的任何复杂问题,同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中,原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如,你可以在一个屏幕上放置一个收起的侧边栏(或菜单),并允许内容在另一个屏幕上展开并随页面滚动。

 

///

为什么我们需要它?

我知道你在想什么,我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意,那么为什么要改变呢?如果我们真的以终局视角来看响应式设计,那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页,诸如“容器查询”之类的工具将变得非常有意义。

配图:CSS 将基于各个层级来确定用户的最佳体验

 

考虑到这一点,这意味着我们现在可以使用基于页面的媒体查(包括跨越屏幕的细微差别)来设计宏观布局;使用容器查询的组件设计微观布局;使用基于用户偏好的媒体查询,根据用户独特的偏好和需求定制用户体验。

 

对于新的响应式设计,有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实:即我们的设计不是静态的,不仅在布局上,还有在用户可获得的体验中,我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂,我们需要适应和挑战自己,理解“新响应式”体验的意义。

 

文章来源:站酷   作者:MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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

如何在企业官网刻入品牌DNA?

涛涛

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


文章来源:站酷 作者:增长超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端两大设计系统哪家强?

涛涛

编辑导语:有效地利用 B 端设计系统,产品设计师将可以更高效地做出更好的交互设计。那么前段时间发布的 Arco Design 设计系统,和已有的阿里 Ant Design 系统,二者有什么区别呢?本文作者对两大设计系统典型页面发表了他的看法,一起来看一下。

简介

前两周字节发布了自己的中后台设计系统 Arco Design,在仔细阅读官网文档了过后,想和大家聊聊我自己对于 Arco Design 设计系统的与阿里的 Ant design 的一些对比和差异分析。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

ArcoDesign 是一套设计系统的简称,是基于字节跳动所有的中后台产品。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由 UED 设计和开发同学共同构建及维护。

Ant Design 是阿里打磨出的一个服务于企业级产品的设计体系, 通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验

B端两大设计系统哪家强?来看这篇超全面的对比!

总览

Ant 和 Arco 两者的前端框架都是基于 React 和 Vue,设计价值观和设计原则也有所不同。Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观,试图建立务实而浪漫的工作方式。在「设计价值观」的坚持上,Ant Design 有四点与众不同:「自然」、「确定性」、「意义感」、「生长性」。

我的个人理解 Arco Design 是站在设计规范的基础出发点考虑,希望给用户传递出来的价值出发,让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的,而 Ant Design 所传递出来的价值观似乎更加玄学或者说格局更高,上升到更高的思维境界,即大自然思想和社会责任。

当然这部分的内容相对比较虚,每个人侧重点想法都不同,大家可以自己去理解一下这部分内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

B 端典型页面分析

接下来会从工作台、表格、表单几个典型高频的 B 端界面进行分析,看看两者的差别。

1. 工作台

1)布局

Arco 的卡片列布局灵活,基于 24 栅格进行布局,将整个栅格区域 2:2:1 的比例进行分割,信息卡片的宽度根据栅格宽度进行自适应,这样的工作台页面既灵活也能够满足业务需求。

Ant 的卡片列布局采用 3:2 比例进行布局,同样是基于 24 栅格。目前主流的 B 端页面都是以 24 栅格为基础进行设计。3:2 还是 2:2:1 这两种卡片布局方式没有绝对的优劣,主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局,满足信息展示的最优布局。

作为 B 端的工作台页面,核心诉求是能够清晰找到用户想要的信息,想要做的内容,所以我们设计师要优先保证用户能够快速定位到核心的信息,快速到达要到达的功能。

2)信息展示

Arco 针对同系列的模块设计了两种尺寸的间距,例如欢迎问候信息与下方的数据信息之间是大间距,数据信息与下方的团队动态最近项目之间是小间距。

格式塔心理学的接近原则指出:接近的事物会被认为是同一个整体,拥有相似的功能或特征。所以在这里设计师通过两种间距的留白对我们视觉进行暗示,强调信息之间的关联程度,便于区分信息层级。

Ant 在卡片方面没有为卡片间距设置两种尺寸,从上下到左右都是一种尺寸,这样做的好处可以让视觉更加对齐,显得页面更加规整,不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦,显得内容区域很散。标题方面没有进行加粗重色强调,将内容进行突出,使用户更加聚焦于内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)导航方式

两个系统默认都采用侧边栏导航方式,侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。侧边栏导航扩展性强、展示灵活、能够快速定位,缺点是不易阅读、阅读沉浸感低。

B端两大设计系统哪家强?来看这篇超全面的对比!

Arco 导航区域与内容区域都使用同类浅色,采用线的方式进行分割,整体视觉比较清爽。Ant 导航区域使用了传统的重色与内容区进行区分。

目前的设计趋势流行浅色导航,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们不约而同地将块面去除,去掉多余的的灰色,通过留白和空间将页面拉开。这否是下一个 WEB 端所要追寻的趋势,我还不得而知,但是对于导航层级多的侧边栏导航,我仍然建议使用深色背景区分导航栏。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

有一个细节,在页面背景有一个以登录的用户名形成的一个背景水印,在 B 端的页面中,对信息的保密程度要求很高,这里是为了防止公司核心数据资料泄露,在截图的时候会有水印的存在,增强了信息的保密级别,这是一个很好的设计洞察点。

B端两大设计系统哪家强?来看这篇超全面的对比!

2. 表格

1)表格样式

表格作为组织整理数据的手段,可以有效地向用户展示数据信息,是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷地实现以上场景中的诉求。

Arco 和 Ant 的表格设计样式与市面上多数产品都类似,采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

合格的表格设计要定义合理的表格行高,在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。

文字行高可以设定为字号的 1.2~1.8 倍,文字与分割线间距离可以设定为字号的 1~1.5 倍。

B端两大设计系统哪家强?来看这篇超全面的对比!

2)信息展示

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。

在 B 端用户使用场景中,数据量极大的表格的展示问题是体验优劣的关键因素。对于 1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于 1366×768、1280*720 等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。

B 端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

Ant 的表格功能很齐全,很多功能都是 B 端产品的痛点,例如表格可以通过调整单元格行高来调整密度,紧凑模式下可以显示更多的数据。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)操作路径

作为一个查询表格,我不是很理解为什么 Arco 将查询条件放置在表格右上角这么隐秘的位置,而将明显的左上角放一个添加按钮,如果存在多个查询条件是不是要从右往左放置呢?这里我不是很理解,大家也可以说一下自己的想法,相互探讨一下。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 的表格使用路径符合 F 型视觉动线布局,在 B 端的市场中这种表格的设计方式已经符合用户的操作习惯了。

B端两大设计系统哪家强?来看这篇超全面的对比!

在 2006 年时候,尼尔森诺曼发表了一篇人们如何扫描和阅读网站习惯的分享,他们通过研究发现,用户倾向于一种 F 模式去查看网站。F 模式,能很好地帮我们创建好的视觉层次结构设计,因为这是人们可以轻松扫描设计一种布局,它能让大多数用户感到舒适,因为我们用户一直从上到下,从左到右阅读。

在设计之前,我们先要去确定哪些内容最重要,明确信息的优先级,只有清楚知道你希望用户看到什么,才能将它们放在用户视线热点中。

个人认为在表格设计的完整度和设计的合理性方面来看,阿里的 Ant 系统做得比字节的 Arco 更好。

3. 表单

表单在界面中主要负责数据采集的功能,任何一个表单都可以被拆解成三个最基本要素:

标签(标题)、输入框和按钮。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

1)表单布局

Arco 的表单属于复杂表单,当表单条目数在 7 个以上,可归类到复杂表单,这时候就需要根据表单的复杂度、逻辑性、关联性进行判断,选择合适的分组方式,进行归纳简化,降低表单填写负荷。采用 3 列布局,便签与文本框上下左对齐,这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。

Ant 的表单也是较为常规的布局方式,有一点差异就是文本框并没有右对齐,这里阿里自己也做出了解释:文本框是根据需要填写的字段进行长度展示的,需要填写内容比较长的文本框就会比较长。实际业务中,大部分 input 所需填写内容都存在理想长度,input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

2)标签对齐方式

Arco 和 Ant 都使用了顶标签的形式对齐。

标签分为左标签、右标签、顶标签三种,不同的对齐方式,使用场景不同。

B端两大设计系统哪家强?来看这篇超全面的对比!

该如何选择呢?我们需要从 3 个方面进行考虑:操作效率、标签长度、屏效、视觉对齐。

① 操作效率

根据 Matteo Penzo 的研究总结得到的浏览时间表发现,标签移动到输入框的时间,顶部对齐最快只要 50ms,其次是右对齐 240ms,左对齐耗费时间最长 500ms。

因此当以操作效率为主时,推荐使用顶对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

② 标签长度

当标签长度超过 8 个字,或者需要考虑中英文双版本时,推荐使用顶对齐的方式,其容纳的标签文字更多,拓展性更好,比如 Ones 的建任务的标签,就采用标签顶对齐的方式:

B端两大设计系统哪家强?来看这篇超全面的对比!

③ 屏效

如果只考虑屏效,那么标签左对齐右对齐均可,但是如果还考虑表单录入效率,那么推荐使用标签右对齐的方式,比如蜂鸟汇报:

B端两大设计系统哪家强?来看这篇超全面的对比!

颜色主题配置

Arco 的颜色主题配置可以说是让人眼前一亮了,可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、 到组件的按钮、导航、分类、表格 一共有接近 40 款组件的样式,并且都是可以进行可视化编辑与实时预览的。

如果你用了 Arco 过后,或许不用苦苦地站在前端后面,让他帮忙调整页面,作为设计师自己就能够搞定,并且每一个组件可以调整的粒度是非常之细,包含各种宽度、图标大小、颜色、投影,等等…在这里可以编辑自己的主题,也可以在商城社区查看到别人发布的主题,真的是很方便啊。

真的有些 amazing!假如你需要去设计一套官方的设计系统,完全可以通过 Arco 进行设计和预览、落地。

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 并没有做这方面的功能,颜色主题配置这一块确实是 Arco 很大的亮点。

B端两大设计系统哪家强?来看这篇超全面的对比!

总结

无论是 Arco Design 还是 Ant Design 设计系统,都代表了字节跳动和阿里两家互联网巨头公司在 B 端领域的沉淀和竞争。对于 B 端交互设计师来说,两个设计系统都值得我们去研究和学习,建议大家都去看看设计规范里面的内容,对于我们认识和熟悉控件以及和开发对接都很有帮助。

文章来源:优设 作者:哄哄
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



三八女神节首页

前端达人


转自:站酷

作者:柯大仙


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

眼镜类官方网站

前端达人



转自:站酷

作者:动之以情丶


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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档