网站设计:如何回归内容 “简洁大气”设计指南

  如何可以使产品设计“简洁大气”?在你没有灵感的时候,不妨看看这篇文章中的建议。

  神马是“简洁大气”?

  现在被人们津津乐道的扁平化设计无疑成为了这四个字的代言,也让之前似乎离开了人们视野的平面设计带来了新思考,我们发现很多设计方法依旧非常经典。

  无论是与客户的沟通还是和产品经理的 PK 中,在第 N+1 次修改依旧没有灵感的时候,不妨借鉴一下下面的小建议来救场。

  调整图版率改变印象

  图片的加入是最能立刻改变和更换整体印象的法宝。

  图版率是杂志版式中经常提到的概念:即页面中图片所占面积的比率。图版率高的杂志页面会给人带来年轻与活跃的印象,相反地,全是文字,图版率为 0,这样的页面就显得沉稳许多。

  放大图片,增加展示空间

  虽然在产品上网易微博一直不温不火,但在设计上采用大图片的改版让整体拥有了简洁的潮流感,并且每次刷新变化的封面图片让每天的登录过程也变的有趣起来。


   改变图片比例

  即使全部是图片也可以改变图版率。商品展示中经常会有这种图片罗列的形式,普通的九宫格设计虽然整齐,但是没有变化和视觉重点,将几个图片位合并成为一个进行展示可以产生更强的专题性效果。


  色块进行重复构成排版

  当图片资源不充足,比如消息类信息和图片并列时,可以采用和图片相同大小的色块保持界面的统一性与简洁性。


  使用图标代替文字

  使用意图明确的图标代替文字可以帮助导航等操作区与文字阅读区分开。


   创造节奏感

  你知道吗?观看者和一张简单的海报设计也会产生交互过程。

  当你在 20 米开外的时候会被它上面的人物与色彩吸引,走近至 5 米的时候会看到它的标语,而走到跟前会发现新的小字信息。海报通过观看距离的变化制造出阅读的层次感,引导你不断深入。


  同样的,在界面中除了利用明确的信息分组引导视觉,还可以考虑在交互中也加入节奏,笔者不认为在扁平化的设计时代我们就不需要打造空间关系,通过手势的变化制造出界面不同的景深效果,可以让界面充满呼吸感。

  比如 AppFlow 中下拉刷新时,背景图片会由远至近,就在不觉间扩展了视觉空间。


  使用鲜明的色彩营造气场

  穿衣服我们讲究“气场”,而设计中使用的色彩也应该明确,避免使用含混的色彩,这样界面之间的元素才是有对比的。


  戒掉排满的惯性

  格式塔心理学中提到一个删除原理,就是从构图形象中排除不重要的部分,只保留那些绝对必要的组成部分,从而达到视觉的简化。 不要排满也就是我们时常说的留白,这里的设计需要和产品一起做减法。

  在实际项目中,笔者经常遇到这样的对话:

  “这里为什么要放这个功能?好像用户用不上诶……”

  “这里不放这个功能看起来比较空,而且万一用户用到呢?”

  “……”

  人们以往的消费观念是面对同样的价格,最终大家会选择看起来功能齐全的物品,在信息竞争和功能为上的时代,惯性会让你想要加入足够多的功能或信息去满足用户,这种情况下,堆满信息的页面如果不进行删减化处理,形成一定层次的分组和条理化处理,也将会变成让人手足无措的电视遥控器。

  其实考虑界面空不空的问题应该交给设计师解决,通过一定程度的留白就可以达到不错的效果,我们只需要确认到底需不需要这个功能,有多需要,符不符合用户的使用场景?

  隐藏与合并

  当面对无法去掉的功能时,我们可以采用“主界面优先模式”,隐藏部分功能。

  比如在阅读中,为了更加沉浸式的阅读体验,经常利用手势将阅读流之外的功能隐藏起来,比如随享Pro 向左滑进行评论和转发,豆瓣阅读的全屏阅读。


  主界面优先还体现在减少频繁地切换界面,比如常见的查看大图功能,在以前我们常用的方式是滑到新的页面去查看图片详情,但真的需要那么麻烦吗?

  在 AppFlow 和网易应用中心应用主页中,通过手势向下滑动可以让图片当前页放大,预览 App 界面效果,这样的体验就很简洁。


  除了隐藏功能,我们还可以合并功能,减少 UI 控件的个数,进而节省下空间,比如下面对音乐播放进度和播放控件的整合。


  设计是不断创造新可能的过程,希望上面总结的这些小经验可以让设计更好的回归内容,利用最轻量、简单的设计来传递核心信息,也让设计师们早日告别苦逼加班的日子。

时间: 2024-10-31 01:51:21

网站设计:如何回归内容 “简洁大气”设计指南的相关文章

不同案例看网站用户体验 “简洁大气”设计指南

如何可以使产品设计"简洁大气"?在你没有灵感的时候,不妨看看这篇文章中的建议. 神马是"简洁大气"? 现在被人们津津乐道的扁平化设计无疑成为了这四个字的代言,也让之前似乎离开了人们视野的平面设计带来了新思考,我们发现很多设计方法依旧非常经典. 无论是与客户的沟通还是和产品经理的 PK 中,在第 N+1 次修改依旧没有灵感的时候,不妨借鉴一下下面的小建议来救场. 调整图版率改变印象 图片的加入是最能立刻改变和更换整体印象的法宝. 图版率是杂志版式中经常提到的概念:即页

