收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2352|回复: 1

[教程] 网页设计进阶之感官的延伸

[复制链接]
发表于 2013-5-28 11:32:38 | 显示全部楼层 |阅读模式
本帖最后由 weilaixu 于 2013-5-28 13:33 编辑

网页设计进阶之感官的延伸
文/weilaixu Aug , 6 , 2013  原文地址:http://weilaixu.cn/read.php/463.htm

我在bi的帖子http://bbs.blueidea.com/home.php ... read&from=space

---------------------------- 正文 -----------------------------

几日前在群里,我问一个朋友说你不要百度不要翻书现在就给我说几个平面构成方式出来。之后,几个人陆续冒出来大呼忘记了。

在我看来,平面构成已经是接近科学的东西了。既然是科学的,那么就是科学的。而学习、认知的过程,无非是你开始接触,到开始学习,到理解、加深理解,再到实际运用。

而更重要的一个层面,是通过实践检验、验证你的所学。

“为什么那行文字要居中?因为要讲究均衡、对称。”

早些时候和同事一起工作,老林和老缪都有过类似的话语,当我用小键盘移动某个元素,在思考究竟什么位置合适的时候?他们都曾先后跟我说:

“把计算器打开,乘以0.618,就放那个位置!”

在元素过多或过少的时候,通常如果想要找到一个合适的位置,要考虑视觉焦点、大小、明暗(灰度对比)、颜色冲击等,要把它们综合起来考虑。所以只移动某一个元素,得到的效果往往不尽如人意。而当你面对老缪这样的堪比乔布斯的变态产品经理的时候,你需要提升的并不是设计能力,而是针对你的设计专业提升你的语言能力来证明和说服!

如果说0.618是科学的,但某些时候也只能说是生搬硬套的科学。

时代、社会、人,都在进步。你的显示器越来越大,连区区手机的分辨率都超过1280了。这个时候,对于web端的设计和移动端的设计,这两个方向的区分和融合点已经非常明确。如果你是一个喜爱钻研持续学习进步的人,那么我觉得上边说的“针对你的设计专业提升你的语言能力”这点来说,尤为重要。

所谓的宽屏、16:9,其实这些更适合人类用眼睛去阅读。因为你的眼睛水平可以看到差不多180度,但垂直却做不到!而另一个方面,垂直类的阅读更让人感觉到舒适,当一条横线上只讲述一件事情的时候,获得的阅读效果往往比多列要更好。

内容区域的设计,不是我要说的,我要说的是屏幕之外的东西,也算是略略补一下上一篇没写的东西。

一、延伸、平铺、补色、渐隐和截断

“把你的互联网用户想象成一个脾气非常大,智商非常低,而且非常没有耐心,又非常非常小气的人好了。”这是一个程序媛在fnms的舞台上说的话。这段话,同样适用于你的客户。

我一直把自己做企业站的那段时间视作是宝贵的经历。从准确把握客户心理、想法到分析出客户想要什么样的东西,以及衍生出来的各种方法和手段。对于一个网站来说,你的模块和元素,究竟应该有多大?

栅格系统好像可以帮你解决一部分。但是更多的呢?

有很多设计师其实和上边说的互联网用户一样,比如东升(某同事)!

“设计的时候要考虑屏幕之外”,这句话对于东升来说。首先没有从意识形态上理解出来,其次他那个公司唯一的一台大屁股1024*768的显示器害了他。而其他的设计师,都是22寸的显示器×2。

无论是打断别人说话,还是切了别人的歌,或者是不告而取别人正在读的书,都如同被截断的图片一样,令人难过。

对于占据一行的一个模块、一张图片来说,是到哪里截止?截止的时候能不能干净利落地让用户感觉不到突兀?如果是平铺,那么应该如何处理?怎样的平铺更利于图片的循环?

对于现在的网速来说,很多网站,比如支付宝,比如天猫的很多商店,都采用1680宽的大图片,甚至是1920或更宽的图片。先不说是不是有多种规格的图片通过判断分辨率来读取的这种情况,而是从根本上来说,这就如同使用text-indent:-999em的方法一样,足够大的图片,就不会出现需要通过背景色、背景图来填补的情况。

不要求有多出彩的设计,自然即可!

二、模块化的设计

一个box,标题可以用hx,列表用ul,描述类的图片和文字用dl,如果有多个这样的模块,那么可以通过多个类来实现模块化,进而精简代码并提高复用性。

