1. <blockquote id="zkcfw"></blockquote>
  2. <nav id="zkcfw"></nav>

    专业的关键词排名优化公司

    网站页面UI设计怎么做?

    浏览:/ 2017-11-02

    反馈在我们制定设计规范时经常会被忽视,但它的存在实际上有效的梳理了产品的整个交互流程。交互设计其实可以看成是设计人与物(App或网站)之间的对话。如果没有任何反馈,就相当于聊天时的你滔滔不绝,但对方却一言不发,两人之间毫无互动。从产品的角度而言,如果没有反馈,?#27809;?#21017;无法得知当下发生了什么,也无从确定自己操作的结果,更不必提要进行下一步的操作。所以说无反馈,不交互。

    良好的交互设计应该确保?#27809;?#30340;每一次操作都能得到视觉反馈,无论成功与否,这会让?#27809;?#20307;会到使用产品期间的一种安全感——一切尽在自己的掌控之中。视觉反馈的目的就是通过一种可视化、简洁的形式向?#27809;?#23637;示操作的结果以及当前系统所处的状态。


    我们在手机上进行点击、滑动等操作时,按钮、控件和其他交互元素通过改变自身形态做出响应,为我们提供反馈。这种反馈模式会拉近?#27809;?#19982;产品之间的距离,因为?#27809;?#21487;以容易的感受到自己在同?#32842;?#20013;的元素进行直接真实的互动。


    功能性动画可以让?#27809;?#21450;时获知状态的变更。


    加载动画向?#27809;?#23637;示系统的实时状态,使?#27809;?#33021;够快速了解目前发生了什么。

    微文案

    微文案是指引?#21152;没?#25805;作的小段文字,在App和网站中,微文案的应用包括按钮上的标签,错误提醒和提示文字。在使用过程中,?#27809;?#20027;要注意力可能都在页面的排版布局和配色上,这些微文案的存在似乎并不显眼。但如果恰当的使用微文案,这将会给产?#21453;?#26469;魔法般的效果。以下就是微文案如何给设计添彩的具体实例。

    人性化表达

    我们一直提倡做一款减少机械感却有温度的产品。如果微文案的使用可以借朋友之间对话的口吻,这会在无意间提升产品的?#27809;?#21451;好度。拉近与?#27809;?#20043;间的距离,让?#27809;?#26356;容易信任这款产品。


    安慰

    微文案中的报错提示会极大的影响?#27809;?#23545;于该产品的友好度,但我们却常常忽视它存在的重要性。

    ?#27809;?#20351;用App或者网站?#38469;?#20026;了解决特定需求的。例如想买一件衣服,看一场球赛直播或者是查看明天的天气情况。一旦出现系统错误导致进程受阻,这将给?#27809;?#24102;来沮丧和焦虑情绪,使?#27809;?#22833;去继续使用App或者网站的耐心。此时微文案的作用就可以凸显出来。

    系统报错时极易引起?#27809;?#19981;适的心情,措辞不当的文案则可能直接让?#27809;?#25235;狂。


    上面这个报错提示可以说是一个反面典型,An error occurred(出错啦)这句模棱两可的话很难让?#27809;?#20449;服。报错?到底报什么错了,为什么会报错,我接下?#20174;?#35813;怎么做?

    从另一个角?#20154;担?#22312;系统报错的时候,良好的微文案使用会起到安抚?#27809;?#30340;作用,让?#27809;?#22312;遇到问题时可以坦然面对。


    报错提示在做到准确友好的同时,还要告诉?#27809;?#35299;决方案。

    缓解?#27809;?#36127;面情绪

    微文案的使用要考虑具体场景,因为微文案本身即为引导性文字,它就是为解决?#27809;?#24515;中的疑惑而存在。例如在支付宝的支付设置页面中,我们可以在页面底部看到“账户安全保障中”的文案。因为涉及到金钱交易时,?#27809;Ф际?#26497;其慎重的,所以支付宝通过细节,竭力来提升?#27809;?#20351;用期间的安全感。这里微文案的使用就是通过强调资金的安全性来消除?#27809;?#20869;心的?#35805;病?/p>


    留白

    留白(或负空间)是指页面中设计师没有放置任何元素的区域。留白不代表一定要使用?#21672;?#32780;是预留出一定空间来组织页面空间中的其余元素。虽然很多人认为留?#29366;看?#23646;于浪费宝贵的空间,但不可否认留白依旧是UI设计中的一个重要元素。

    提升页面可读性

    页面中展示过多的信息会增加?#27809;?#38405;览的?#35759;取?#23545;于?#20999;?#35273;得页面就应该塞得满满当当的客户,我们给他们看下面这个图。


    对于?#27809;В?#26434;乱的排版不存在任何吸引力,尤其是当前页面没有任何的层级结构,?#27809;?#26356;是毫无阅读兴趣。

    使用留白主要是受限于人类短暂的记忆力,我们的短期记忆可以容纳的信息极少(在未经?#35789;?#30340;条件下,大部分信息在短期记忆中保持的时间很短,通常在5-20秒,最长不超过1分钟)。?#27809;?#30475;到一个页面,如果里面展示的信息过多,?#27809;?#23601;会处理?#36824;?#26469;。使用留白就可以减少当前页面中元素的数目,提升页面的可读性。


    △ Medium通过合理的留白应用提升了文字和?#35745;?#30340;可读性

    吸引?#27809;?#27880;意力

    ?#27809;?#30340;注意力是宝贵的资源,应该得到合理的分配。我遇到过很多客户,他们说这里要使?#20040;?#32418;色突出,那里要放大字体吸引?#27809;?#27880;意。在他们的设想中,页面里的任?#25105;?#20010;元素都要强调出来,但是殊不知页面中视觉重点有且只有一个,过多的给予对于?#27809;?#26469;说其实是一种负担。少?#35789;?#22810;,这是互联网时代的信条。


    谷歌搜索的网站出现了大面积的留白,?#27809;?#30340;目光自然就会被吸引到搜索框。这和谷歌的初衷相契合,他们希望?#27809;?#22312;这个页面完成搜索操作,所以不用展示过多其他的信息来分散?#27809;?#30340;注意力。

    建立层级关系

    根据交互设计中的接近法则:当对象之间距离太近时,?#27809;?#28508;意识中会认为它们是相似的。我们可以通过使用留白来建立不同元素之间的层级关系。例如,下图中几乎每一个人都会看到两组点,而不是16个点。


    对信息进行整合分组会提升内容的可读性。下图中右表格将15个字段分成3组。同样数量的内容,但?#27809;?#30340;印象却大不相同。


    总结

    用心做设计,哪怕最小的细节也应?#27809;?#24471;我们足够的重视,因为设计是互联互通环环相扣的。

    阅读"网站页面UI设计怎么做?"的人还阅读

    上一篇:关键词优化如何排名上首页?

    下一篇:优化方案合同怎么写?

    11选五