今天我一个互联网行业的QQ群里,有一位好友问到“体验一个网站,一般流程是怎样?”
应该是下图图所示:
还是:第一步:界面视觉;第二步:功能信息;第三步:交互流程。
她提出了自己的观点:对一个网站进行体验,首先得进入这个网站,自然那种界面效果是最先感受到的,是体验的第一步;然后了解了网站提供的功能后,客户就会对感兴趣的功能去使用,必然才会和系统发生一个交互。
示范: 登入的逻辑判断
逻辑判断示范
以旅游网站的企划 (http://userxper.com/blog/archives/36 ) 为例,说明「会员登入页面」如何应用Condition Builder建立逻辑判断。
这个会员登入要做到的功能是:如果登入成功(即帐号、密码输入正确),则导回首页,并显示招呼讯息。如果登入失败(即帐号、密码输入不正确),则出现错误讯息。
来到旅游网站Prototype的「范例2-进阶版首页」,点一下”登入”按钮,就进入会员登入的页面。设计以下两种登入的操作状况:
状况1 输入错误的密码:出现登入错误的讯息。
状况2 输入正确的密码:登入成功之后,立即导回首页,并显示招呼讯息,同时将登入的文字连结变成登出。
您可以用Axure RP绘制流程图(如下图),来解释这个功能设计的逻辑判断。
接下来,开始设计页面的操作互动:
1) Widget命名:针对操作相关的栏位、按钮、动态面板,在Interactions窗格的Label一一填入名称,以利后续的设定识别。
根据我个人对互联网产品经理(以下简称PM)的理解,画了上面这个草图,想表达几方面的内容:
1、蓝色箭头指向代表PM在工作过程中要接触到的对象。
2、蓝色箭头以PM为中心,指向周围的各部门,说明其在沟通和协调过程中扮演着主动的角色。
3、绿色箭头代表,互联网企业中,PM最经常由哪些工种转变而来。
4、整个图形是人的形状,头部、左膀右臂、双脚、心脏。
我做的这个图只能说具有代表性,不具普遍性,因为企业不同、部门组织不同、管理模式不同都决定PM在工作过程中有差异。今天我只是希望用这个图来和大家讨论一下PM在职业生涯中的起点、支点、增长点。
一、网页的Grid(栅格、网格)的定义
就是用规则的格阵来指导和规范网页中的版面布局以及信息分布。
二、Grid系统设计页面具有以下优势
能大大提高网页的规范性。在Grid系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。
基于Grid 进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。
对于设计师们来说,灵活地运用Grid系统,能做出很多优秀和独特的设计,应用“黄金分割”原理确定版块宽高比例。
之前做网页,总再想“这一栏要多宽才好看呢?加一两个像素看看~ 哎呀~ 还是减一两个看看吧……”很耽误时间,没有个定数完全凭感觉。现在好了,有了Grid指导,就可以为所有栏目的宽度做一个约束,这下定宽有数了(优势1),这样页面整体看起来端庄一些(优势2)。
在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,网页栅格设计,通过很有逻辑性的公式换算加上一定的数学分析,得到对网页设计有建设性的概念指导,从一定程度上说算是一种创新。
也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造,在我看来这些新的概念对网页设计来说是一种尝试和提升,会给你接下来的创意构思提供一个坚实的基础,让人从一个新的视角来看待好的网页设计。
在《超越CSS:Web设计艺术精髓》(卓越、当当)这本书中,就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说,黄金比例并不陌生,它是最符合自然界美感的一个很神奇的东西,在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说,只要记住一个数字就可以了:“1.62”。(优势3)
通过Grid 就可以快速省事、有效率、规模化的建成大量页面。一些资深网页设计师,在网页栏目版块布局方面的经验值,实际上就是Grid 的应用。
声明,本文用于学习研究,转自岁月如歌的博客:http://lifesinger.org/blog/2008/10/grid-system-1/
研究网页栅格系统前,来看一组数据:
网站
首页页面宽度 px
Yahoo!
950
淘宝
950
MySpace
960
新浪
950
网易
960
Live Search
958
搜狐
950
优酷
960
AOL
960
上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能专一,页面结构相对简单。
根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px.
这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?
神奇的960
设计师们对苹果情有独衷。在 1024 x 768 的分辨率下,打开Firefox:
自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.
有趣的960就这样出现了。是的,可以认为一切就这么简单。栅格系统最早出现在平面设计领域,设计师们爱用苹果,苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。
EasyTalk(后面简称ET)是国内一个比较成熟的中文微博客程序,随着微薄客这种新媒体的出现,很多大型网站都开始建立自己的微博客网站,一些中小站长们也是如此。对于想要建立微博客网站的中小站长来说ET是一个不错的选择,不过遗憾的是ET目前还不支持QQ机器人和手机更新,而且还暂停了开发。
总体来说ET这套程序还是很不错的,我自己也建了一个微博客网站,就是左边图片中的“心语”微博客(http://xinyu.mrfig.net/),它是一个私密微博客,用来记录自己的心情语录,而且只有好友可见。
由于ET的安装要求比较高,很多站长安装时会出现问题,所以飞歌将在这里将为广大ET爱好者解答一些问题:
1、安装成功,能打开首页,但是其他页面无法显示该怎么办?
2、我不想在随便看看页面显示隐私用户(设置了只有好友可见)发布的信息该怎么做?
3、新注册的用户都将自动成为默认管理员的好友,如何修改?