而在设计中,常见的多个box,如果能以不同的颜色来表达的话,那么至少表示你是有想法的。从个人风格引述,大部分情况下,你对字体和颜色的选择,如果不是特别要求的话,那么一般都是往简洁、干净的方向发展。无论你的设计有多繁复,元素之间的结合肯定都是以干净利落为主。如果你能够考虑到后续工作,那么元素的大小、颜色基本上会被限制在一个范围内。

上游产业始终要为下游产业负责,不是么?

其他内容参照指引更工业化的设计

三、主题、风格的表现与贴合

接到一个项目,比如是做古琴的,在没有风格指示的前提下,我想你的想法主题一定是清幽淡雅;而如果项目是一个火爆的酒吧的网站,那么你肯定要用视觉冲击强一点的配色,惹火的美女图片(美女进夜场不要钱的不是么?)。

这就说明主题和风格,要和项目本身贴切起来。

那么有没有想过,通过截然不同的感官关系来表现项目本身?

如果采用这种方法,先不论是否会成功,首先就说明你很大胆,你对设计的操控能力有信心。但是,如果你的作品感并不强烈,那么基本上还是属于被枪毙的飞机稿的结果。

如果一味使用“从你自身专业的角度出发、优秀的表达能力和说服能力”来让对方接受你的作品,其实在这个时候并不适用。在紧紧抓住并透彻分析项目本身的前提下,让“眼前一亮”之余,立刻联系到项目本身。这才是作品感的表达,用作品说话。

但绝对不能背道而驰。

四、论专注

如果你能像hiheng一样,6、7年里持续做一个产品的话,那么你就能够准确把握住它未来的走向。而在需要修改细节的时候,基本都是属于信手拈来了。

而如果你一直专注于做企业站,我不是说你的设计能力不会得到提升,我只会说你在驾驭内容的时候,可能不那么得心应手。这说法不是无懈可击,就算是专注做内容的设计师,也要跟着时代去改变。

任何事物都有局限性,“大气”这个词也只是表象。

所谓的专注,指的是你对设计的理解和热爱,进而孜孜不倦地钻研、学习和锤炼自己。或许孜孜不倦这个词有点严重,但如果你能用你专业的眼光去看待周遭的一切,什么还能阻止你?

五、合作

我很喜欢和一种人合作。比如赵毅做平面我做网站,他定稿的东西我看一眼就明白,并且在给出意见的同时,能够迅速、合理地运用到我的稿件中;而我针对他的东西做出的调整和二次设计之后的东西,他看一眼,也能够做出同样的举动。

反之亦然。

要有一颗谦卑的心。任何一个设计师体内的能量都不是能够轻易估计的。


--------------------------------------------

后记:

关于网页设计进阶系列的文章,我一直在考虑究竟应该是从哪些方面去阐述最基本最实用的东西,进度一直比较慢,但从未停止过。

从2008年到现在,最重大的打击莫过于09年初,已经写到第三十七章的系列文章因服务器问题只找回了1/3。所以我改变了思路,不再去拟列提纲编写,而是从自己的经验和感悟里去提炼一些东西。渐渐地,我不再觉得丢掉的那些文章是个打击,没了那些东西,我的思路能够更宽广一些。

对于设计这个抽象的概念来说,使用具象的图片、文字来表达和阐述的时候,如何让别人认同和如何取信别人,这是最重要的问题!

hey , bi ! 我又来了

网页设计理念2008-5-25
网页设计进阶之一 (步骤和大局观)2008-5-25
网页设计进阶之二  论摹仿和抄袭.2008-5-25
网页设计进阶之三 设计步骤及思考2008-5-25
网页设计进阶之四 关于素材和言志2008-5-26
网页设计进阶之五--构图的均衡与视觉引导、曲线/弧/光和影的运用2008-5-26
网页设计进阶之六-- 守住那些不能丢的东西!2008-6-10
网页设计进阶之七-- 给那些效率低的同仁们!2008-8-22
网页设计进阶之八--层次、空间(透视、立体)的浅入2008-9-12
网页设计进阶之九--用客户的眼光去设计2009-7-8
网页设计进阶实例--品牌变迁及产品表现2013-5-7
网页设计进阶之十--细节的表达(一)2009-7-17
网页设计进阶之十一 -- 快速设计:元素堆叠的中国风网站2010-8-2
网页设计进阶之十二 -- 快速设计:元素迭代的中国风类营销网站2010-8-2
网页设计进阶之新手教导篇:如何成为一个网页设计师2012-8-14
网页设计进阶十三--屏幕之外2012-12-5
网页设计进阶之感官的延伸
发表于 2013-6-14 15:23:31 | 显示全部楼层
需要多些时间来看你写的可以学到不少,谢谢!
回复 支持 0 反对 1

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-30 07:21 , Processed in 0.109102 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表