讓網頁設計有規律可循

标签: WEB Design | 发表时间:2011-10-11 02:58 | 作者:[email protected](Admin) Amo
出处:http://www.wowbox.com.tw/blog/


隨著開放平台日益增多,衍生出來的各類應用服務也就呈不斷增長的趨勢。這些應用服務的站點設計也可謂是五彩斑斕,燦若繁星。

我們可以來找找這些網站的設計是否有規律可循。

通常一個網站,都會有許多目標需要完成,而像應用服務或程序類網站其最主要的目標就是吸引訪客去購買或者註冊他們的產品。

可以從幾個方面來分析

色彩

Amoderneden



從它的整體色彩配圖元素構建等不難看出,這是一個關於兒童教育有關的網站,推的就是寓教於樂的產品服務。

Paraply



他們為用戶的當前位置提供降雨預報服務。憂鬱的藍色預示著雨雪的降臨,與雨傘保護感強烈的紅色相對比顯得相得益彰。

MailChimp



他們專門為客戶公司提供強大的電子郵件營銷服務。鮮亮的色彩預示這是家充滿激情活力的公司。

色彩的應用組合預示了這些信息。




佈局



一般訪客的視線會從頁面的左上角的開始,掃視網站的頂部(Logo,導航)

接著他們目光向下移動,讀下一個區域…該產品的模擬截圖和簡單的文字介紹,通過這塊漂亮的展示區域,他們才開始對網站有了初步的印象。

訪客看到產品的模擬展示後,他們就可以想像實際應用的情景。如果能夠讓潛在客戶想像使用產品的情形,你就已經開始勾起他們的購買慾望了。

更重要的是,這類圖片不僅僅是會吸引訪客,他還傳遞給訪客易於使用的信息。

如果你為訪客描繪了一副栩栩如生的畫面,讓用戶覺得使用你的產品可以受益很多,那麼他們的購買慾望就會膨脹起來。



最後,當用戶做決定的時候,視線就自然的落在了按鈕上,引導他們立即購買或註冊產品。

可以舉些例子

LemonStand



Opera



Zendesk



百度快搜




按鈕

操作按鈕要做的灰常之醒目可點擊極強,這是必須的。

看看下面這些按鈕實例:



功能點

如果可以,在頁面下半部分使用一些圖標和短標題來把產品的一些功能點羅列出來,簡明易懂就行。



網站的設計應該為它的目標服務。當然,網站的外觀也很重要,它決定了訪客的第一印象,但是同樣重要的是,不要為了設計而讓網站走入歧途,美學上的好看並不能提升網站的表現力。因此,你需要確定設計策略都是由網站的目標和計劃驅動的。

部分資料參考:看這裡...

相关 [WEB Design ] 推荐:

几种极其隐蔽的XSS注入的防护

- - idea's blog
XSS注入的本质就是: 某网页中根据用户的输入, 不期待地生成了可执行的js代码, 并且js得到了浏览器的执行. 意思是说, 发给浏览器的字符串中, 包含了一段非法的js代码, 而这段代码跟用户的输入有关.. 常见的XSS注入防护, 可以通过简单的 htmlspecialchars(转义HTML特殊字符), strip_tags(清除HTML标签) 来解决, 但是, 还有一些隐蔽的XSS注入不能通过这两个方法来解决, 而且, 有时业务需要不允许清除HTML标签和特殊字符.

关于网站加速的35条法则(来自Yahoo)

- - SegmentFault 最新的文章
原文见此: https://developer.yahoo.com/performance/rules.html. 注意,不是翻译,只是谈谈本人的读后感. 另外注意,该文比较旧,大概是2010年的产物,所以里面会有些跟不上时代的内容. 一个典型的http请求报文大概是这样的:. 虽然也就几行文字,但是考虑到http协议里,对同一个域名同时发出的请求是受限的 [1],如果请求太多,说不定它们会堵塞在队列中呢.

好看的在线图表制作工具

- - idea's blog
经常在网上或者电视里看到那些配色方案很柔和的统计图表, 比如饼图, 柱状图, 曲线图等, 我就想, 这是用什么工具做的呢. 用微软的 Excel 肯定不是, Excel 的图表配色太低级丑陋了.. 有一个叫 Open Flash Chart 的, 配色很一般, 最大的缺点是 Flash 的, 通用性不高..

账号系统的两阶段登录和三阶段登录

- - idea's blog
简单的账号登录是一阶段登录, 也即用户提供用户名和密码, 然后服务器端验证账号和密码是否正确以决定是否成功登录. 一阶段登录其实安全性是非常危险了, 其危险性就在于这个登录流程涉及到的数据都是静态的, 因为用户名和密码一般不会改变.. 为了在登录流程中引入动态数据, 必须把流程改为两阶段登录: 1, 获取动态临时 secret salt; 2.

Web App的零框架解决方案

- - SegmentFault 最新的文章
MVC框架(尤其是大型框架)有一个严重的缺点,就是会产生用户的重度依赖. 一旦框架本身出现问题或者停止更新,用户的处境就会很困难,维护和更新成本极高. ES6的到来,使得JavaScript语言有了原生的模块解决方案. 于是,开发者有了另一种选择,就是不使用MVC框架,只使用各种单一用途的模块库,组合完成一个项目.

探访 eico design,小记

- Frank - 爱范儿 · Beats of Bits
如果你手边正好有个 iphone,也正好在用新浪微博,也许你会喜欢 weico 客户端. 这款以章鱼为图腾的微博客户端有着很棒的用户体验,细节出色. 它透露出背后团队 eico design 那种注重创新用户体验的独特气质. 在移动互联网及相关产品设计方面,eico 无疑也是一面旗帜——它很吸引我们.

进入Material Design时代

- - CSDN博客移动开发推荐文章
由于本文引用了大量官方文档、图片资源,以及 开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢. 官方Material Design详细介绍文档: http://www.google.com/design/spec/material-design/introduction.html.

Android Design in Action —— 编与集

- - 极客公园-GeekPark
曾经热爱 Metro UI, 对 Android Design 了解深入. [核心提示]又一篇 Android Design 的指南,教会你 Android Design in Action 的艺术,各位苦逼的 Android 工程师们快快拜读. 大家好, 这是久违了的 Android Design in Action 栏目.

正确处理浏览器在下载文件时HTTP头的编码问题(Content-Disposition)

- - IE浏览器中文网站
最近在做项目时遇到了一个 case :需要实现一个强制在浏览器中的下载功能(即强制让浏览器弹出下载对话框),并且文件名必须保持和用户之前上传时相同(可能包含非 ASCII 字符). 前一个需求很容易实现:使用 HTTP Header 的 Content-Disposition: attachment 即可,还可以配合 Content-Type: application/octet-stream 来确保万无一失.

街角住宅 – On the corner / EASTERN design office

- Dylen - 60designwebpick
由日本建筑事务所 EASTERN design office 设计,On the corner 是一幢位于小镇街角,不同寻常的蓝色房子. 房子位于日本 Youkaichi 市滋贺县的工业区,该地区居住着许多来自南美的移民. 这里不仅是工业区和住宅区,还聚集着众多酒屋和餐馆,On the corner 建在道路的交汇的一个尖锐的三角区域,这一前提决定了房子会拥有一个不同寻常的外形.