设计技巧:简洁至上的Web页面设计风格

简洁,不等于简单。这与弹琴是一个道理,你也许有能力弹得很快,但你并不需要在所有地方都弹得这么快。在很多时候,让速度慢下来反而比弹得飞快要来的更加困难。实际上,味道往往最能体现在从容自然、舒缓平淡的韵律当中。接下来进入原文作者人格;我发现自己在很大程度上就是一DummySystem来着。yixieshi

简洁风格的创意组成要素yixieshi

固定宽度的页面布局结构互联网的一些事

固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子,虽然CreativeReview当中的页面布局会根据内容类型的不同而有所区别,但我们能够感受到的浏览体验却是相当连贯的,因为这些页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和About页面:

对于在线杂志或报纸一类需要呈现大量内容的网站来说,要打造简洁的页面设计方案则更加困难。不过英国的卫报(TheGuardian)以及一些同类型的在线报纸站点倒是向我们展示了通过固定宽度的网格布局实现简洁设计方案的可行性:

配色有些许凶残么——译者C7210注。

如果不使用固定宽度的布局方式来组织这些内容,几乎可以说,首页将会乱的一塌糊涂。然而,在网格布局的帮助下,模块之间的留白及层次关系都相当清晰,整个内容结构的健壮性得到了提升。

良好的文字排印互联网的一些事

良好的文字排印方案往往可以对简洁风格的页面设计起到事半功倍的推进作用。

对字体数量的限制是这其中的一个关键因素。如果在同一套设计方案当中运用了过多的字体,它们彼此之间就会产生视觉上的竞争与冲突,这无疑会使页面变得凌乱不堪,用户的阅读连贯性也会受到极大的破坏。

看看那些设计优秀的网站,你会发现它们通常只会用到一到两种字体,并在此基础上通过不同的字号、字色、粗细、间距等属性来体现出内容的层次结构。

在这方面,纽约时报(TheNewYorkTimes)与TheMavenist都是不错的例子。

这两个站点用到的字体都不超过两种,但它们的设计方案都比较充分地利用了字体各方面的属性特质,使得整个页面当中的信息层次非常鲜明。

除了字体以外,行间距(line-height)也是文字排印方案当中的一个关键性因素。使行与行之间保持足够的空间,文字段落就能变得更加易读,当用户阅读到一行文字的末尾时,也可以很轻松的将目光转向下一行开头的位置。我们可以在样式表当中通过line-height属性对行间距进行调整。

此外,对于每一行当中的文字来说,字间距(letter-spacing)也是我们需要考虑到的细节问题。合理的字间距可以为文字带来更好的呼吸感。

简化的配色方案

在印刷领域,设计方案所用到的颜色数量通常会受到各种现实问题的限制,譬如项目的预算只允许设计师使用两种颜色来设计海报。类似这样的情况是很常见的,设计师们时常会因为这些局限而感到相当的闹不住。

而Web设计领域当中却不存在这类问题,如今,多数显示设备所支持的颜色数量都庞大的不亦乐乎。从技术上讲,我们可以随心所欲地打造各种花里胡哨五彩缤纷的设计方案,然而这样的实践方式显然会与简洁至上的设计目标背道而驰。很多经典的案例当中只会用到两种颜色,即某个明度的灰色外加一种有彩色。其中的有彩色会用在最为关键的页面元素上,例如重要的链接或页头当中的交互对象。从某种角度来说这种极简的配色方案具有一石二鸟的作用,一方面,它无疑会对简洁视觉风格的构建起到至关重要的作用,同时,这类方案还能有效的提高页面元素之间的对比度,使那些重要元素得到最大程度的突出。

AisleOne的配色方案称得上是这方面的典范:互联网的一些事

Fuzzco则更为极端的只用到一种颜色:

好么我个人持保留意见——译者C7210注。

另外一些成功的简洁设计方案当中,虽然用到的颜色数量会超过两种,但整体的配色风格依然趋向于保守,而且用到的颜色多数是比较中性的。我们来看看Solo:

正如文字排印方式与信息传达效果之间的关联作用,配色同样不仅是选取一些好看的颜色那么简单,优秀的配色方案可以通过正确的视觉基调将网站当中的内容更加有效地呈现出来。以Notologist为例,明亮、互补的颜色搭配使得内容信息及它们之间的关联得到了非常自然的体现,页面整体风格非常简洁直白,同时又不失活力。

但我不喜欢这个页面中的黑色导航——译者C7210注。

一致的图片样式

如果同一个网站当中的图片(照片、插画、图表等)样式差别很大,你会觉得焦虑么反正我会。

