网页设计 / 网站开发 / 搜索引擎营销

上海市徐汇区复兴中路1237号

service@do-shi.com

Follow Us On:

弹出框里的设计门道,你是否都知道?

网站对于每个企业而言是展现品牌的重要渠道。 当你在为你的用户设计网站的时候,一定要控制好网站的内容量。用户并没有必要在塞满屏幕的大量信息当中,费劲巴拉地去找自己想要的那一条。极简主义风格的流行并不是没有道理的。 有针对性地呈现内容,为品牌进行合理的适配,提供清晰且扣人心弦的视觉设计,这样的网站是令人印象深刻的。 极简的设计并不意味着你无法和用户进行更多的沟通,也许你觉得当前的设计还不足以满足你的品牌和用户进行沟通的需求,好在还有许多方法和技巧帮你做到这一点。 弹出框就是为此而出现的。在几年前,这种设计被作为一种不影响当前网站内容的信息呈现方式而广泛应用,随后又因为大量的、无节制且毫无美感的滥用,被设计师和用户广泛吐槽。Google 认为弹出框对于用户体验造成了明显的干扰,同时,需要借助弹出框提升信息交互的设计师和开发者因此也困扰不已。 那么,这是不是意味着弹出框已经被淘汰了?并非如此。进入的文章我们将会详细为你分析弹出框在如今UI/UX设计当中的真实情况,并且提供一些可供参考的最佳实践。 弹出框的设计现状 首先我们应该聊聊弹出框的类型,正确用法。 弹出框的类型 弹出框遵循着一系列模式而存在。它会在打开网页的时候弹出,滑入网页,或者干脆就在网页加载的时候就直接加载进去了。虽然有的网页会将它置于页面的正中间,不过也有许多设计师将它置于页面的底部或者角落。 插页式和覆盖式的弹出框会覆盖住整个屏幕,通常会出现在一打开网页的时候, 另外一种是通知栏式的弹出框,它会紧贴在页面的顶部或者底部,甚至是常驻式的存在。 使用弹出框的5个原因 弹出框有的时候确实令人头疼,作为设计师你总想远离它。但是,它依然存在于许多网页当中,并且发挥着巨大的作用。下面的5个理由,让设计师真正离不开它。 1. 弹出框能够让人集中注意力 越来越多的用户无法集中注意力阅读,弹出框这种打断式的信息呈现方式,非常抓人眼球,能够快速直接地传递信息。 2. 让用户注意到最重要的信息 弹出框让其中所呈现的信息拥有了额外的价值,当弹出框出现的时候,其中所展现的信息拥有了超过其他信息的重要性,至少感觉上是这样。 3. 弹出框是多用途的 如今的弹出框拥有多种多样的玩法和呈现方式,不会将用户推开,也不再使用广告让用户头疼不已。弹出框的触发机制也非常的多变: 在进入时弹出 滚动到特定的位置时弹出 通过特定操作触发 在离开时候触发 4. 保持页面干净整洁 正如我之前所提到的,极简主义的设计让网站足够美观,但是想要顺畅地传递信息,弹出框能够作为不错的载体,确保不会占用页面位置,影响整体风格。 5. 提升转化率 根据 Sumo 的研究,弹出框和转化率之间有着清晰的关系。他们发现,弹出框让转化率的平均转化速度提升了大概3%,而设计得好的弹出框能够将转化率提升到9%,对于许多网站而言,这个转化率的意义是非同凡响的。 弹出框提升了网站的参与度。 移动端UI中的弹出框 值得一提的是,Google 在分析报告中并不反感移动端的弹出框,而是建议让设计师和开发者尽可能巧妙地进行移动端弹出框的设计,降低弹出框对于用户体验的损害,而是尽量去提升用户体验。 因此,Google 将会对采用下面3种弹出框的网站予以处罚: 当用户一打开首页就弹出的弹出框 弹出框盖住了几乎全部页面 弹出框广告 明白了吧?现在,我们要聊聊弹出框的设计技巧了。 18个弹出框设计的最佳实践 不要为了跟随某个趋势,展现某种设计元素而使用弹出框,它一定要是功能性的,不要浪费用户的时间,这样会降低用户对你的信任。 弹出框的设计应该和网站本身保持一致,无论是风格还是素质上。 确保弹出框是可交互,有响应的。 确保弹出框中的文案是简短而重点突出的。 不要使用被动的或者过于生硬的「是/否」式的行为召唤文案,除非你的品牌个性本就如此。如果弹出框中包含两个 CTA,请尽量采用积极的方式来展现。 如果你在搜集用户的联系信息,最好只让他们提供电子邮件地址。 确保弹出框的内容和对应的页面保持一致。 如果可以,尽量避免在首页上就使用弹出框。尽量让用户先适应所处的页面环境。这是 Google 所允许的弹出框设计之一。 遵循 Google 对于移动端网页的设计规则:不要有插页式的广告,不要设置首页弹出框。 不要让移动端弹出框和桌面端的完全一样,有针对性地进行设计。 总是使用简单统一的方式来关闭弹出框,即在右上角设置一个X关闭按钮。 让所有的弹出框都在恰当的时候才弹出,比如关闭页面的时候。 设置频率规则,确保访客不会在每个页面或者每次访问的时候都会碰到弹出框。 将弹出框设置在正确的位置,根据网站的状况和体验的度量来进行判断。 如果你想让弹出框醒目,尽量让它出现在屏幕的正中心。 如果你想推送优惠信息,可以使用顶部悬浮式的弹出框。 如果你想在用户浏览的时候推送信息,弹出框尽量出现在屏幕的一侧。 根据用户类型细分来自定义弹出框信息。 结语 如果你真的希望用户知悉一些关键的、重要的信息,不要吝啬使用弹出框,你可以尽量让弹出框体验更好,提供更加有用的、他们需要的内容。不要害怕 A/B测试,这样的方法会让弹出框更加优秀。一个优质的弹出框需要你考虑很多因素,包括整体的设计,文案、位置、CTA等等。 「2018年设计趋势,一个都不要错过」 《2018年,这10个LOGO设计趋势值得你关注》 《超全面总结!2017年UI设计领域流行过这21个设计趋势》 《掌握这12个移动端UX设计趋势,你就掌控了2018年》 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》 ================明星栏目推荐================ 优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。 设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com...

