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

上海市徐汇区复兴中路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 这个网站的时候,这种感觉就非常明显。打开页面之后,注意力会迅速被右上角的图片吸引,随后便忍不住把对比强烈的所有模块都扫视一遍。黑白色搭配大量信息很容易创造出信息过载的效果和体验。 图片的选取...

如何巧用气泡、斑点和流体元素,让网页不再单调死板?

随着设计工具和设计素材越来越丰富,设计师开始更加灵活地在网页中使用气泡、斑点和流体这样的元素,那么要怎么在网页设计的时候用好这些元素呢?今天结合9个网页实例,来分享几个实用的技巧~ 1. 用气泡元素营造视觉焦点 在简约清爽的背景之下,使用色彩鲜艳,形体自然随性的气泡元素来创造视觉焦点,气泡和需要凸显的图片素材结合到一起,有目的地将用户的视线吸引到关键的元素上,最终起到提升转化率的目的。 2. 用简约线性的气泡动画来驱动交互 使用几何特征的简约气泡元素来构造动画,是一种成本比较低的做法,动画会随着用户滚动页面,而有趋向地发生转变,从而促使用户不断地滚动,向下浏览查看更多内容,这种设计同样能够提升网页的参与度。 3. 用不规则的涂鸦斑点强化品牌 斑斓的背景和强对比的涂鸦斑点,同样是一种引导视觉的策略,但是它更重要地是通过这种风格来营造狂野粗粝的品牌气质,帮助用户更快更直接地 Get 到品牌的独特氛围和神髓。 4. 用液态色块拼贴来传达时尚感 充满流动感的色块和斑点元素类似,同样充满了不受控制的自然气场,充满对比度的多彩配色则赋予了这些液态感十足的色彩拼贴以时尚的气质,从而营造出独树一帜的视觉体验。 5. 用渐变色气泡来营造立体感 微妙的渐变色常常能够赋予元素以一定的3D立体感,多变的气泡元素如果拥有渐变色会仿佛拥有景深和层次一般,让页面更加立体。当然,如果一开始使用动画软件来建模,渲染生成动画,那么就更加到位了。 6. 使用扁平化气泡元素渲染现代感 扁平化设计依然是目前的主流,在许多纯粹扁平化的页面中,气泡类的元素能够起到很好的点缀作用,让背景不再单调,几何感十足的气泡边缘和清爽的色彩,能够很好的赋予页面足够的现代感,干净而具有当下的时代感。 7. 作为图片载体给人独特的印象 气泡类元素本身的形体都是非常规的几何元素,因此它们相比于常见的圆形、矩形、三角形,出现的机率更低,当它作为图片的载体的时候,这种独特的视觉体验更容易给用户留下印象,四两拨千斤。 8. 用气泡动画来创造趣味性 气泡动画可以拥有冷淡的科技感,也可以软萌可爱充满趣味感,这取决于动画的设计者怎么做。在页面中使用有趣的气泡动画能够让页面更加令人亲近,让用户在加载和转场的时候会心一笑,记住你的设计。 9. 用气泡动画来构建品牌LOGO 这同样是一种巧妙地吸引用户同时宣传品牌的手法,当然,前提是你的品牌 LOGO 适合使用这样的表现方式。气泡动画富有活力,有生命力,这一点最终能够加持在品牌上,同时能够给用户留下更加深刻的记忆。 结语 有机感是近两年来比较热的一个设计方向,但是它的呈现方式并没有那么具体,而诸如斑点和气泡这样的元素是呈现有机感最常用的方式,加上新的设计工具的普及,设计师开始使用这些元素来创造富有有机感的设计。...

用户转化率低?看看这21个高转化率的定价页面的设计秘诀

编者按:定价页面中,具体的设计细节其实对于用户购买和销售的转化有着直接的影响,怎样设计才会更有有效?今天这篇来自Proof 博客的文章,用21个实际案例,来同你分享这方面的经验 ~ 在如今很多互联服务当中,供应商的团队将大量的经历花费在开发和推广上,实际上,作为一项 SaaS 服务(Saas——Software as a Service软件即服务),定价页面常常会被低估。这是一个对产品进行深度实验、进一步优化的重要机会,如果方法得当,你甚至可以乐在其中。 从流程上来说,定价页面也是潜在用户在注册(或者购买)前看到的最后一个页面,所以这是给用户留下好印象的最佳时机。 所以,这个时候,我们就需要面对下面的三个问题了: 如何创建一个漂亮的,具有高转换率定价页面呢? 哪些元素是必须拥有的,哪些应该忽略? 为了最大限度地发挥你的定价策略,你能做些什么? 让我们以一些顶级 SaaS 服务供应商的定价页面中的示例作为灵感来源,深入研究并找出这些问题的答案。 1. 使用简洁的设计 在 Zendesk 的定价页面中,体现了少即是多的设计理念。大家更喜欢有留白、舒缓的配色方案和一个简单的标志。没有其他分散用户注意力的元素,他们可以直接进行操作——注册试用版或立即购买软件。 zendesk-pricing-page 如果用户需要知道关于定价的更多详细信息,只需单击“查看定价”按钮,就会转到包含有关产品定价方式的更深入信息的页面——这是一个聪明的设计。 2. 保持页头文案简洁 页头的作用是让用户进行流畅转换。Appcue 在一个简洁明了的页头文案中就能表达出它们所需要的一切。 appcues-pricing-page 在页面左侧,他们用一个简单的下拉菜单来向你展示每月的活跃用户数量,并且可以通过一个按钮在月付和年付之间切换。 他们的快速浏览功能也非常实用,同时也使用了与他们的品牌气质相一致的文案。 3. 为目标用户提供订制选项 有各种各样的用户使用你的定价登录页面,他们每个人都想利用你产品的不同方面。为了让他们更加方便地使用,为什么不对定价选项进行详细划分呢?这正是 Hubspot 的做法。 ...

