开云app官方

主页 > 洞察 > 设计沙龙 > UI界面设计
  • 网页设计,界面设计,原型设计的相关问题

    adinnet / 2021-04-16 10:45 /UI界面设计

    本文主要是简单描述了网页设计,界面设计,原型设计的相关问题,提供一些小编认知的非官方建议,给大家参考。

    一、界面设计

    人性化的界面设计应该猜测用户的行为,就跟好的秘书应该猜测老板的心理一样。说是猜测,实际上是根据大量用户行为数据总结的解决方案。

    1.猜测(实际上是总结)用户的行为,允许快速地操作

    (1)chrome的标签栏VSfirefox

    我使用Chrome作为默认浏览器的重要理由有两个都和其标签栏有关:一个是标签栏在顶部更加符合Fittz定律,另一个就是Chrome关闭多个标签的方式十分优雅。从一排标签的中间一个开始关闭时,左右的标签都会自动变换宽度,让关闭按钮跳到鼠标所在的位置。这对于经常打开数十个标签的用户是非常有帮助的。Chrome的设计,是基于“用户关闭一个tab的时候,很可能他还有其他的tab需要关闭”这个对用户行为的猜测来进行的。在firefox里面,关闭多个tab就变得很痛苦,在标签较多的情况下,每一次关闭都需要细微移动鼠标一段距离,这种精细肌肉运动是很容易让用户变累的。

    (2)Foursquare的加好友

    每次同意/不同意一个好友申请之后,这个申请向左侧滑动消失,同时下方的好友申请向上滑动,正好把同意/不同意按钮送到用户鼠标下,只需原地点击一次即可再次完成操作,省去了移动鼠标的时间,爽!相比之下,twitter在twitter里follow多个你的follower的操作就麻烦一些。Foursqaure的设计,是基于“用户批准一个好友申请时,很可能他会继续批准下一个好友申请”这个对用户行为的猜测来进行的。当然以上的对比取决于对用户操作习惯的理解。例如,有多大比例的用户会确认绝大多数的好友请求?对于我这个通过所有4sq好友请求的用户来说,这样是很方便的,但是对于 @yuancheng 这样有选择通过的人来说,foursquare的功能就可能造成误操作,特别是在网速比较慢的情况下,这个Ajax效果可能不够流畅,导致误点击。所以产品设计是具有其contextual性质的。不过从另一个方面来说,只要能提供方便的unfriend功能,我认为偶尔的误操作也是可以接受的。

    (3)搜索引擎打开首页就自动把焦点放到输入框,提交按钮响应回车。

    这个例子基本上所有的搜索引擎都是基于“用户来我这里最可能的是输入关键词进行搜索”来设计的。但是Google的Fade界面把这个猜测发挥到了极致,我相信Google敢于这么做,一是有大量的数据去支持,二也是因为Google足够出名,大部分用户都知道在Google的首页上其实还是有别的内容的吧。

    2. 猜测用户的行为,引入特殊的flow。

    当用户反复地做某事的时候,程序应该有足够的智能(或者说产品设计师有足够的考虑)去猜测用户想做什么。

    例子:QQ邮箱里面短时间多次点击“收信“按钮(似乎是3次),可以看到右侧出现一个对话框。想象一下用户正在等待收某份邮件,反复地点“收信“按钮,然后这个对话框恰到好处的出现的情景吧。

    untitled-2

    相比之下,我就希望校内能猜一下:

    untitled-3

    在每次确认好友申请的时候都会出现这个选择分组的对话框,但是这个对话框在功能上是可选的。当需要接受很多好友申请的时候,操作相当繁琐。其实如果在这里当用户数次添加好友时都不创建任何新分组的话,可以考虑添加一个“以后不显示该对话框“的选项嘛。

    总结:最偷懒的产品设计是什么都问用户如何进行(甚至还是以一个又一个javascript 对话框的形式),每一个猜测,或是根据数据,或是根据产品设计师的直觉,而猜测的结果,也应当是根据用户的反馈来进行调整修正。例如以上例子中的QQ邮箱案例,最初是有两个并排的link“报告问题”和“我知道了”,想必是这个“我知道了”在这个场景下变得有点莫名其妙,所以之后的设计将报告问题放入上下文,而把“我知道了“独立出来,作为“以后不再显示“的另一含义。

    二、原型设计

    根据Standish Group的“Chaos Chronicles Report ”,大约 66% 的软件开发项目不是失败,就是超出预算、超出项目时间,或是交付缩水的功能。

    项目失败或亏损的前三大原因为:

    (1)缺乏使用者的参与(2)需求或规格不完整(3)需求或规格变更

    一些需求管理工具或者上百页的文档已经不合时宜,不能作为开云app官方跟客户讨论交流的介质和核心。所以开云app官方需要制作原型,用来提高与客户沟通的效率、让客户参与到设计中来并且帮助他们找到核心需求。

    传说哥经常说,使用工具是人和动物的根本区别。有很多工具可以帮助开云app官方完成原型设计:纸和笔是最简单也是最常见的原型设计工具。与客户、与同事沟通的过程中,不用打断思路,随手拿起纸和笔,就能表达出开云app官方的心中所想。很撇托、很强大……

    原型需要帮我达到的目标有两个:(1)提高与客户沟通的效率,降低迭代周期(2)引导客户参与设计,找到他们的核心需求

    刚才介绍的原型制作的工具大多都能实现第一个目标,但是这些工具的输出物通常是一张png图片,对客户来说,它也就是一张图片而已,大多数客户很难透过这张图片去思考其中的逻辑。这个时候开云app官方的主角Axure RP就该出场了。

    通常开云app官方将原型设计分为两个阶段,“低保真原型”和“高保真原型设计”。“低保真原型”的作用是跟客户确认产品的需求和业务逻辑,所以低保真原型通常会很简陋,甚至开云app官方会故意做的很简陋,比如开云app官方会使用一些手绘风格的控件库,这样可以避免客户提出一些不合时宜的问题“高保真原型”会高度仿真产品的最终形态,是用于给客户验收的最终产物,另一方面也可以作为产品开发的标准。当开云app官方启动一个用户体验设计项目的时候,开云app官方第一项工作并不是原型设计,在之前还需要很多准备工作:在现场跟客户讨论,了解产品的业务逻辑,有条件的话还会对产品的直接用户进行一些访谈,了解用户的日常工作。紧接着回到公司内部,针对产品的信息架构进行团队头脑风暴,然后项目经理会整理出信息架构的脑图,脑图会作为成果物交给客户确认……在这一系列的准备工作之后,开云app官方才会开始制作产品的原型。

    按照我个人的习惯,在低保真设计之前我会用纸笔画一些草图,然后再根据草图制作原型。这样做的好处是,我能够最快的表达并验证自己的想法。

    三、网页设计

    关于传统节日315发的 Showcase Of Web Design In China: From Imitation To Innovation这篇采访,看到评论中有很多打了鸡血的中国同行,有两个问题我想请诸位搞清楚。第一,文中所引用列子不是因为作品多么出色,而是最能传达文章想表现的意思(具体什么意思自己想);第二,采访的几位设计师也不能完全代表中国同行,网页设计是个技术活,在不同层面有更深造诣的大有人在。

    另外想起段花絮,在回答有关“中国网页设计有什么特点?”问题时,我脑子跟过电似的快速搜索,死活就想不起来咱中国网页设计有什么特点,正好符合一句话“最大特点就是没有特点。”因为中国网页设计普遍很烂,烂得五花八门、烂的五毒俱全,不以抄袭为耻,反以借鉴为荣,所以没法归纳总结。同时,也说明目前的现状不成熟,没什么值得称道的东西。

    这个问题可以拉回到2005年11月,臭鱼总结的“长、闪、挤、花”四字特点一时传为佳话,得到各界人士的点头认可。可喜的是,到目前为止快过去5年了,除了“长”好像更长外,“闪、挤、花”都得到了一定程度改善。注意,原文写的是“网站首页”特点,而不是“网站”特点,很多转载、借鉴、抄袭不小心就把标题给省略了,首页只是网站的门面。

    元素不等于风格

    聊到本来 Smashing Magazine 准备写一篇亚洲设计,结果发现话题扯的太大,没法深入下去,于是才决定把中国、韩国、日本等几个国家独立出来。确实,虽然都属于整个东方文化的体系,但中文、韩文、日文三种网站却风格迥异,尤其日韩网站都有很鲜明的特征。比如韩国网站普遍用色大胆,Flash动画和图片利用率极高,手绘风格随处可见。而日本网站普遍清新淡雅,有着日本文化特有“灰蒙蒙”的感觉,偶尔使用像素和卡通风格。

    以前翻过不少帖子推荐的“中式网站”,总结起来有两个特点:动画扎眼,元素堆砌。所谓动画扎眼,几乎所有作品都是Flash完成,我看以“秀”目地居多而不是传达信息。所谓元素堆砌,几乎所有作品对“中式风格”的理解都停留在某些元素身上,比如书法国画、朱砂印章、丝绸竹简等等。我就纳闷了,难道表现风格非得以这种繁复的图形加上炫目的互动和好多个loading来完成么?我想“中式风格”的网站不应该是滴几滴墨、整几条龙这么简单。有着明显特征的韩式风格网站,好像也没见在页面上企图用“紫菜包饭、大长今”来表现,对吧?

    Web Design is 95% Typography 提到的观点认为“网页设计95%都是排版。”我理解原文有两层意思,其一排版是页面效果的决定性因素,其二几乎完全否定了视觉设计的重要性。这个定论正确与否,我认为要看前提,如果狭义理解“web design”为信息设计,排版占95%没错;如果广义考虑“web design”的用户体验,排版占95%不对。我仔细研究过不同语言的web页面好作品,发现真的好设计即使去掉颜色、图形修饰也不会差。如果抛开视觉表现,确实排版模式都差不多,技巧无非就那么几种,如对齐、留白、黄金分割之类。但是,各页面最终呈现的效果,却是“视觉设计”在主导,如同前文所述日文、韩文网站给我的印象。搞清楚这个问题,也许开云app官方在创新中文网页设计时才能有更好的思路。

    风格不等于设计

    这个问题思考再三,我觉得突破口还是在文字字符上。本来很好的英文界面,翻译为中文后就成了二流货色,难道真是“中文”有表现上的天生缺陷?难道开云app官方老祖宗千百年总结而成的书法艺术到了数字时代完全行不通?参考Angela在2006年9月小论中英文网站的设计差异所总结的观点:中文的行间距太小;中文缺乏一种起伏的节奏;中文的自动回行有重大缺陷。

    除此之外,因为适用的字体、字号、字形太少,相互组合搭配的效果较单一,所以很容易造成web页面的层次感不够,表现力欠缺。具体分三块阐述:

    字体,能够在浏览器里正常显示的中文字体就那么几个,当定义了系统里没有字体时,浏览器一律按照默认的“宋体”显示。此缺点从操作系统根本上被限制,无法与英文文字的效果对比抗衡。

    字号,英文大部分字体从8px到22px都有不错的美感。中文为了保证“方正”的造型,通常仅使用双数字号,比如最常用的12px和14px(用不用px单位的问题这里不讨论,少数字体的13px效果还行),因为这两种字号看起来最自然、协调。再往上16px,18px,20px也还行,但13px,17px类似的单数字号,可以看到效果明显的锯齿和失重感。

    字形,英文有斜体效果,HTML和CSS里都有专用语句进行定义。但是中文使用斜体的效果很不理想(中文字号够大的斜体效果会好一些),也许当初某些人定规范的时候,完全没有考虑非罗马文字国家的感受。比如学术论文的参考条目,好像国际规定必须用斜体。

    2006年8月我讨论过网页不需要漂亮这个极具争论性的话题,到现在为止,我困惑的还是对“中文”的理解,和对“中文”的设计。每次我看到中文被混搭(Mix and Match)到欧美风格模板、日韩风格模板网站上时,都会再反思这个问题。中文是中国网页设计的灵魂,我想事实应该如此。说了这么多问题和不是,有没有没办法解决?答案是有办法。中国网页设计师尝试近十年,积累了不少经验教训。大环境近来国际标准组织的推动,加上“微软雅黑”字体的革命性进步,以及本土公司企业的重视,我相信中国网页设计将逐渐、真正形成自己的特点。


上一篇:网站设计;国内网站开发的形式 下一篇:手机APP设计:APP UI界面设计基本原则和技巧分享
开云app官方 XML 地图