浅谈购物类网站如何保持视觉设计的一致性

在设计中保持一致性(uniformity)是网页设计中一个重要的组成部分,它能使你的设计有效地传达信息而不会导致用户迷惑或焦虑。保证一致性的一个有效方法是撰写正式的“设计风格标准”文档,也就是俗称的视觉规范。这一文档规定了一个产品或系列产品的图形用户界面设计中都必须遵守的设计准则。遵守这些准则将视觉元素保持大小一致的尺寸,有助于你的需要的时候更容易地将这些元素组合成一个新的设计。
由于网站有时候是被临时或各自独立建立起来的,它们的视觉设计的一致性已经被折腾得千疮百孔了,一般有以下两个问题:
(1)内部一致性的问题。也就是说,在网站的两个不同的地方反映了不同的设计方法。
(2)外部一致性的问题。这是说,在同一个公司的不同产品中反映出不同的设计方法。
在这里我们主要探讨这个主题的一个方面,即购物类网站中同一个产品或主题页面的内部一致性的问题。解决“内部一致性”的问题是建立在对网站框架的深刻理解上的。首先确定有可能在网站的各个界面、导航、信息设计等不同环境中可能反复出现的设计元素,然后试着独立的设计这些元素,然后将整个设计方案应用到整个网站中去,在需要的时候再进行适当的调整。
但这仅仅是第一步,你会发现即使做到了这一点,这个页面仍旧可能凌乱无比,我们可以先看看这个例子:

wow.alipay.com/overseas

这是哇!支付宝海外购频道最新上线的首页,导航、按钮及其他设计元素都已经过统一规范,我的任务是再将它休整的整齐一些。
鉴于韩国购物网站及设计业一发不可收拾的发展史,我搜寻了各大韩国购物网站,我们来看看他们是怎么做到的:

整齐划一的广告位

Mall.epost.go.kr

Kosney.co.kr

storyshop.kr

同一主题的视觉统一

Mall.epost.go.kr

storyshop.kr

制作精良的商品图片

dcx

于是我将海外购这一页面的所有图片广告全部替换,从一开始找类似尺寸的广告到最后自己做,便产生了这一结果:

收集意见,有没有觉得整齐一些?

相关话题:视觉设计的一些方法 源地址:http://ued.alipay.com/?p=1002

Today 08:33 PM | by 夏墨

iPhone 开发者的新困扰:应用抄袭

【本文摘译自:Ars Technica ,作者:Chris Foresman,原文在此

copycat_intro_2

通过增加应用分类排行榜,苹果基本解决了曾经困扰开发者的 App Store 应用展示席位不足的问题。传闻称苹果将设立高价软件专区,这有可能进一步解决App Store 的应用价格水平过低的问题。不过,一些 iPhone 应用开发者又遇到了新的困扰,而且苹果也不容易解决好。

个别 iPhone 应用开发者不去思考原创的 iPhone 应用创意来源,而是直接抄袭 App Store 里现有的应用程序,直接把别人的创意拿来,制作一个十分类似的应用然后放在 App Store 销售。

因为目前苹果对 App Store 的审批程序还无法明显区分并抓住抄袭者的应用,所以原创应用的开发者经常会发现,当他们的原创应用发布之后不久,突然间会冒出许多个几乎完全类似的应用。

有些抄袭还不仅限于抄袭概念或操作过程,连原创应用的 UI 界面都直接复制,甚至连产品描述、应用图标和名字都直接复制,或者仅做一点点细微的改动。抄袭者可以直接进入原创应用的 .ipa 程序包,将其美术界面等复制出来供自己使用。比如上图中右边的 Touch Scan Pro 与左边的 TouchScan 几乎没有任何区别,只不过将颜色由绿色改成蓝色。上个月也出现过类似的问题,一个名为Classics 的电子书阅读器在发布后,它的 UI 界面完全被另一本应用电子书完整复制。

某些情况下,抄袭的应用是被抄袭的付费应用的免费版。比如Copter Free的开发者在他的应用描述里写道:“如果你喜欢 iCopter ,那么你也会喜欢免费的 Copter 。” 甚至还有与之对应的另一种情况,开发者抄袭一个免费应用,然后把它做成付费版—— Medical Calculator 售价 0.99 美元,而它抄袭的是免费的且开源的 MedCalc ,连应用的文字描述都完全抄袭后者。   

app_store_copycat_2

(上图右边的是 Copter Free,之前的名字是 iCopter Free ,仅仅对原创的iCopter 做了一点点改变。)

一位名叫 Zen Ho 的开发者表示,苹果对该问题的回复不能让人满意。苹果称“尊重他人的知识产权,或许他们唯一能够考虑的方向是,终止侵犯其他开发者知识产权的开发者的账户。”该开发者要求苹果移除 App Store 里抄袭的应用,但苹果表示,被抄袭的开发者徐自己通过法律途径解决。