如何构建 Web 端设计组件之树和日期时间选择器

Echo :本文主要讲解表单中的 treeselect 树选择、datepicker 日期选择器和 timepicker 时间选择器。 根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。 表单在网页中主要负责信息数据采集功能,用户需要填写输入信息数据并且提交到后端数据库,以此完成信息的采集,则这种组件就是表单组件。 本文主要讲解表单中的 treeselect 树选择、datepicker 日期选择器和 timepicker 时间选择器。 一、treeselect树选择 1. 定义 具有层级关系的选择器。 2. 使用场景 需要使用选择器,同时可以提供层级结构的枚举项时。 弹出一个下拉选项给用户选择操作。 具有单选和多选的功能。 例如用户搜索关键词时,需要对搜索结果进行二次筛选,常见的使用树选择有城市、组织架构等。 3. 基础样式 只能选择枚举,不支持在选择框中进行关键词搜索,且为单选。用户选择选项后,浮层收起,表单为完成态。 对于选项中层级结构是否展开收起,则根据父子层级架构来看待,例如省市比较多,默认展开的话,查找起来会变得很困难,收起的话则可以快速找到省,再次点击可快速找到市。 ...

上万字干货!超全面的网页设计规范:文字篇

文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步: 系统全面地了解文字的基础知识、显示方式、影响因素及当前网页设计中适合的文字系统; 梳理出自己团队所有产品文字使用情况; 综合第1步、第2步总结出适合团队业务的文字系统。 注:网页设计规范色彩篇马上会发布在优设V+会员专栏,想获得整个网页设计规范系列干货的同学,请右戳 → https://www.uisdc.com/uisdc-vip 字符屏幕显示原理   1. 字符 字符是指计算机中使用的字母、数字、标点符号等等。 计算机最初发明出来是用来解决数字计算问题的。 后来发现,计算机还可以做更多的事,例如文本处理。其实计算机挺笨的,它读到的所有字符都是由1和0组成的字符串,因为计算机电路只有两种状态,「开」和「闭」,对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。   2. 二进制 「二进制」是数字世界里的基本规则。 下面这些不同格式的文件,在本质上都是一串由1和0组成的代码,要了解这些文件首先要了解二进制。人有十根手指头,但计算机电路只有「开」和「闭」两种状态,所以满十进一位的计数方式更适合人类计算,而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。 △ MP4 △ MP3 △ JPG △ TXT △ AVI 以图像为例,我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。 ...

这9个视觉惊艳的网页,是这样设计出来的