网站不是炫技场,设计要为内容服务

以前经常吃公司旁边的食堂,人多,排队.夏天的时候,我们总要找一个靠窗口通风好的地方坐,没有空调只有风扇,风扇很多,开关都集中在一个地方,应该是方便操作人员统一管理,有时自己头上的风扇没开,当我要去开这个风扇时,麻烦来了,很多排的风扇开关,到底哪个是我头上的呢? 生活中有很多总让我们感觉莫名其妙,或者停下来需要思考的情况,有时不得不求助,到了互联网上,可能很多情况发生了也没什么求助的方法,只能自己猜,不猜了就只好关掉. 网页上每项内容都有可能迫使我们停下来,进行不必要的思考.比如内容信息看不懂,操

网站设计欣赏:Change.gov简洁大气充满成熟之美

文章描述:Change.gov-值得学习的美丽细节. 前段时间,突然想去看看奥巴马的网站是怎么设计的,于是Google到了Change.gov. 刹那间眼前一亮---简洁大气,充满了成熟之美. 一直想写篇赏析来学习下Magicwan的设计,一直拖到今天(懒惰的人啊) 一.Background 深蓝色背景,给人踏实,稳重,具有可靠信赖感. 二.Head 1.在logo和辅助图形之间,没有使用100%的直线而是一条柔和的渐变线.即没有破坏head的统一感,又起到了区分logo和图形的作用. 2.背景

电子商务网站设计分析三:登陆注册页设计

电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全因为流程繁琐,网站的表现形式不够友好.人性化也是原因之一,甚至还有网站令用户很直接的感受到一种强迫性. 市场环境让几乎所

简洁网页设计你需知的6点技巧

  洁净和一尘不染之间是不能划等号的.去掉了多余内容的设计看起来外形美观,一目了然,让人心旷神怡,尤其是对网页设计领域更甚.设计师在网站设计过程中,时常会遇到过度设计的例子.保持审美需求和实际需求之间的平衡,对整洁,干净和条理清晰的网站来说很重要.在激烈的行业竞争中,网页设计师想要获得成功,先决条件之一就是要掌握简洁的网站设计基础.在网站设计中,并没有保密规定,但相关的从业人员仍需坚持一些基本原则:用外观专业,整洁的网站设计来打动用户. 但是,简洁的网页设计并不就等同于我们在网页设计中所强调的极

未来互联网内容为王设计正变得不那么重要

网页制作Webjx文章简介:互联网的未来还需要网页设计师吗? 这篇文章引起了设计界的激烈辩论. 请阅读文章反驳这一点,叫 我想成为一个网站设计者当我长大了 .- 维塔利弗里德曼,主编,杂志主编看来,两个新的职位或在什么商店因特网总是在我们浏览网站的时候弹出. 有的提出,互联网将提供更多的相同,但不同的 某种方式(它通常是多么暧昧),而其他提出这样不会发生剧烈的变化,很难相信他们可以. 而事实是,我们没有人真正知道会发生什么事.毕竟,这只是稍多于15年前,现在克利福德斯托尔说,臭名昭著的"互联网?

网站用户体验 为增加顾客体验设计页面

1. 什么是体验? 现在搞产品或者设计的人,张嘴闭嘴都在谈用户体验.而那句"哥玩的不是游戏,玩的是寂寞"其实更准确的说玩的就是体验.那何为用户体验?下面我们就来追根溯源来看看体验是什么发展跟来的. 1.1. 经济供给物的四个阶段 从经济角度来讲,我们的供给物分:产品.商品.服务.体验,四个阶段.而每个一阶段都是递进关系,是根据我们社会的物质丰富,技术发展和文化的进步一起同步升级. 产品:是从自然界中开发出来的可互换的材料. 商品:是公司标准化销售的有形产品. 服务:是为特定顾客所演示的

网站设计经验分享:浅谈设计中的逻辑推论

逻辑(理则学),源自古典希腊语λόγος (logos),最初的意思是"词语"或"言语",还引申出意思"思维"或"推理".逻辑经常被认为对论证评价准则的研究,尽管逻辑的精确定义在哲学家之间尚有争议的事情.这个主题还是有所依据的,逻辑学家的任务是相同的:提出大量的有效和谬误的推论,从而允许人们区别出好论证和坏论证. 逻辑,也就是思维的规律.小时候有人问我一群羊加一群羊等于多少群羊,我二话不说是两群羊,他说错了,是一大群羊.1+1

移动网站新趋势:描述响应式设计的优缺点

[搜狐IT消息]7月17日消息,科技博客Business Insider旗下研究机构BI Intelligence发布报告,描述了响应式设计的优缺点. 作为一种能够缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式.在谷歌公司于2012年中期指出,响应式设计是优化移动网站的最佳方式之后,这种设计做法的地位得到了进一步巩固. 随着iPhone.iPad和Android手机的普及,网站主办方发现,网站在移动端应当带来与桌面端类似