这个看天气上线的网站,把节约做到了极致

互联网是一个需求不断增多的体系:需要更多的参与、更多广告,更多内容、更多代码、更多服务器和更多设备。最近几年,网站的规模也开始以指数级增长,统计表明,39%的美国年轻人表示,他们每天几乎会不停地上网。现如今,每个美国家庭都拥有超过10个可以接入互联网的设备,每个设备都有不低的能源消耗。根据预测,到2025年,互联网将会占据全球能源消耗的20%。 上个月,Low-Tech Magazine 悄然改版,重新上线的网站发生了巨大的改变。作为和能源、技术都紧密关联的新闻业的一员,Low-Tech Magazine 在节能这件事上,几乎做到了极致。 如今互联网上的主流网站采用了的大量动效,丰富的多媒体「重内容」,后台的数据库中的所有内容都是实时可检索的,服务器常常托管在专业的数据中心。可是 Low-Tech Magazine 的网站则不同,网站采用的是静态的文档,内容存储在自托管的服务器上。 这一服务器就在创始人 Kris De Decker 家的阳台上,供电则是一个小型光伏阵列,网站可以在阳光充足的时候保持网站在线。如果超过2天都是阴天的话,Low-Tech 的网站可能就得离线了。网站上会显示当前服务器的剩余电量和当前天气。 没有广告弹出框,图片素材也同样被压缩到极致。网站LOGO 并没有经过设计,直接使用的是 unicode 的文本字符,显示的字体直接是你的浏览器的默认字体,这意味着你的电脑不需要像访问 New Yorker 的网站那样,发出请求查询服务器,再下载一个专用的 web字体。简而言之,它在改版之后,整个网站的平均页面大小比之前小了5倍。 Low-Tech Magazine 的做法并不是简单的将网站风格切换为更加复古更加90年代的粗野主义风格,它从头到尾都在和如今的设计观和价值观背道而驰,它更像是在不停提醒我们,如今我们的互联网有多重——每个人,从用户到设计师、开发者、编辑都为如今的互联网贡献了无与伦比的内容和价值。 「在过去,我们只有在坐到巨大的台式电脑面前,拨号连上网络,打开浏览器之后,才算是上线了,」De Decker 说道:「但是现在这种限制已经消失了,从睁开眼的那一刻开始,直到深夜沉沉睡去,我们一直在线。」 你有没有想过,当你躺在床上用 Instagram 刷出一张图片的时候,要消耗多少能量?当你看到 Low-Tech 的新版网站的时候,或许会在看到电池图标的时候,想到这个问题。 新版的 Low-Tech Magazine 是由艺术家 Roel...

灵感干货!20个视觉、体验和内容俱佳的优秀网页设计

设计的灵感来源多种多样,不仅仅要了解别人的视觉设计,而且需要仔细体验实际的效果。许多优秀的网页设计作品,不仅仅有着突出的排版设计,而且在动效、交互、体验上有着颇为值得学习的地方。如果你愿意仔细揣摩,还能在许多网站当中学到细节的处理技巧和内容组合的搭配策略。想比起零散地设计作品,这些来自著名设计机构的网站,在不同需求下诞生的网站产品,更有价值。 接下来,就在下面的20个网站中,尽情发掘你感兴趣的设计和内容吧! Epicurrence 这个网站是一个为创意工作者所举办的 Epicurrence 2018 峰会,会议地点在著名的 Yosemite。整个网站在设计的时候,都采用了令人惊叹的插画和微妙的视差,让人会忍不住与之互动。 Angelo Sanvito Angelo Sanvito 是一名来自意大利米兰的插画师,同样精通 UI 和 UX设计,他充分地利用了自己的诸多技能,在这个简单的网站上绘制了一系列著名艺术家的肖像,倒是颇为有趣。 Atomize Design System 这个简约的网站就是给时下正在流行的 Atomize Design System 所搭建的,它阐述了这种设计系统的运作机制和最佳实践。 Lisa & Ryan 想在海量的设计机构当中找到一个适合你的品牌的,并不容易,不过 Lisa & Ryan 倒是非常称职,是个不错的选择。想知道为什么,不妨打开他们的网站看看。 Bellvoye 如果你正在寻找朗姆酒,那么苏格兰高地可能是你的第一站。可是如果你正在找一些口味独特的酒,不妨向着法国南部前进。当然,更便捷的方法也有,那就是打开 Bellvoye 这个精致的网站。 Swiss Typefaces ...