设计是一个不断发展和变革的领域,很多时候,看似熟悉的设计趋势会在下一刻摇身一变,再次惊艳到你。灵活的创意和开放的想法,常常能够使稀松平常的元素摇身一变,化身为惊艳的设计作品。这种点铁成金的成就感,大概也是许多设计师即使辛苦也会坚持下去的原因所在吧? 今天,我们搜集了几个Tubik Studio 内的设计师作品,它们是不同业务目标下的产物,这些UI设计作品从配色到动效,无疑都是相当惊艳的。今天,我们透过这些案例,来聊一下优秀的UI视觉设计台前幕后的事情。 1、凸显特点:设计工作室的官网设计 形体和色彩,到底哪个在设计中更加富有表现力?这个问题可能没有一个固定答案,这场在战争在设计领域当中已经持续多年,甚至会一直持续下去。这个设计项目是为一个室内设计工作室来设计官方网站,他们的主要业务是制作可视化的室内设计渲染图。他们熟知如何最大限度地借助设计工具来呈现室内设计的效果,在接到需求之后,我们决定使用全屏背景结合他们最擅长的3D建模,来展现高质量的室内设计能力和建模渲染效果。 富有层次感的排版布局,让前后景的内容各司其职,关键的内容块也可以很轻松地被扫视。每个区块都有着醒目的标题,能够告知用户内容的属性。页面顶部的导航中呈现了品牌的LOGO,页面中相关社交媒体链接也非常清晰醒目。在这个色彩丰富的页面中,关键的CTA按钮是需要借助对比色来凸显,将用户导向特定的功能和页面。 数字建模所带来的好处是更加沉浸式的场景,和更加易于处理的数字素材,这样一来,设计师也更容易处理,加入更加有效的动画效果。在这个案例当中,动效设计师让用户在滚动的过程中,看到条纹式的效果,使得页面的层次感明显,也暗示了这个设计工作室在视觉效果上的强大处理能力。此外,用户可以借助页面指示器快速切换页面,这一点也确保了整个网站在功能上的便捷和完善性。 2、强化属性:订购服务的网站页面设计 对于出门旅行,绝大多数的用户都抱有着不小的期待。但是旅行本身并不轻松,需要订购酒店,需要购买机票和车票,租车,购买门票,同时旅行还意味着非常大量的活动。而这次的概念设计,就是围绕着预订服务来展开的。同样使用了3D建模来构建视觉,诸多和日常出行相关的视觉元素占据了左侧的页面,而右侧则是预订需要填写的表单内容。整个页面采用了更加富有活力的配色,降低用户填写表单时候的紧张情绪,清晰直观的页面布局,让用户无需四处摸索,可以直接开始交互。从标题到表单的条目都保有良好的对比度,可以快速扫视阅读,便于用户填写。 向下滚动,用户可以了解这项服务的相关优势,特殊的功能,相关福利,以及更多的信息。每个信息都紧密围绕着一个主题来予以阐述,视觉化的元素被设计得非常吸睛,同时,和整体在风格调性上也保持着高度的一致。 3、营造层次:库布里克的作品网站 今年 7 月 26 日,世界电影人都在庆贺著名导演库布里克诞辰90周年,同样身为库布里克粉丝的我们,也为他制作了一个相对优雅的作品网站。网站展现了他的荣耀之路,他的生活,以及他是如何进行创作的。整个网站的设计都是借助视觉化的设计来驱动用户不断浏览,交互不仅在上下左右布局上富有层次,而且在视觉纵深上做文章。作为一个产出过如此之多经典作品的导演,我们选取了对比度强烈、经典的红黑白三色来作为整个网站的主要配色,这一点非常符合他独特的定位和属性。戳这里查看这个网站。 4、渲染氛围:托儿服务的着陆页设计 所有的父母在寻找托儿所和托管机构的时候,都希望他们的孩子获得最好的服务,找到能够给予孩子无微不至关怀的保姆。这个着陆页的设计是为名为 Kiddy 这个托儿服务提供机构所设计的着陆页。Kiddy 致力于为用户提供服务良好的保姆,在这里雇佣保姆绝对称得上是小菜一碟。 为了让整个页面足够可爱,风格独特有趣的插画发挥了极大的作用,搭配性格富有童趣的字体,让整个页面足够视觉化。与此同时,柔和的配色方案之下,文本和背景之间的对比度非常高,用户只需要扫视就可以轻松读取内容。 整个页面包含了一个着陆页应有的所有组件:有过去客户的推荐内容,新用户可以和顶级、专业的托管人员直接连线沟通,相关的信息一应俱全。最重要的是,用户如果想直接雇佣保姆,甚至不需要翻页,进入页面就可以直接沟通。 5、引人注意:VR虚拟聊天室服务的网站设计 我们很多时候会有脱离现实的冲动,还有什么比VR 更具有沉浸式的体验呢?这个疯狂的想法催生出了VR虚拟聊天室的概念,更疯狂的是它还是基于Web平台来实现。明亮而带有迷幻特征的配色,引人瞩目的3D图形象征着现代技术。为了更好地演示,用户可以直接在第一屏观看,而无需滚动页面。主页提供了相关虚拟聊天室的介绍和模板链接,用户甚至可以订阅而定期获取不同的模板,进行升级。 高饱和度的色彩和3D建模非常贴合目前虚拟现实给用户带来的体验,而极端醒目的色彩所给人的不真实感,相反更加强调了虚拟聊天室超越现实的特征。 6、制造对比:为手作市场进行网站设计 如今各种设计工作室甚至家庭制作的各种手工制品正在受到越来越多的追捧,通过这样的一个C2C平台,大家可以将自己的手作提交上来销售,买家借此可以获得很多独一无二的商品。在给这个手作市场设计网页的时候,主要借助了栅格系统来确保整个页面布局看起来错落,但实际非常规律。优雅的布局和配色,在阴影和动效的加持之下,看起来层次丰富,又不显得混乱,非常引人瞩目。 浅色的背景赋予网站以良好的空间感,这使得图片天然具备了抓人视线的特质,相对多样的文本、色彩和样式,让整个网站显得丰富而不单调。页脚采用了黑色的背景图片,主要内容以外的其他信息和链接都被收纳在这里,方便用户获取内容。 7、打破常规:建站服务公司的网站设计 ...

