分类目录归档:UI

User Interface

触屏手机网站设计

随着智能手机 iphone 和 Android 的热潮,衍生出基于 Safari 和 Chrome 浏览器的触屏手机网站 Touch Screen Mobile Website。

触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:

一、设备

  • 分辨率与屏幕尺寸
  • 触屏机的交互特点
  • 性能

1、分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch 目前有 2 种分辨率:480*320、960*640,屏幕的物理尺寸都是 3.5 英寸,Android 由于是开源系统,生产商诸多,导致分辨率,屏幕尺寸非常多,但目前主流的分辨率为:480*320、800*480,根据以上情况推荐以 480*320 为标准设计(客户端则推荐以大分辨率来设计),同时考虑横屏情况下的自适应。

2、触屏手机的特点是直接通过手指操作对象,因此需要为网站设定一个理想的行高来满足手指的触摸点击。

来自 lukew.com 的一份关于触屏点击尺寸数据:
食指点击的间距约为 7*7 mm,1mm 间距。
拇指点击的间距约为 8*8 mm,2mm 间距, 当前推荐值为 9mm,最小应不小于 7mm。
列表选项之间距离最小应不小于 5mm。

在设计过程中需要将毫米换算成像素,不同尺寸的屏幕分辨率换算的结果也不一样,笔者认为:可按 5mm 为最低标准设计,使用率较高的可根据测试情况加大。

touch_ mobile_website_01

3、手机的硬件和网络环境与PC相比还有较大差距,因此手机网站需要高度优化页面性能:
尽量控制页面文件大小,避免使用过多图片,规范 html 和 css,css压缩工具
尽量减少服务器请求,使用 css spirit 某些特定 css 可直接写在页面文件里。
关于页面性能的具体优化并非三言二句能讲述清楚,这里只做抛砖引玉,欢迎补充。

二、系统

  • UI style
  • flash

1、iOS 和 Android OS 在设计风格和交互上有较大差异,如果考虑一套 UI 同时适用多个平台(网站可跨平台使用,跟 APP 相比减少了开发和维护成本),在设计时要避免过大的风格偏差和交互上的冲突及误导。

2、iOS 不支持 flash,JAVA,SVG,Android OS 支持 flash10.1 以上版本,建议使用 gif 动画。

三、浏览器

  • 功能条
  • 缓存
  • HTML & CSS
  • JavaScript

1、iphone 浏览器自带有功能条,弥补了硬件上的功能缺陷。
这里特别介绍下 iOS 的一个特点,可将网站添加到桌面,并生成一个 APP 图标:

<link rel="apple-touch-icon" href="icon.png" />

icon.png 图片为方形,尺寸 57px*57px,iphone4 114px*114px。

touch_ mobile_website_02

2、这里将缓存分为组件缓存和页面缓存,组建缓存是指网站元素:图片、CSS、JavaScript 等,页面缓存是整个页面作为单独实体来存储,在页面设计开发时要注意组件和页面不超过浏览器的缓存大小:

touch_ mobile_website_03

3、在 PC 端上显得遥遥无期的 html5 和 css3 在移动终端率先登场,下面介绍几个实用的 css3

渐变:

.gradient {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(255,255,255)), color-stop(80%, rgb(212, 212, 212)));
}

圆角:

.radius {
    -webkit-border-top-right-radius: 5px;
}

高级选择器:

.list > p:last-child a {
    color: #0085CF;
}

避免重力感应时文字随分辨率增大而增大:

.adjust {
    -webkit-text-size-adjust: none;
}

屏蔽输入框默认圆角和阴影:

.input{
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

去除下拉框默认样式:

.select {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

4、JavaScript

隐藏浏览器地址栏:

window.addEventListener('load',
function() {
    setTimeout(function() {
        window.scrollTo(0, 1);
    },
    100);
});

手机识别:

var isAndroid = navigator.appVersion.toLowerCase().indexOf('android') >= 0,
isIphone = navigator.appVersion.toLowerCase().indexOf('iphone') >= 0;
if (isAndroid) {
    window.location.href = "XXX.html";
}

Iphone 全屏显示:

<meta name="apple-mobile-web-app-capable" content="yes" />

四、网络

  • GPRS
  • 3G
  • WIFI

1、从速度和资费来看,GPRS 是最慢最贵的移动上网方式,该网络环境下页面瘦身无疑是最睿智的选择,建议页面文件大小不超过25K(GZIP后)具体测试数据不做赘述。

2、3G 卡速度接近甚至有的超过 WIFI 上网速度,但同样存在资费问题。

3、WIFI 我们可以理解是移动终端通过无线路由连接固定宽带的一种上网方式,资费和速度等同于用 PC 访问网站的成本。

根据以上 3 种网络我们可以做一些适配为用户提供最适合的体验。

原文:http://ued.3g.cn/

让界面更加清爽

夏日要到了,酷热的天气,灿烂的阳光,想在夏日里获得众人的目光和赞美,快试试小白介绍的几招,一起打造清爽的夏日装,让在一切更加舒服,有活力。

嗯…咳咳。这是说视觉界面上设计的事,无论是web、移动或客户端,要想视觉更加清爽下面的建议都会有帮助的。

1、让布局更有空间感

脱掉!嗯…对的…
要想清爽,就得把身上多余的衣物,一层一层的脱掉!
在一个有限的空间里塞满大量的元素和信息,就算设计再华丽,信息再精彩,焦点还是无法长期停留在该空间。对于信息量丰富的界面,要想视觉清爽,空间感显得有为重要,这包括:主次信息之间的比例,各个信息模块之间的距离,单个模块里信息的间距。

2、使用简单的几何元素

曲线!嗯…也不完全这样理解…
脱掉厚重的衣物,身体的线条自然会显现出来,但想吸引更多的目光,那就得把线条练得好点。
在界面中使用简单几何元素做点缀或分割,有助于视觉焦点迅速寻找主要内容,便于信息的传达。
几何元素在人的思绪中是一种没有滞碍的概念,往往传达出干净有力,目的明确的态度和姿态,这最符合清爽的氛围。

3、留白和采用浅色系的邻近色

夏日,海滩上,鲜艳的色彩的确是夺目的主角。
但作为日常着装,那样的色彩就不耐看了,而简单浅色系则显得干净舒服。
色彩在界面的作用是营造体验氛围,为的是更好的突显内容,尽量减小使用中的干扰,建议太强烈的色彩不适于在以大量信息为主题的常用界面设计中。
适合营造氛围的邻近色特点是,层次丰富、活泼,既保持了统一的优点,却没单调、呆板的缺点。而浅色系的色彩与白色相搭配显得界面单纯、柔和、谐调,却有优雅、微妙的色感。

以上是几点小小建议,愿你在设计界面时,希望界面清爽的时候会有所帮助。

原文:http://uedc.163.com/

UI设计之布局

说到 ui 设计就不得不提一个重要的因素-布局。是的,一个恰到好处的的布局能使页面内容变得工整,提高用户的视觉感受,也可以帮助用户快速的找到他们想要得到的内容,提高工作效率。

什么是布局?

“布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要,并可以在结构外观上令用户感到舒服。

如何设计有效的布局?

1. 具有清晰的视觉层次。布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次:

焦点:指用户首先关注的区域。形式上被赋予焦点属性的 UI 元素一定要表达重要的内容。

视觉流:指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。

ui_layout_01

ui_layout_02

关联:在逻辑上相关的 UI 元素应具有清晰的视觉关系。

错误:

ui_layout_03

逻辑上相关的UI元素在空间上被分隔,且没有明显的视觉关联。

对齐:使页面工整,信息呈现有序,便于用户扫视。

错误:

ui_layout_04

没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。

强调:可以根据UI元素间的相对重要程度进行强调。

2.针对用户的阅读模式来设计布局。

大部分人的阅读习惯是从左向右,至上而下。

阅读分为沉浸式阅读(immersive reading)和扫视(scanning),前者的目的在于理解,后者在于定位。

ui_layout_05

ui_layout_06

浏览网站时,用户不会沉浸在UI本身,而是沉浸在他们的目标任务中,因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。

针对扫视的布局设计可以适当强调主要的UI元素,弱化次要的。包括:

1) 将主UI元素放在扫视路径上。
2) 避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。
3) 考虑使用渐进展开方式来隐藏次要的UI元素。
4) 将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签,而不是辅助型的静态文本。