对于内容当中有可能包含很多图片的网站或页面来说,要落实简洁至上的设计思路,其中最关键的一点就是要通过和谐统一的样式风格将这些视觉元素呈现出来。

在Protein中,艺术家们的照片并不是统一拍摄的,但从视觉效果上看,无论构图、景深还是光影等方面,这些照片都具有相似的表现。图片个体之间在视觉上的一致性,可以使页面体现出良好的整体感。

不过在很多情况下,我们确实难以对页面里的图片表现形式进行有效的管理。一方面,用户上传的图片是难以控制的,另外,对于新闻网站或博客来说,也不可能因为表现形式的问题而舍弃具有重要内容价值的图片。另外,客户也未必有预算去支持图表或插图的重新绘制,设计师必须利用现有资源办事儿。在这类情况当中,可以试着通过边框或类似的元素对图片进行修饰,这样做至少可以为图片增添一种统一的视觉属性。yixieshi

设计思路与技巧互联网的一些事

先复杂,后简化

在页面设计的过程中,我们必然要将各种界面元素一点点的放置在页面里。为了打造简洁的设计方案,很多设计师通常会在这种时候有所顾忌,下不去手。这会导致整个流程当中缺乏必要的探索性,而且最终的设计方案往往会让人感到苍白与空洞,而非简洁。大家多多少少应该都有所体会,如果运气好的话,探索过程中的那些happyaccident往往能带来预想不到的惊艳效果。

所以,我们不妨试试先复杂,后简化的思路。在设计流程初期,不要对界面元素的数量进行刻意的限制,同时尽量多尝试一些不同的布局方案,直到需求所需的内容及功能元素全部就位,然后开始简化工作。

问一问自己,“有哪些元素是真正需要放在这个地方的”,试着移除一些辅助性的元素,观察局部或整体页面结构是否因此而受到破坏,如果没有,那么扔掉蛮好。

各位大概有听到过“80%的产出源自20%的关键性投入”这个说法(80/20法则),我们同样可以将这个理论运用到设计工作当中。很多情况下,页面整体设计方案给用户带来的体验感知是以其中一小部分关键元素为根基的。对于这类元素,我们要有足够的辨识能力,并围绕它们进行主要的设计工作,同时对其他元素进行合理的简化。

这当中还有一个比较实用的小方法。我们可以找来一些与项目无关的“局外人”,对当前的设计方案进行评估。在这个过程中,向他们解释每个界面元素本身及其视觉表现形式的作用和意义。如果你发现自己对于某些元素无法给出除了“看上去很酷”、“其他网站也是这样做的”以外更具说服力的解释,那么就考虑对它们进行简化或是移除吧。yixieshi

在经历了这样一个过程之后,最终留下的页面元素就是能够帮你构筑最简设计方案的素材。

微调,再微调一些事

道上的朋友们觉得我总是喜欢没完没了的折腾设计方案,我真心觉得这种评价是对我的赞扬。互联网的一些事

在我看来,设计流程从来没有真正结束的时候,我们总是可以将方案朝着正确的方向再推进一点。说正经的,在这方面,问问那些和我合作过的设计师或实习生,他们会告诉你,跟着我干是多么苦逼的一件事儿。我估计也是,当我让他们在一些阴影的细节上修改了12次以上的时候,基本没人会觉得有意思了。

所以,微调吧,然后再微调些些。很多时候,在一个细节当中的调整还会引发另外一处的修改需求,有时甚至会对整个设计方案的方向造成影响。不怕,耐心些,简洁至上的设计目标需要我们付出的绝不会像最终成品看上去的那么简单轻松。一些事

大局观

我前半辈子主要是一名印刷设计师。说是印刷,其实自己做了很多打印工作,因为每天在工作当中都会反反复复地将各种稿件打印出来并钉到墙上。久而久之,几面墙上都钉满了各种视觉方案的打印稿。一些事

相比之下,在Photoshop或Illustrator中通过切换图层来对比视觉稿的方式就会让我们的视野受到很大的局限。所以我建议各位好好利用一下纸张及墙面,通过这种方式来发现不同页面的设计方案在一致性等方面的缺陷,去除有可能影响到简洁方案的不和谐因素。

THE END
1.web网站设计首页(网站首页设计方案)杂七乱八web网站设计首页(网站首页设计方案) Source: Rotate° Source: McKennaJones.co.uk Source: Good Cop Bad Cop Source: Ballet BC Source: Ava Sessions Source: Cropmark Source: Mike Guss Source: Inside Discovery Source: GSArora Source: Seedlip Source: The Outposthttps://www.yuanmacun.com/post/129221.html
2.高性能Web架构设计方案大型web服务性能及连续性设计方案以上介绍了高性能Web架构设计方案,希望对大家对高性能Web架构有所了解。高性能Web架构涉及到的知识还有很多,小编整理了架构学习相关的技术资料,希望对大家有所帮助,以下为部分资料截图: 需要这些技术资料的同学,请关注我们的微信公众号回复“架构”获取资料下载地址。https://blog.csdn.net/chendaike/article/details/89226567
3.三种主流的WEB服务设计方案是设计风格,不是标准。 已经普遍取代了SOAP和XML-RPC, 常用的HTTP动词有五个,对应sql中命令。也就是说我们定义接口url中一般不会出现动词,都是使用名词,而动词使用HTTP请求方式来表示。 一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式。” https://www.jianshu.com/p/0867479d81ee
4.高性能Web系统设计方案(初稿目录),支持者进[秦时明月]高性能Web系统设计方案(初稿目录),支持者进 第一部分 客户端篇 1.压缩js、css,将js的引入放在之前; 2.合并一个页面下的js/css文件,压缩传输.(SquishIt)相关博文 3.ajax技术应用.ajax可以做到精准定量的请求,可以减少非必须资源的请求和重复请求. 4.页面https://www.cnblogs.com/humble/p/3187611.html
5.基于WEB的DFX设计方案评价软件的设计与实现基于WEB的DFX设计方案评价软件的设计与实现,并行工程,DFX,模糊评价,知识库,软件,.NET,一般公司在产品开发的过程中,往往会提出几种设计方案,然后再进行设计方案的选择,从这些方案中选出最优者。同时,许多公司已经意识https://wap.cnki.net/touch/web/Dissertation/Article/-2008156131.html
6.校园网络设计方案4、可以为校园内各个系之间提供邮件服务、文件服务、WEB服务等多种Internet服务。 二、设计分析 根据校园网络需求和学校的实际情况,校园网络方案设计应注重设备选型的性能价格比,采用成熟可靠的技术,为学校设计成一个技术先进、灵活可用、性能优秀、可升级扩展的校园网络。 https://www.ruiwen.com/shejifangan/7412111.html
7.WebPascal(Delphi网页设计解决方案)WebPascal(Delphi网页设计解纯脚本制作设计方案方法,便于维护保养和布署,类似PHP;您不用IDE来制图软件,还可以在手机上开展维护保养工作中。 支持HTTPS (SSL/TLS) SSL(安全性套接字层)是一种规范安全协议书,用以在线上通讯中创建Web服务端和电脑浏览器中间的数据加密连接。 协同设计 https://xiazai.zol.com.cn/detail/53/529772.shtml
8.H5页面如何适配iPhoneX?腾讯设计师给出了通用解决方案!另外提一点,经过 2 个版本的 Webview 测试,发现 WKWebview 在渲染页面的时候,底部按钮在位置表现上不一致,可能是一个还未解决的 Bug: 四. 使用 Web 方案: 根据以上的设计方案,可以这样处理: 修改页面 Viewport—fit 属性。 在H5 页面链接一个 iphonex.CSS 来给 iPhone X 访问的页面增加对应的适配层。 https://www.uisdc.com/h5-ui-iphonex-adaptation
9.基于Web架构设计的节能解决方案国际工业自动化网基于Web架构设计的节能解决方案 2009年5月21日,研华邀请楼宇自控与节能行业伙伴一起,齐聚北京研华大楼,共同探讨「绿色建筑与节能」话题,并分享研华的应用经验,北京研华大楼的节能改造成果也同场展示,在研讨会上记者有幸采访到了研华自动化产品业务经理宋洪法,与他一起聊聊绿色建筑节能解决方案。https://www.iianews.com/ca/_01-ABC00000000000133957.shtml
10.《Web前端开发技术》课程教学设计方案20231116.docxWeb前端开发技术课程教学设计方案模块名称涉及知识点任务设计各任务所用资源名称第一模块:HTML基础及文本使用Web网站相关的基本概念;常用的Web前端开发工具浏览器工具。HTML文档的基本结构。标记类型标记语法。网页添加注释。元信息methttps://www.renrendoc.com/paper/298313239.html
11.电商平台java架构设计方案基于javaweb的电商设计与实现电商平台java架构设计方案 基于javaweb的电商设计与实现,基于javaweb的电商书城平台系统设计和实现(java+springboot+mysql+spring+jsp)运行环境Java≥8、MySQL≥5.7开发工具eclipse/idea/myeclipse/sts等均可配置运行适用课程设计,大作业,毕业设计,项目练习,学习演示等https://blog.51cto.com/u_87634/8349794
12.网站设计方案的翻译是:Websitedesign中文翻译英文意思,翻译英语aNC machines used a series of numbers punched on paper tape or punched cards to control their motion 北卡罗来纳机器使用了在纸带或穿孔卡猛击的一系列的数字控制他们的行动[translate] a网站设计方案 Website design proposal[translate]http://eyu.zaixian-fanyi.com/fan_yi_8607380
13.学校网络解决方案范文(通用8篇)4、可以为校园内各个系之间提供邮件服务、文件服务、WEB服务等多种Internet服务。 二、设计分析 根据校园网络需求和学校的实际情况,校园网络方案设计应注重设备选型的性能价格比,采用成熟可靠的技术,为学校设计成一个技术先进、灵活可用、性能优秀、可升级扩展的校园网络。 https://www.oh100.com/a/202210/5477577.html
14.《Web前端开发技术》课程教学设计方案.docxWeb前端开发技术》课程教学设计方案模块名称涉及知识点任务设计各任务所用资源名称第一模块: HTML 基础及文 本使用 Web 网站相关的基本概念 ; 常用的 Web 前端开发工具、浏览器工具。 HTML 文档的基本结构。标记类型、标记语法。网页添加注释。元信息 meta 标记的作用。文本格式化标记类型与各种样式。使用段落与排版https://max.book118.com/html/2021/0704/8076061032003116.shtm
15.医疗信息平台系统建设方案方案设计中我们将遵循以下总体原则:以医院业务需求为导向,超融合架构最终还是要为医疗业务服务的,因此在架构设计上一定要以医疗业务的需 求为导向,充分考虑非功能需求,例如系统的重要程度、安全要求、业务连续性等。 遵循医疗行业标准医院大部分业务系统都是面向社会和公众的 https://www.360doc.cn/document/81011555_1114122238.html
16.方案设计阶段英文方案设计阶段英文【1】 目录:Cover封面 Content目录 Design Explanation设计说明 Master Plan总平面 Space Sequence Analysis景观空间分析 Function Analysis功能分析 Landscape Theme Analysis景观景点主题分析图 Traffic Analysis交通分析 Vertical Plan竖向平面布置图 https://www.wenshubang.com/fangan/261447.html
17.Web网站设计11篇(全文)2 web应用前端开发框架设计 2.1浏览器兼容性方案设计 由于浏览器针对网页前端代码解析具有不一致性, 即使同一个网页在不同浏览器中的显示效果也存在明显的差异, 因此浏览器兼容性一直是前端开发过程中的重点和难点。如何使网页在不同浏览器中能够适应相应的解析标准, 从而实现不同浏览器都得到良好的显示效果, 是网站https://www.99xueshu.com/w/ikeyr3zpjgk1.html
18.projectwebarchitecture天行健Lindows涵盖了Web站点性能优化的几乎所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、Web服务器缓存、反向代理缓存、脚本解释速度、页面组件分离、浏览器本地缓存、浏览器并发请求、文件的分发、数据库I/O优化、数据库访问、数据库分布式设计、负载均衡、分布式文件https://www.iteye.com/blog/474331
19.软件工程专业培养方案(2022)3.4在软件工程设计和开发产品过程中,能够考虑法律、健康、安全、文化、社会以及环境等现实约束条件,综合评价并分析设计方案的可行性。 毕业要求4(研究):能够基于科学原理并采用科学方法对软件工程领域复杂工程问题进行研究,包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论。 https://www.csust.edu.cn/jtxy/info/1302/20908.htm
20.监控系统方案四篇三、设计方案 为了尽快建立一套集防、控、管于一体的现代化气井智能监控系统,加强相关部门管理和决策的科学性,提高工作效率,保证各个气井安全运营,为管理人员对临时突发事件提供科学的决策依据,特针对此项目需求,作出一套完整的网络视频监控管理方案。 本套方案是基于凯威的网络视频综合管理平台,利用无线网桥而设计的一https://www.unjs.com/fanwenku/325938.html
21.资深设计师带你了解WebUI设计原则,全程干货5、Web UI 设计方案——可控性原则 用户已经不再是十年前的用户了,现在的用户追求的将会是更加极致的体验,甚至会有私人定制式的服务,比如,你们可以想想,在什么时候我们在使用网页的时候,会有一种可控感?其实就是在隐私方面了。朋友圈设置成三天可见就是一个用户操作可控原则的一个直观例子。 https://js.design/special/article/web-ui-design-principles.html