氛围独特情绪深沉的深色系网站,设计上有什么讲究?

在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常常会呈现出更为独特的氛围,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。 想要借助深沉的色调来创造情绪相对独特的网站设计,是有一些可供遵循的常见的设计技巧,今天的文章,我们来分享一下这方面的内容。 深色,并不定是黑色 首先这一点必须明确,深色并不一定是黑色。 在选取配色的时候,网明亮的色彩当中添加黑色或者灰色所得出的色彩,通常会显得更加深沉浓重,这样的色彩中往往会包含之前的色调。 在上面的 Hooligan 这个网站当中,设计师不仅采用了深沉的黑色背景,而且采用了和黑色背景相当匹配的暗金色,两种深色之间色彩明暗依然存在对比,和白色的标题文本构成了三个层次,不仅富有视觉吸引力,而且创造出了沉稳厚重的氛围。 阴影的使用 阴影和光线往往是相伴出现的,而阴影所带来的舞台剧般的效果则充满了戏剧感和神秘感,这也是设计师喜欢它的原因,这样的设计会让用户心中产生兴趣和好奇心。 在上面的 Clear Motion 这个网站当中,车辆周围被阴影所包围,文本内容很容易吸引用户的注意力。同时,用户会好奇这辆车有什么特殊的地方,有什么地方看起来不太一样,黑暗的氛围下,用户的好奇心会身不由己地高涨起来。 黑色叠加层 用黑色的半透明层叠加到图像上,也是制造深色系背景的一种常见手法。在图片的选取和不同的透明度之下,背景图片所呈现出来的效果和氛围,是非常不同的。 透明度较低的情况下,黑色叠加图层会让用户看不清背景中的信息,这使得背景信息在整个设计中参与度较低。透明度较高的情况下,更多的背景元素会透过叠加层呈现出来,和前景元素产生交叉和互动。但是总的来说,黑色叠加层让元素之间产生对比,也使得行为召唤元素更容易发挥作用。 在上面的 Fhoke 这个网站当中,透明叠加层让背景中的场景适当地透露一点出来,但是真正吸引人注意力的,还是在标题和左侧的行为指引上。 简陋的画布 细节较多的背景让人觉得信息丰富,而粗陋的画布则更容易创造出一种虚无的感觉,相应的,后者是会让人更有探索的欲望。粗陋甚至赤裸的深色系画布很好地将神秘感和探索的欲望结合到了一起。 Dubois 这个网站的背景同样非常的简单,没有纹理,只是通过均匀分布的小圆点来进行装饰,如果你仔细观察会发现这些点的分布、色彩其实是有微妙变化的,会引导你去注意位于整个页面底部的文本标题,虽然绝大多数的网站并不会把标题放在这样的位置上。 字体的选取 Punk is Not Dead 这个网站给你的感觉是否很独特?网站的设计非常清晰,识别度极高,网站本身还有音频组件,它的设计从视频到音频一应俱全,整体充满了朋克的风格。 黑暗的背景和明亮的字体色彩有助于实现这样的效果,但是字体的选取才是最关键的。想象一下使用普通的字体,是完全达不到这样的效果。尖锐粗糙的边缘和并不那么友好的可读性,让他在视觉上和朋克的精神保持了一致。 黑白配色 当设计完全失去色彩,仅仅保留黑白两色的情况下,会给人什么样的感觉呢?如果整个设计是以黑白两色为主,搭配少量其他的颜色,体验和氛围又是什么样的呢? 黑白配色和纯黑为主的配色一样,很容易创造出戏剧化的效果,这两种色彩本身所构成的冲突和对比就是原因。 黑白的强烈对比,常常会促使访客在浏览过程中忙于注意不同的细节,面对 Super Rebel 这个网站的时候,这种感觉就非常明显。打开页面之后,注意力会迅速被右上角的图片吸引,随后便忍不住把对比强烈的所有模块都扫视一遍。黑白色搭配大量信息很容易创造出信息过载的效果和体验。 图片的选取...