主要内容
-
Axure之锚点跳转与Title提示 2009-11-25 23:43
最近在做一个原型的时候用到锚点跳转与Title提示功能,同事看到HTML之后问我这个是怎么实现的;昨天又看到一篇文章举了个注册表单中的Title 提示示例,问这个是如何实现的,我才发现原来很多人都忽视了axure中一个很常用的组件——图片/图像映射区域(image map region)。   ... ...
-
如何在iOS与Android间移植APP 2011-05-11 09:04
除了像"I am rich"这种定点打击苹果烧包族的APP外,大多数应用都会尽量覆盖包含尽可能多的用户。这就需要考虑在iOS和Android两种主流操作系统间移植的问题。如果为各个平台量身定做界面,就能让用户利用以往的使用习惯快速学习。但为多个平台设计各异的界面毕竟是需要工作量的。如何才能在跨平台移植的时候只做那些最有必要的工作呢?兵不打无准备之仗,先来看看iOS与Androi ... ...
-
榨干Chrome UI 2010-02-08 20:10
目前的我,已经成为Chrome的严重依赖用户,甚至U盘内也随身装着Chrome便携版。对我而言,它有着其他浏览器无法代替的杀手级优势:快速,稳定,完美支持Google所有在线服务;简洁到一塌糊涂的界面。 而其他浏览器,他们只在一些特殊需求中才会使用,如Firefox的AutoProxy翻墙,IE插件下的网银支付,Opera的turbo加速等。 用过Chrome的的人都有个习惯:就是 ... ...
-
界面的语言——图标与文案的二重奏 2012-10-06 12:06
文案在界面设计中的重要性不言而喻, 但如此重要的部分却仍然没有专属的职位不得不说有一些遗憾。今天特别结合自己这段时间的工作总结和之前编译过的一篇文章来谈一谈“文案”(Copy-writing)的重要性。 Facebook的“喜欢”和Google的“+1”间的区别咋看起来微不足道, 最终却足以影响到用户的行为和选择。使用合适的 ... ...
-
iOS的隐性导航设计 2011-10-03 12:26
移动设备阅读类软件最重要的特性之一就是尽可能的增大阅读面积,为此,就必须尽可能的让屏幕中的导航占到最小,甚至隐藏,手机浏览器也基本属于阅读类软件,最近流行的海豚浏览器甚至将电脑中的“鼠标手势”引入到手机浏览器中。 什么是隐性导航 下图是iOS中read it later软件的阅读界面,除了最上方的状态栏,阅读区域占满了整个屏幕,没有任何诸如“返 ... ...
-
根据用户的固有习惯来设计 2012-09-27 13:01
固有操作习惯的养成来自方方面面,其中最显著的就是那些来自最常规控件对用户的培养。在设计的过程中如果多考虑一下这些常规控件的使用习惯,会对可用性有所帮助。 想到之前优化好友选择器时的一个案例可以和大家分享一下: 原始版本 用户是这样使用的 1、点击“选择好友” ,发现展开的下拉菜单中有好友列表出现; 2、在好友列表中勾选需要的好友(如有需要做适当的反选操作); ... ...
-
用户界面设计10原则 2009-09-15 21:43
原文标题:10 User Interface Design Fundamentals 原文地址:http://carsonified.com/blog/design/10-user-interface-design-fundamentals/ 作者:Kyle Sollenberger 版权所有 翻译:UCDChina翻译小组,Roc 设计真正伟大的用户界面没有什么伟大的奥秘可言,做 ... ...
-
Axure之复用 2010-09-20 22:36
本文主要记录一下自己在使用axure软件做原型设计中的一些感悟。对于原型的制作而言我们需要的是一个能够快速设计高效传递的软件,对于原型的表现形式而言我们需要的是一个“中保真”原型,可以直观的表述交互与页面布局即可。 作为工具,首要的条件就是高效率。高效率的解决问题,高效率的传达,高效率的记录,等等。Axure之所以被称作“快速原型设计”就在于 ... ...
-
线框图、原型和视觉稿的区别 2012-08-03 09:16
本文为译稿 1,对三个常见概念进行了剖析。有删节,部分段落重组。 背景 两三年以前,我发现很多搞信息技术的朋友们(非设计师)交付设计时,用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 是一个东西:表达自己创意的线框手绘设计稿。 混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑。「这按钮他妈的怎么点 ... ...
-
关于Android引导画面的多分辨率适配 2012-08-19 13:14
本文并非关于引导画面该采用何种形式、该如何定义信息、有什么注意事项方面的介绍。 本文描述的是,引导画面该如何才能较好的适配各种分辨率,了解此处有助于更好的定义引导画面,以及保持同设计师、工程师的良好沟通。 作为产品人员,需要向不同方向延伸了解一些知识,这些知识能让沟通更顺畅。   ... ...
-
Axure之变量的使用 2010-10-14 15:18
写在最前面:任何工具都容易造成沉迷,Axure也一样;沉迷工具有害健康,过渡钻研Axure不利于职业发展! 本文主要想介绍一下什么是Axure中的变量(Variables),以及变量的使用场景,然后附加一个实例。 1、什么是变量 变量的全称应该是“中间变量”,变量用于在HTML原型中进行点击时的页面之间的传递和存储数据,这样变量能在页面之间保持下去。 ... ...
-
触屏手机网站设计 2011-05-06 10:14
随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website。触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计: 一、设备 ·分辨率与屏幕尺寸&mid ... ...
-
Android与iPhone界面布局对比 2010-07-27 23:05
上图是我根据Android和iPhone这两个平台的“生产内容型的应用程序”整理出来的界面布局示例。所对比的4个点,均是两大平台的应用程序常规界面元素。 状态栏:Android和iPhone的状态栏均在屏幕顶端的位置,原因无外乎是人的视觉流程是从上到下的。Android的状态栏,具有noti ... ...
-
差异入微——浅析电商购物流程设计 2012-09-16 10:22
畅游在各大电商网站的你,在网购时不知曾否察觉到有些小不同? 排开具体的商品内容、视觉样式,回忆下那些我们熟悉的商品页面… 当然,这里并不是玩大家来找茬游戏的,需要火眼金睛审视于细枝末叶。我们可以从界面的细节去体验,甚至还可以眯起眼去发现点什么。 亲,你有没有想起有哪里不同? 好吧,揭晓答案:不同点在于商品详情页面的购买按钮。 ... ...
-
一个文本框搞定信用卡相关信息的输入 2012-12-01 14:16
大家周四下午好。打破每周日上一篇译文的规矩,临时来一发。今天刚刚看到的东西,很简短的图文,介绍了一个蛮赞的交互模式,于是把拿来把译文做掉,特别推荐给交互设计师们。走你! 移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。 输入蒙板是一种限制内容格式、避免输 ... ...
-
信息架构中信息类粒化简谈(二) 2011-08-02 15:25
上一篇(信息架构中信息类粒化简谈(一))写的简单了,大家看了都没有什么感觉,好吧,我承认,我弱智了….今天写的希望大家能看上眼,哪怕一个白眼…. 说到信息架构,粒化能帮助我们较快的实现标签系统,大家知道标签系统与组织系统,搜索系统,导航系统共同组成信息架构,个人认为还要加上网站布局,因为布局本身就在指引用户的视觉并做操作引导。也算是信息架构的一个 ... ...
-
原型的构建与设计 2012-05-08 11:51
继续上一章的内容,那么怎么去组织页面元素,制作原型Demo;哪些表现层面是交互设计师该重点表达的内容,原型的制作又有哪些章法可循呢? Ⅰ. 什么是原型? 原型的概念说的简单直白些就是用户使用产品的界面模型,原型的设计主要包括三部分:①需求内容的呈现 ②导航和链接 ③数据的交换 ①需求内容的呈现 1)文本,多媒体内容的呈现 最基础的 ... ...
-
对于手势的一些思考 2012-11-20 16:02
Clear的出现引起了大家对手势操作的热忱, Google新专利采用“连续手势”也让我们看到了个性化手势的前景。确实,手势操作能够减少界面元素,提升效率;但其不可见性,抽象性,需记忆性等特点也决定了它的弊端。如何扬长避短,根据现有手势的特点在合适的情境中使用,同时根据文化约定、实物隐喻、表音、表意等发想创新手势,而非一味地追逐跟风,值得我们思考。本文结合了珊璞之前对客户端手 ... ...
-
大家一起来做情绪版 2008-11-11 23:10
06年Chris Moeller来华培训,让我第一次接触到情绪版,此后我对网页的视觉设计有了全新的认识。情绪版也是那次培训中我最感兴趣的部分。现在趁着碳酸饮料会这个机会,我将情绪版的资料整理了一下分享给大家。好,现在就让我们一起来和做一个情绪版吧!首先,在做之前先让我们来了解一下什么是情绪版。情绪版,英文为Moodboard,意为情绪收集版,是指对要设计的产品以及相关主题方向的的色彩,图片,影像或 ... ...
-
锦上添花——多个细节帮助你更优雅地书写页面 2012-11-28 21:46
我们常以“整齐”,“易读”,“亲切”,“易于维护”,“复用性强”等来形容一些优秀的开发者所写的代码。现在,对代码的好评还有一个更为时尚的词“优雅”,是不是听起来觉得很亲切呢? 页面是互联网产品的表现层面,不仅讲求外观,而且会应对更新迅速的互联网产品 ... ...