Mr.FIG BLOG

>>>为什么要写这篇文章呢？

因为最近这两三年来，笔者亲身经历了若干网站的重构策划，经历了几个项目的网站重构，在重构过程中不断的研究，不断探索，走了一些弯路，也取得了一些小小的成绩。笔者也由一个草根互联网人，并凭借着学生时代积累的个人站长基础，转型成为了一名职业互联网人。在这个过程中也积累了个人的一定心得，相信对于其它的从业者来说，也可能有一定的益处。 Read the rest of this entry »

今天我一个互联网行业的QQ群里，有一位好友问到“体验一个网站，一般流程是怎样？”

应该是下图图所示：

还是：第一步：界面视觉；第二步：功能信息；第三步：交互流程。

她提出了自己的观点：对一个网站进行体验，首先得进入这个网站，自然那种界面效果是最先感受到的，是体验的第一步；然后了解了网站提供的功能后，客户就会对感兴趣的功能去使用，必然才会和系统发生一个交互。 Read the rest of this entry »

示范: 登入的逻辑判断
逻辑判断示范
以旅游网站的企划 (http://userxper.com/blog/archives/36 ) 为例，说明「会员登入页面」如何应用Condition Builder建立逻辑判断。
这个会员登入要做到的功能是：如果登入成功（即帐号、密码输入正确），则导回首页，并显示招呼讯息。如果登入失败（即帐号、密码输入不正确），则出现错误讯息。
来到旅游网站Prototype的「范例2-进阶版首页」，点一下”登入”按钮，就进入会员登入的页面。设计以下两种登入的操作状况： 
状况1 输入错误的密码：出现登入错误的讯息。
状况2 输入正确的密码：登入成功之后，立即导回首页，并显示招呼讯息，同时将登入的文字连结变成登出。

您可以用Axure RP绘制流程图(如下图)，来解释这个功能设计的逻辑判断。

接下来，开始设计页面的操作互动：
1) Widget命名：针对操作相关的栏位、按钮、动态面板，在Interactions窗格的Label一一填入名称，以利后续的设定识别。
Read the rest of this entry »

周鸿祎的办公室摆放着一套近300万元人民币的音响设备，拍照前，他叮嘱摄影师不要碰到它

在中国互联网的世界里，周鸿祎绝对是个人物：他和李彦宏抢过生意打过官司、和马云相互“封杀”对方、抢过丁磊的地盘、连杨致远都亲自给VC写信说不要投资给他、和管网站注册报备的CNNIC干过仗，现在则让互联网安全同行寝食难安，口口声声要学习马化腾的“先进经验”、却又时时盯着对方的脚步。 Read the rest of this entry »

根据我个人对互联网产品经理（以下简称PM）的理解，画了上面这个草图，想表达几方面的内容：

1、蓝色箭头指向代表PM在工作过程中要接触到的对象。
2、蓝色箭头以PM为中心，指向周围的各部门，说明其在沟通和协调过程中扮演着主动的角色。
3、绿色箭头代表，互联网企业中，PM最经常由哪些工种转变而来。
4、整个图形是人的形状，头部、左膀右臂、双脚、心脏。

我做的这个图只能说具有代表性，不具普遍性，因为企业不同、部门组织不同、管理模式不同都决定PM在工作过程中有差异。今天我只是希望用这个图来和大家讨论一下PM在职业生涯中的起点、支点、增长点。
Read the rest of this entry »

一、网页的Grid（栅格、网格）的定义

就是用规则的格阵来指导和规范网页中的版面布局以及信息分布。

二、Grid系统设计页面具有以下优势

1. 能大大提高网页的规范性。在Grid系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
2. 基于Grid 进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
3. 对于设计师们来说，灵活地运用Grid系统，能做出很多优秀和独特的设计，应用“黄金分割”原理确定版块宽高比例。

之前做网页，总再想“这一栏要多宽才好看呢？加一两个像素看看~ 哎呀~ 还是减一两个看看吧……”很耽误时间，没有个定数完全凭感觉。现在好了，有了Grid指导，就可以为所有栏目的宽度做一个约束，这下定宽有数了（优势1），这样页面整体看起来端庄一些（优势2）。

在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣，网页栅格设计，通过很有逻辑性的公式换算加上一定的数学分析，得到对网页设计有建设性的概念指导，从一定程度上说算是一种创新。

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造，在我看来这些新的概念对网页设计来说是一种尝试和提升，会给你接下来的创意构思提供一个坚实的基础，让人从一个新的视角来看待好的网页设计。

在《超越CSS：Web设计艺术精髓》（卓越、当当）这本书中，就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说，黄金比例并不陌生，它是最符合自然界美感的一个很神奇的东西，在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说，只要记住一个数字就可以了：“1.62”。（优势3）

通过Grid 就可以快速省事、有效率、规模化的建成大量页面。一些资深网页设计师，在网页栏目版块布局方面的经验值，实际上就是Grid 的应用。 Read the rest of this entry »

声明，本文用于学习研究，转自岁月如歌的博客：http://lifesinger.org/blog/2008/10/grid-system-1/

研究网页栅格系统前，来看一组数据：

上面列举的都是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就这么“自然”地出现了。 Read the rest of this entry »

　　09年末，书籍装帧课上老师给我们布置的大作业，让我们做一本精装个人作品集，然后打印装订起来。开始很想好好设计一下，可让人浮躁不安的大四生活，以至于做的时候感觉心有余力而不足，最后只有草草完工，里面的作品博客相册里都要，设计了封面逢低、扉页、版权页，目录以后，再设计一个模板，然后把作品排版进去，我的个人作品集就这样早产了…

　　书籍装帧课上的概念书设计作业，用魔方的形式突出娱乐和智慧的元素，体现书籍可以给人们带来智慧和娱乐的作品，同时魔方正对我们的三个面包含了F、I、G三个字母，也是FIG的LOGO设计模型。