错误:

ui_layout_07

用户必须阅读辅助型文本后才能明确“确定”按钮的作用。

正确:

ui_layout_08

直接将按钮的作用描述作为控件标签,便于用户理解。

5) 不要展示大段文本,去除不必要的文本。多文本时格式化展示。

注:常规模式也存在例外。眼动议实验指出,真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定,而不是精准的描述用户行为。

3.合理利用页面空间。

保持页面的视觉平衡。避免拥挤和对空间的浪费。

确保关键数据没有被截断,除非数据特别长。

错误:

ui_layout_09

有效空间没有被充分利用,从而导致多条关键数据被截断。

控件的尺寸和间距恰当,没有不必要的滚动。一个任务尽量在一屏内完成。

实际情况中,我们用户的页面空间要小于屏幕分辨率,它会因各种因素而压缩,如:非全屏操作(弹出窗口和对比浏览),浏览器本身及各种辅助栏对屏幕的占用等,设计中要考虑这些情况。

ui_layout_10

ui_layout_11

4.不要让布局本身成为突出的UI元素,保持视觉简洁(visual simplicity)。

减少内容和展现上的嵌套层级。

减少控件不同尺寸的数量,例如,在界面上只使用一两种按钮宽度。

采用轻量级的分组和分割方式,可以用布局本身和分隔符代替分组框。

使用尽量少的对齐线。

5.选择与页面类型相匹配的版式。

在设计之初,应充分考虑页面承载的内容、功能和属性,继而选择适合该页面的版式。不合适的版式会造成用户的阅读困扰,降低任务的完成效率。

标准和规范:

1.栅格化:

我们所说的栅格化是指在网页设计工作中对栅格系统的建立和应用。网页栅格系统来源于平面栅格系统,它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

栅格化可以使信息呈现工整简洁、美观易读,降低页面开发和运维成本。它结构变化相对灵活,扩展性强。

2.以8px为横向栅格单位:

以8px为横向栅格单位,页面所有元素宽度都可以是2的倍数,包括图片和版块宽度,这样可以在一定程度上加快页面(特别是对于J-PEG图片)的渲染速度(基于计算机内部二进制的运算机制)。其在扩展和兼容性上也有一定优势。

在阿里巴巴中文站中,布局间距的最小单位为8px,布局区块采用32px(8px*4)和24(8px*3)两种粒度单位,分别组成以下两种可实现的栅格系统:

32px 适用于市场、社区等相关页面。

ui_layout_12

24px 适用于旺铺相关页面。

ui_layout_13

3.页面定宽:

自适应可以根据浏览器显示情况自动调整页面宽度,但是因为用户水平方向的聚焦范围有限,所以当页面过宽时,用户的浏览和操作成本会增加;而当页面 过窄时(如用户同时开启两个浏览器对比查看商品搜索结果),自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些问题。

在综合考虑当下主流分辨率情况、浏览器外观对显示空间的占用、人机工程学中对水平视角和聚焦范围的规定以及8px单位等多种因素后,我们认为 960px是一个相对更加合理的页面宽度。在阿里巴巴中文网站中,推荐使用定宽960px的页面,去除左右各4px的边距,中间的可视宽度为952px。

原文:http://lilong4174.blogbus.com/