Home
  •  
  • Category based archives for '学习'

  •  
  •  
  • Axure高级互动设计2——示范: 登入的逻辑判断

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

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

  • 网页栅格系统的设计和应用

    一、网页的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就这么“自然”地出现了。

© 2006-2009 - SuperMini by unnerkrunt and nocreativity