技术资讯
简洁的网页letou产品展示
2012-07-18 00:12:13
现代城市生活中我们每天要面对嘈杂拥堵的街道和地铁,各式各样的广告,处理各种邮件和信息。于是我们内心追求一种体验那就是—极简,像大家家喻户晓的品牌如:MUJI无印良品、 苹果 、宜家家居,都是这一风格的发扬者,他们的产品也获得了巨大成功。
极简在摄影中是一种突出主体取简去繁的摄影手法,在生活中是一种放松的生活态度,在letou产品展示中是一种简洁的letou产品展示手法。
微博的letou产品展示体验也是如此,我们去掉了复杂的视觉干扰,力求给用户带来愉悦轻松的视觉体验。
1. 微博同城项目
说起微博同城项目在letou产品展示的时候,我不得不感谢一个摄影师给我带来的一些灵感。
德国摄影师JosefSchulz(1966生于荷兰)
同城项目要求根据用户登录ip来判断登录地点。这就需要一张能体现当地风土人情的头图来营造氛围。怎么做呢?怎样才能让用户有家的感觉?
正当我在想用美食、风景、建筑为题材切入的时候,无意中发现了这组摄影作品。它没有多余的光效,画面干净,看着很舒服。但是看似简单的东西却在角度和构图上要比普通照片讲究的多,比如下面这组摄影就是追求的平面构成和透视原则,内容看似很单调,但构成感很强。
然后我确定了用城市建筑来表现,我开始在网络上搜索几个主要城市的地标性建筑,然后进行简化和提炼,把建筑的主要特点进行勾勒.以香港为例:
先找了一张有代表性的香港夜景
然后画出简单的建筑骨骼后开始上色,说到这我插一个有意思的事情。宫崎骏的工作室中“小男孩”组负责草图和结构稿的绘制,然后由 “小女孩”组完成上色。
[最终效果图]
其它城市的letou产品展示过程也是如此,我就不再一一赘述了:)
遗憾的是这个项目由于种种原因上线后很快就下了,所以大家可能没能看到。呵呵~
我小结一下这一过程我学到的一点小经验吧,在处理类似的产品页面的时候可以考虑用平面化的剪影图形,letou产品展示加上一点画面节奏处理,再用颜色一点颜色进行画面烘托,能起到不错的视觉效果希望大家能可能用的上。
下面这个项目大家每天都在用,虽然它小的让人很难察觉,但是给用户减少了很多认知负担。图标能让我们很快速的找到需要的东西,能在给用户清晰的指引。
2. 微博图标letou产品展示
这个图标是去年年底的时候画的,当时需要对微博进行改版(V4),之前的图标存在很多问题,比如风格不统一,大小也五花八门。
这是整理后的图标,图标没有水晶质感,没有过多的质感塑造。以极简的letou产品展示风格为主线进行,这也跟微博整体体验的“轻”“薄”精神相一致。
我们来看看新版微博和旧版微博的发布框的对比,比较明显能看出来图标的清晰度和运用极简letou产品展示风格的视觉效果。旧版的图标有很多没必要的高光和立体感,但是这些效果反而没起到理想的效果,反而识别性大大减弱。
3. 图表letou产品展示
先定义图表的色调,以为图表跟以上两个letou产品展示不同的地方是在于,它是靠颜色来识别。所以颜色选用尤为重要。图表有的时候是比较枯燥的,所以颜色我选择冷色系,这样比较耐看,相对于暖色系而言,能降低用户厌倦反感的情绪。
我会加入一些微弱的光和投影,但是总的方向还是以极简的风格为主。
[饼形图表]
在增加选项的时候,其它选项的颜色需要根据主色调来进行扩展,但是有个小小注意事项:因为近似色的关系,为保证颜色左右能区分开,我们需要规定每个颜色出现的位置,所以我给开发人员做了一个颜规范。
[曲线图表]
曲线图表也是如此,细节上有一些弱弱的投影和高光变化。
最后总结一下:极简不等于简单,但极简拒绝多余。
近期更新
- [2023-07-26 14:17:28] 为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛建设公司,高端定制,一站式服务——力图数字科技
- [2023-04-27 13:47:54] 高端定制建设——从满足预期到走向卓越
- [2023-04-11 09:17:49] H5页面letou产品展示开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套服务支持
- [2021-05-18 10:14:11] 青岛建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 建设最容易忽略的人性化letou产品展示
- [2020-12-16 16:55:32] 建设一个常规的公司建设成本大概是多少?
延伸阅读
- [2012-05-09 01:35:55] 网页letou产品展示与平面letou产品展示的差异
- [2013-03-14 10:27:31] 网页插入百度地图
- [2011-10-26 15:45:17] 苹果用户体验的价值
- [2014-11-18 21:04:44] 如何利用博客做优化
- [2011-12-20 18:45:53] PR值与内容收录的关系
- [2015-01-08 19:16:42] 百度搜索你了解多少?
- [2013-04-03 08:54:20] skype网页代码
- [2014-03-03 23:39:38] HTML5能做什么?
- [2013-04-24 17:04:24] 如何提高百度的内容收录
- [2013-03-01 17:03:29] 如何通过网页广告来赚钱
- [2011-11-30 22:05:58] 如何做高质量的外链
- [2019-10-16 10:21:11] 5G时代,建设公司必须要重视移动端体验