源地址:http://apple4.us/2009/03/copycats-causing-problems-for-iphone-app-developers.html

Today 08:33 PM | by 胡维

多点触控技术的战争

【本文摘译自:Wired ,作者:Daniel Roth ,原文在此

Multi-Touch

今年 1 月份在拉斯维加斯的 CES 消费电子展上,Palm 亮出了一款外形光滑圆润的 Pre 。漂亮的外形或许在为 Pre 加分,但真正让行业惊叹的恐怕还是 Pre 采用了与 iPhone 十分相似的多点触控技术。虽然 Pre 也内置了滑盖物理键盘,但除了文字输入之外的大部分时间,人们只是不停地用手指在屏幕上触摸,让魔术发生:弹出一个新窗口、在多个网页间切换浏览、把联系人列表拖放到触摸屏幕的低端。Pre 的手势触控操作是直觉式的,充满乐趣,基本上是复制了苹果的 iPhone 。

两周之后,苹果的首席运营官提姆·库克(Tim Cook) 在苹果的业绩报告会议上对分析师们表达了他的不满(虽然他没有直接点名是 Palm ):“我们不会容忍我们的核心技术就这样被偷窃,我们会使用任何我们拥有的武器是去处理这种行为。对于这一点,我们非常明确。”

起初还是口角之争,但很快就演变成为苹果和其他科技公司之间的生死角逐。苹果、诺基亚、惠普,还有其他公司,他们在各自的专利文件中用语言描述他们的专利动作:用拇指和食指缩小、放大,一根手指轻弹点击、上下垂直滚动。

基于手势的计算正在成为主流,同时,关于如何操控这个新的数字世界的手势和动作定义权的争夺也已经开始。但这本身就是一个丑陋的——甚至是具有潜在毁灭性的动作。

自个人电脑诞生以来,很多电脑公司都试图找到抛弃键盘的办法。他们置摩尔定律于不顾,勉强设计出与计算能力日益强大机器不相协调的输入设备。早期的触控输入设备都十分笨拙,而且漏洞百出,比如强迫用户学习新的涂鸦笔迹输入语言,或者输入十分困难的平板 PC 。最终,我们还是迷恋于键盘和鼠标,control-X(剪切)、control-S(保存),还有双击,都如此方便。但随着 Wii 和 iPhone 的到来,突然之间手势操控的纪元已经开启。

随着传感器的价格越来越便宜,手势操控已经无处不在。每个人都有了自己的杀手级动作。比如,宏达(HTC)最近推出的 Touch Pro2 ,开启扬声器只需要轻轻点击屏幕表面,然后将设备平放即可。而诺基亚提供的则是,用手指在屏幕前晃一晃即可开启某一项功能。虽然目前只有 5% 的手机拥有触控屏幕,但市场研究机构 StrategyAnalytics 预测,到 2013 年这一数字将增长到大约 30% 。

同样,在个人电脑市场,那些不顾一切追求增长的电脑厂商们的眼里,基于手势操作的个人电脑就是一个救世主。惠普认为这种电脑非常适合第三世界的国家,因为当地有很多地方语种无法在标准键盘上输入。

惠普的印度团队刚刚完成了一次第三世界的旅行,期间惠普的工程师们把主要时间都拿来观察当地的人们在生活中的手势和触摸动作,希望能够将这些观察的收获融合到他们新的产品中去。微软也把触控操作做为 Windows 7 的一项重要功能。他们的研究人员发现,当人们通过触觉与设备交互时,人们更倾向于觉得设备具有类人性——这意味着他们愿意花更多的时间与设备打交道。“在一项可用性测试中,我们发现人们会对设备产生恋恋不舍的感觉,”微软的 Windows 用户界面工程师 Ian LeGrow 表示:“在测试结束后,人们还希望继续与设备接触。”

但研究同样也显示,如果设备的手势操控不够直觉,人们也更容易放弃这款设备。键盘的优势在于,大家都很熟悉它。一个用户从 PC 转换到 Mac ,无需重新学习打字。同样,在多点触控技术方面,对于动作标准的定义也非常重要。毕竟,键盘上的按钮总是在那儿。但当接触到一个新的触控设备,如果没有视觉提示,用户会觉得难以使用,甚至绝望。“必须要让人们直觉化地理解,”诺基亚的研究员 Roope Takala 说:“否则的话,在三两下尝试之后如果还没成功,他们就会放弃。”

最终,无论是在法庭内还是庭外, Palm 和苹果都会就如何分享多点触控技术达成协议。但在手势语言方面,必须要采用一个通用的标准。否则的话,用户只会对这些设备用一个手势:竖起一根手指。

源地址:http://apple4.us/2009/03/the-battle-over-multitouch-tech-is-on.html

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: