Blog

中英文字体的排版,除了要保证可读性,还需要让版面看起来更美观。所以无论是使用美术文本还是段落文本,都要处理好字与字、字与行、段与段、段与版面等之间的关系,才能让整个网页设计的排版变得更加出彩! ※ 关于罗马体/衬线体的使用 1. 选用合适的字体   罗马体在英文排版中使用很广泛,和中文搭配(如:宋体、仿宋等字体)也能很好地进行呼应。但罗马体也有很多可选的字体,所以在选择字体时,还需要看字形的笔画特征。 2. 抓住饰线的视觉特征 饰线的特征不同,搭配的中文字体也不同。比如同为旧式罗马饰线体,且搭配的中文字体相同。   左边「Constantia」看上去持重沉稳,与中文字体彼此的笔画特征较接近,收尾端口皆是略小的方口。右边「Cinzel Decorative」,看上去很优雅,具有古典风范,虽然与中文字体的笔画特征不太相似,但更容易给人留下印象。 3. 对比力量 在以上面的例子为例,「Cinzel Decorative」字体看上去纤细典雅,密度较小,但英文字腔较大,能中和仿宋中文部分的字体内部高密度问题,形成焦点以中文为主,英文为辅,相辅相成的视觉感受。   此外,「Cinzel Decorative」精致典雅的感觉又与仿宋的古朴感相对比,有种巧妙的混搭。但混搭不是乱搭,再举个例子,用「Abril Fatface」与仿宋搭配在一起,却有种不伦不类的感觉,因为它的现代感无法与仿宋的古朴感融为一体,加上本身字体的密度又高,以及和仿宋类似的黑素,让整体看起来没有焦点。 由此可见,中英文搭配不仅涉及到字体、字型的特征,还要兼顾到字体的黑度以及文字本身的结构。 ※ 关于无衬线体的使用 1. 与黑体搭配   如果说能与无衬线字体想协调的中文字体,首当其中肯定就是我们最常见的黑体字。作为中文界无衬线体之一的黑体,和英文无衬线字体搭配,能更有助于信息传达的直接性。 2. 考虑笔画特征的协调性   除了比较传统的黑体,其他黑体同样能无衬线体的英文搭配出不错的效果。但由于中文字体在黑体基础上有很多遍体,笔画上也有不同的表现,选择时还需要考虑笔画特征的协调性。 比如上面的案例,中文采用风格较明显的黑体字,字形整体以圆角矩形为基础框架,虽然英文也是使用无衬线体,但这里采用中黑粗的无衬线体会比细体更加明确,细体则略显中气不足。 3. 字体的音效   中文黑体字在设计中会产生一种类似“高声喊话”的视觉效果,而且笔画越粗,“声音”越大。英文无衬线体也有着现代性和直观性的特征,因此想要明确传达信息,使用无衬线体无疑是非常适合。 无衬线细体虽然传达的效果虽然没有那么迅捷,但却能表现出一种时尚现代感,尤其适合主张“轻”风格的设计中。 ※ 关于手写体的使用 除了以上介绍的比较正统的字体外,手写字体不仅能让画面变得更加活泼,手写痕迹还会增加更多趣味。   1. 感受书写的性格 “字如其人”,说的就是字能反映那个人的性格特点,而手写体就是有这样的独特魅力。 2. 突出书写独特表现 运用书写体时,尽量把它当作一种氛围装饰,而且一定是主角;否则就会埋没了手写体的特色,那倒不如不选用手写体。 3. 保持一个手写风格 如果画面中出现两种手写风格,会令画面看上去非常混乱。另外选用中文字体时,尽量不要选择性格不太突出的中性字体。 除了以上说到的字体大类,还有一些小类的英文字体,如哥特体,虽然风格迥异,在中国设计几乎用不上,但其独特的字形结构,非常适合独特风格的网页设计。

香港网页制作公司分享:阿里巴巴”(1688)APP改版策略 虽然产品改版会对网站SEO优化有一定的影响,但随着互联网和用户习惯的变化,产品改版不再单纯为了美观,而是为了让产品更满足互联网的发展和用户的需求,让产品能走得更远。产品怎样改版才算成功?下面,香港网页制作公司以“阿里巴巴”(1688)APP改版为例,和大家一起探讨下! “阿里巴巴”APP为何要改版? 原因一:满足新业务的需求 从曾经的信息平台过渡到交易平台,1688的平台阶段性战略有着很大的改变,向着数字营销平台逐渐转型,原来的内容框架难以承载业务的新发展。 原因二:提升分流质量 从过去的数据效果来看,For特色采购需求和服务大面采购需求需要平衡调优,提升首页的流量转化效能。 原因三:体验升级 手机原生系统风格不断升级,牵动着APP的变化和升级。 “阿里巴巴”APP如何改版? · 聚焦用户价值 升级内容框架   “阿里巴巴”APP在升级内容框架上,聚焦用户价值,把原有7.0版本的内容版块变得更具个性化,聚焦做商品的个性化,仅保留For用户的营销和内容场景,同时提升算法推荐区的曝光率,以此区域的商品做首页的直接转化。 · 弱化容器,突出内容 1. 视觉容器升级 “阿里巴巴”APP为内容腾出干净、简洁的视觉空间,其采取的方式:   1) 精简内容栅格,减少给用户阅读带来的负担;   2) 提高留白率,增加页面整体的透气性,为用户提供舒适的阅读空间;   3) 拉大字体大小梯度,加重字体颜色梯度,使文字的清晰度和可读性能得到提升。 2. 强调版块特性 “阿里巴巴”APP为了强调版块特性,主要做了以下的改版:   1) 强化搜索 APP 8.0版本并没有将搜索设计得很“显眼”,而是通过提升搜索关键词、热搜词精准度和吸引力、增加搜索布点等,让更多用户更高频地使用搜索。此外,为了APP还将搜索组件移到更易于点击、视线更聚焦的屏幕位置,方便用户单手操作时,也能在屏幕不同区域的点击。   2) Banner升级: APP 8.0版本的画面丰富度与7.0版本对比相对较低,描述字段也精简,让用户能在短时间内掌握全 Banner的信息。此外,相比于C类用户(Consumer),B类用户(Business)会更偏理性,用冷静、克制的“视觉语气”与B类用户对话,能给B类用户更好的印象。   3) For新人 以差异化的利益、个性化秒杀、新人攻略做用户的承接。   4) 营销场景心智差异化表达 突出两大热门区域(即伙拼爆品、天天特卖)最关键的特质,利用有创意的广告语做强化表达,吸引客人消费。   5) 内容场景改版 抽象出直播间的方形版面+内容叠加形式来设计,大坑位以动图传递给用户直播的动态感,利用多维实时轮播气泡传达直播的互动感、实时性。…

企业网站就好比一个美女,有些美女五官精致、身材高挑,肤色稍微有些许缺陷,就会让人觉得这个美女并不那么耐看。企业网站也一样,即使网页设计得再漂亮,如果色彩搭配有问题,就会影响整个网站的视觉效果。那么,企业网站设计该如何配色?下面,香港网页制作公司总结一下最简单易用的三个网页配色方法吧! 最简单易用的三个网页配色技巧 方法一:色不过三 网页设计运用单色设计,会显得单调乏味且没有重点;颜色太多,又会让界面显得十分凌乱,所以网页设计色彩搭配时,尽量控制在三种不同色相内,这不管是做平面、网页还是APP,都应该遵循的最简单道理。   58同城不管是产品Logo还是金刚区,使用的颜色都比较多,从识别度来看这是不错的选择,但界面颜色太多,会让用户觉得整个界面的视觉效果有点凌乱。 Vip kid则是采用统一的色彩风格作为导向,搭配邻近色为辅助色,从视觉上来看,界面设计非常舒适自然,而且还能增强用户对产品的记忆。 方法二:确定主色 每种颜色所代表的意义不同,导致整个视觉方向和感觉都会有所不同。所以好的色彩搭配不仅需要符合产品的特征,还要给用户带来想要的氛围。 因此,在确定网页设计的主色前,先做一些竞品分析,如对项目有明确的了解,分析主要针对的人群,明确产品的定位等,所以东西准备好后,就可以在选择合适的颜色做细微的调整。 网页的主色从何而来?最简单的方法就是提取Logo的颜色,这样就能确保网页和品牌在视觉上的一致性。   此外,网页设计、界面设计和Banner设计等在主色调运用的规律也是有所不同的,网页和界面会把主色调运用在结构和装饰上,Banner和海报则在视觉上的要求会比较高,除了将主色调运用在背景,突出重点,还要根据所推的产品和主题确定banner的颜色,选择范围要确保界面整体视觉效果协调统一。   最后提醒一句,无论确定哪种设计的主色调,再选择饱和度比较高的色彩做主色时,要考虑是否会影响用户使用或给用户造成视觉疲劳。 方法三:搭配辅助色 解决了主色调的问题,下面我们就来看看辅助色的选择。在色彩搭配中,能够达到平衡色主要有以下类型: 1. 互补色搭配   界面设计中,互补色的对比在视觉上是极为强烈的,能带给用户强烈的刺激。 音遇这种孟菲斯风格虽然在目前市场较为少见,但它的整体风格却能让用户一打开产品就能记住。 2. 冷暖色搭配 用冷暖色造成的视觉平衡是网页设计师常用到的方法,同时也是最容易出效果的方法。   这种颜色搭配虽然容易出效果,但使用的技巧也比较多,因此对网页设计师的要求也会比较高。 3. 深浅色搭配 设计时,单使用浅色会让界面不够稳定,但单使用深色又会显得界面沉闷,所以两者能互相搭配,就能很好地平衡画面。   如苹果产品图,浅色背景搭配深色产品,较多的空间留白,使页面整体稳定平衡,同时突出产品的主体。 在进行网页设计时,尽量遵循以上的方式来配色,这样网站自然就会变得更加耐看,如果你也有其他网页配色方案,不妨和我们一起分享吧!

网站设计如何诱导用户浏览?在网页设计中融入感情色彩,这并不是一件容易的事情,尤其是面对激烈的市场竞争,如果你的网站设计不是高人一等,那么你的网站可能就无法发挥最大效用。 网站设计想要诱导用户浏览,自然不能那么直白的诱惑,这只会让用户生厌,最好就是让用户在打开网页时,唤起某些记忆,引起某些联系,或者产生某些好奇心。具体怎样做?下面我们一起来看看。 网站设计如何诱导用户浏览? 技巧一:思考每个设计的作用 在网站设计中,无论是添加图片、色彩还是文字,都应该带有一定的目的性。选择这样要素时,要考虑这些到底给谁看的,究竟是谁决定。可能有些人说,是网站建设公司给的建议,又或者是老板喜欢这种风格,甚至是竞争对手是那样,所以“反其道而行之”等等。但无论出于哪种理由,都不能忽视用户的重要性。如果不站在用户角度考虑,任何天花乱坠的设计,都只不过是取悦少数人而已。 技巧二:有效突出重点 在界面设计中,很多设计师都会在导航里罗列一大堆内容,总觉得样样都有用,却突不出重点,用户看完后也只会觉得非常困难,甚至出现使用困难的情况。 极简主义风格一直是网页设计圈中最为流行的网站风格之一。现在互联网产品那么多,即使做一个近乎“完美”的网站,用户也未必会接受,只有把网页上一些功能弱化,分给其他产品,把最能发挥网站优势的功能留下,更重视网站的用户体验,这才是网站设计的发展趋势。 技巧三:去掉“官僚”味道 对于时下年轻用户而言,过于正规“官方”的网站设计,似乎并不那么感冒。就拿近期火爆的“故宫”而言,虽然其拥有几百年历史,且作为皇家生活的场所,有着“神圣而不可侵犯”的感觉。但“故宫”却走上不寻常之路,一改“皇家官方”形象,反而调皮地挑逗用户,引起无数人的关注和热捧。 当然,故宫的成功不是任何人都可复制,但是故宫的“互联网思维”却可以借鉴。在网站设计上,我们应该打破旧有的古板守旧风格,打造出活泼生动的网站,更好地与用户互动,而不是打着官腔,说着客套话,这只会让用户与网站产生距离感。 总之,网站设计的宗旨就是围绕用户来设计,重视网站的用户体验,这样才能让网站真正显示出水平。

任何一个新手设计师,刚开始接触设计时都会遇到一些设计雷区。尤其是做视觉决策时,总是不知道该怎样让网页设计再提升一个层次,让画面看起来更丰富。 网页制作公司支招网页设计技巧:如何让画面更丰富 · 利用字体颜色和粗细体现 很多设计师在排版时,总喜欢过分依赖字体大小来区分层级关系,但这样子往往会导致画面效果并不突出。 改变网页设计的字体颜色和粗细,避免元素看起来太过相似。增强字体间的对比关系,让它们看起来截然不同,用户才能更快地获取到重要信息。 · 减少使用线框 虽然线框是区分区域的好方法,但它不是唯一方法,使用太多线框还会让网页设计显得繁琐、复杂。 其实想区分区域,还有很多方法的,例如: 1) 使用阴影 阴影效果可以很好地概括区域元素,看起来更精致,同时不会分散网页重要信息的注意度。 2) 使用不同背景颜色 只需要为相邻区域提供不同的背景颜色,便可轻松区分它们。 3) 使用留白 把不同内容类型的区域距离拉得更开,不仅能很好地区分区域,还能让每个模块区域看起来更具有亲密性。 · 边框加颜色 感觉画面设计中的元素平淡无奇,给某些元素增加颜色,例如边框加一点颜色,看起来会变得生动许多。 · 图片不要太笨拙 把笨重的大图标缩小尺寸,尝试给图标加底色,让图标看起来大一些,同时让原本单调的图标变得更加丰富精致。 在一些常用的界面设计中,尽量让图标看起来小一点,颜色统一一点,最好是不要用颜色,因为有颜色的图标会影响用户的判断。 · 不需要每个按钮加颜色 控件设计是网页设计一个非常重要的部分,当需要激发用户的点击欲,可以将希望用户操作的按钮高亮起来,不希望用户操作的弱化下去即可,这就需要对按钮进行层级结构。 最希望用户按的:高亮,应该与背景形成强烈的对比度。 次重要的:应该设计清楚,但不需要突出,使用轮廓样式较低对比度的背景色色更好的选择。 三级控件:应该是可以让用户控件,但并不需要引人注目。 · 垂直阴影 做卡片设计时,使用淡淡的投影垂直偏移,能让画面看起来更自然,因为这样就像模拟了一个真实光效。 从上面的照射下来的效果,就像太阳从顶上照下来,使效果更真实自然。 · 不要将灰色字体放在彩色背景上 灰色字体放在白色背景上,效果还真的挺不错的。但如果把灰色字体放在彩色背景上,视觉感官上会少些亮眼的颜色,显得画面不干净,感觉有点脏,结果不尽人意。 使用彩色背景时,如何字体和背景更协调: 1. 降低白色字体的不透明度 把白色字体的不透明度降低,稍微让彩色背景渗透到白色字体中,能让文字看起来与背景更协调。 2. 挑选被背景颜色更亮眼的字体颜色 背景有淡淡的搭配元素时,降低白色文字不透明度,会使文本显得苍白无力。尝试将文本颜色改成与背景色相同的颜色,然后调整文字的饱和度与明度。 当然,学设计是一个持之以恒的事情,除了掌握一些网页设计技巧外,多练多看多想,才是学习设计最有效的方法。

网页设计师不仅要把插画、icon、动效做得美,还涉及了很多细节上的体验。尤其是动效设计,它能赋予静态图像的“生命”,帮助用户更好地理解如何更有效地使用产品。那么,APP设计中动效设计有哪些技巧呢? 提升产品体验感 APP设计中动效设计有哪些技巧 技巧一:反馈当前状态 颜色和图画都能引起用户的注意,为何还要添加动效设计?由于数十万年的自然习惯,我们对事物的“运动”特别敏感。此外,动效设计对视障人士更加友好,即使在纯色才非常突出的情况下,视障人士也是很难感知到错误提示的,但当用注意到抖动的动画时,他会立即意识到这个动作的意思。 技巧二:保持动作的关联性 正确的动效设计可以帮助用户理解方向,而不会感觉内容突然发生变化。以“京东”和“淘宝”为例: 京东使用的“投递动作”强调了商品加入购物车的过程,搭配“+1”的图标让用户的感知更加明显,即使没有文字,也能告诉用户已经成功把商品加入购物车中。 至于淘宝虽然使用了文字告诉用户,但是会延长用户对文字的理解过程。 技巧三:注意展现方式 受限于移动设备的尺寸限制,利用图片/文字在有限范围内的滚动,能展示更多的信息,但这种展现方式同样很容易出差错,以“天猫”为例: 天猫首页功能模块去中的“免费领水果”,是由3块内容共同组成的一条完整信息,用户只需阅读不需要选择。相比起纯文字的“免费领水果”,丰富的水果品类和更加突出的免费字样带来的刺激会更强烈。 但天猫超市中的动效设计会采取卡片运动不规律的方式,且每次进入后运动变化都不一样,加上每个卡片都是独立的分区信息,一旦用户错过了某个分区信息,就只能退出再重新进入。 技巧四:增加情绪的传递 除了功能型动效,动效设计还能利用情感化设计表现出来,增强某种情绪的感觉,向用户传递我们所想要表达的情绪。以“QQ”和“京东金融”对比: 京东金融的消息清除更像是一个功能按钮,除了消失的红点没有任何反馈;但QQ除了消失的“烟雾”效果之外,拖拽的感觉以及逐个消失的爽感,就像一个一个捏爆泡泡纸的,这种融入情感的动效让人感到非常愉悦。 技巧五:避免强烈的反差 如果两个页面之间反差过大,眼睛受到的刺激就会较大,可以利用动效设计有效避免这种强烈发差造成的不适感。以“片刻”和“QQ”为例: 片刻的夜间模式切换,并不是是很突兀的模式切换,利用动效营造了一个日出日落的场景,能缓和这种突然反差带来的刺激。相反,QQ的夜间模式切换显得反差太大,会令用户感到不适。 以往,网页设计师总以为动效就是为了让网页更加美观,事实上,每个动效都用其对应的目的,帮助用户更好理解产品的使用方式。好好利用动效设计,提生产品的体验感,这会让用户更加喜欢你的产品。

正在用QQ音乐的朋友,已经体验到全新的9.0版本了吧,大家觉得这版本怎么样呢?虽然QQ音乐的流量、资源和内容都非常丰富,但在之前8.0版本的视觉及体验都让网易云压过一头。可见,QQ音乐要更新版本已经成为大势所趋之事。那么,这次QQ音乐的9.0版本有什么特点呢?下面,就让香港网页制作公司和大家一起探讨下! ● APP设计の风格  打开QQ音乐9.0版本,首先看到的就是一套丝滑的动效,这让强迫症患者感到非常舒服。其次,本次QQ音乐版本提供了6种不同的皮肤主题,几乎什么风格都有,满足不同人群的需要。 ● APP设计の首页 本次QQ音乐版本在信息架构上发生了较大的变化,以往的顶部标签导航栏移到底部,底部音乐播放Bar的层级也逐渐削弱,现在更突出的是分类和模块,其实这也挺符合用户的心智模型。老版本太强调播放Bar,然而它并不是一个高频的操作,所以没有必要给这么高的优先级。 老版本为了避免冲突,顶部标签Tab导航和下方的推荐歌单等交互,不能用左右滑动的手势,会导致内容承载变少,这是比较遗憾的。相反,新版本可通过左右滑动或点击顶部分类切换相应的模块,还算挺方便的。因此,新版本的信息架构会更好些。 还有一些细节上的问题,老版本的页面卡片都是采用直角,但整体却没有形成统一的调性,比较尴尬。新版本则通用圆角,文字排列上看起比较整齐,一眼看过去感觉挺舒适的。此外,左上角的识曲功能图标,相信QQ音乐的UI设计师一定下了不少功夫,才设计出这么抽象但又让人一眼就看懂的图标。 总体来说,QQ新版本的首页去掉了头部大色块,使整体的视觉风格变得更加简约、时尚。 ● APP设计の个人中心 旧版本个人中心的顶部Tab Bar真的很占位置且不好用,将它移到底部,不仅腾出了更多位置,而且使整体界面卡片化的界面设计变得更加模块化。中部的图标从原来的两行变为一行,使彼此之间的关联性更加强。 文案方面也改变了很多,“任务中心”改为“活动中心”,副标题也从“今日听歌N分钟”改为“有福利”。很明显QQ音乐的文案策划终于知道,用户听歌并不是为了完成任务,而你给用户布置的任务也不一定会去做。文案上的改变,不仅让让用户更有参与感,也让用户更乐意去看一看并参与这一活动。 至于“活动中心”,旧版本说的是开通会员可享受千万专属曲库,新版本则告诉用户开通会员很便宜,而且还能更多优惠,这无疑给用户来说刺激更大。 ● APP设计の发现 QQ音乐新版本的发现版块依然是关于“流行动态”的信息,但从页面模块却改变很多。首先,旧版本的Banner设计真的很占位置,新版本则缩小了面积,使页面能承载更多内容。“歌手动态”四个字去掉,歌手图片也缩小了,且去掉了描边,显得更加简洁。推荐位置增加了Tab,方便用户挑选自己想关注的内容。 总体来说,发现版块整体都进行了简化和缩小,使整体信息展示变得更聚焦。 ● APP设计の整体体验 从整体体验来看,QQ音乐新版本的UI设计框架变得轻量化,信息呈现也更聚焦。设计风格和品牌调性的传达也比较和谐。但事实上,本次QQ音乐的UI设计和架构优化,其实并没有特别眼前一亮的感觉,只是与8.0版本相比要好上一大截。 现在几大音乐类APP都是以版权资源来圈用户,要想留住用户还是需要靠一些APP设计手段。香港网页制作公司认为,虽然本次QQ音乐9.0版本真正的亮点并不多,但设计上比以前更注重用户体验,其实也值得给个“Like”的。

网站设计主体不够凸显,会使得画面杂乱、缺少主次关系,甚至会影响视觉表达以及信息传达,使用户在浏览网站时,因为视觉没有着落点或画面缺少层次感,而找不到重点。那么凸显视觉主体的常用设计手法有哪些呢? 网页设计技巧:凸显视觉主体的常用设计手法 手法一:合理使用色块 使用色块的目的是为了打破主题与背景视觉冲突(融合)或营造视觉焦点。使用色块时,尽量在保证符合整体视觉的轻体下,做到让色块与主体、背景形成强烈的视觉发差。   修改前:整体色调偏重,产品颜色也属重色调,导致产品与背景相融,缺少视觉着落点。虽然画面采用重色调,但依然给人一种轻浮的感觉。   修改后:产品与文案出添加白底矩形色块,使整体的视觉着落点更加明显;尽管画面中的装饰性元素会稍微分散用户的视觉注意力,但用户最终还是会把注意力放在色块范围内,所以整体看起来并不会给人一种散乱、轻浮的感受。 手法二:运用对比 通过弱化周围视觉元素,并形成虚实对比,能起到很好的突出主体作用。使用对比手法时,能让主题成为画面中的特殊视觉点,营造视觉反差感。   修改前:产品与背景颜色相近,给人一种平缓、舒服的感觉。   修改后:产品与背景是对比色的搭配形式,在视觉上冲击力更强,主体更加明显,占有了绝对的视觉焦点。 手法三:使用肌理 使用肌理相对以上两种处理手法其表现形式会更柔和,能最大程度不破坏元作品的整体感。   肌理的使用一般多用在主题相对清晰但不够突出的时候,主要起到在原有的基础上进一步加强巩固,可以理解为“锦上添花”。当然不排除与产品或背景对比强烈的肌理,也能起到很明显的突出主题作用。这主要在工作中灵活运用即可。 手法四:留白 留白能在一定程度上,减少其他视觉元素对主题的干扰,间接提升主体在整个画面中的主导地位,从而起到突出主题的作用。   突出主体的手法并不局限这些,还有给主题添加光影、倒影、光效以及其他视觉效果等,各位在实际工作中可以灵活使用。但要记住,要想突出主体,画面中必须有强有弱,强弱并存才能巩固主体的地位。

在网站设计工作中,由于各种各样的原因,开发最终完成的视觉还原可能会离设计稿有一定的差距。毕竟与设计师相比,开发对很多视觉元素与间距没有那么敏感。因此设计走查不但可以快速帮助开发找出与设计稿得差异所在,而且还能给到开发细节与差异的调整方案与建议,完成最终产品的高质量交付。 如何做好设计走查的问题? 一、查信息层级 1. 页面表达的意思 在设计页面时,需要注意页面要传达给用户的重点信息。如下面案例:   首屏信息是给用户的第一印象,因此用户打开页面时,尽可能展现出更多用户感兴趣的内容。而此次页面需要突出的时优惠信息,次要信息则放在后面。 2. 页面视觉重点   屏幕尺寸间合理运用黄金比例(斐波那契数列,0.618),可让界面视觉重心更加平稳,视觉更加舒适。同时有助于界面区域分隔,集中视觉焦点,承载更重要的信息,让整个界面布局更加合理。 3. 元素间距符合各层级的关系 页面杂乱无章,其主要原因就是一味地堆砌,导致信息层级分布没有区别。想要页面清晰,有节奏的呼吸感,不妨尝试以下方式:   同类的板块不应被混乱的间距区隔开来,它们应该更集中,并且整体与别的板块区别开来。同理,不仅仅是板块,元素与元素之间也是如此,这样用户可以更加快速地看到自己想要的东西。 二、进行文字规范走查 1. 字体种类的控制   界面如果字体种类过多,就显得不统一且混乱。所以字体控制尽量在2-3种以内,中文字体、英文字体以及特殊数字字体。 2. 字号与粗细控制 字号过多会使信息失去重点,基础字号控制在3种以内,这样就能清晰区分信息的层级。   加粗字体往往是整个界面的视觉焦点,重点文本需加粗处理,注意控制字体加粗的使用,以免造成信息层级的混乱。 3. 行距控制   行距太小不便于阅读,太大就会显得松散,所以控制在1.2-1.5倍的范围是较为舒适的范围。 4. 字体颜色 字体颜色深浅有序能让信息层级主次分明,界面应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在界面中反复使用,统一规范输出。   一般来说,信息越重要,字体颜色越深。但选择字体颜色时,我们还需要注意产品的实际使用环境,这不仅要考虑室内使用环境,还需要考虑到特殊的室外强光环境。 三、通过设计规范走查图标 1. 视觉比例   由于图标通常都是成群结队出现,彼此间的统一性显得非常重要,却也是常常容易被忽略,可尝试使用图标盒子来规范尺寸。 2. 图标设计要点   设计图标时可重复使用基础形状进行设计,保持整体识别性,这样既能统一大小又有整体感。 3. 图标尺寸 在APP设计中,功能图标大致分成:可以点击的按钮和不可点击的展示图标。   · 可以点击的按钮:常用于导航栏、tab栏、操作栏,常用尺寸为:48x48px、64x64px。 · 不可点击的展示图标:常用于信息展示位置,用尺寸为:24x24px、32x32px。 4. 标签的走查规范…

用户界面就好比美女的样貌,美观的用户界面设计才能吸引用户的注意力,而实用性则是留住用户的秘密武器。但很多时候,我们明明都按照一些用户界面设计技巧来设计,但是感觉始终差少少,到底是什么原因造成的呢? 用户界面设计的7个小技巧 技巧一:凸显文字重要性并不是靠“大” 很多设计师为了提高文字的重要性,通常都会采取“大”字诀:   构成字体层次结构并不是单靠字体大小就可以,而是关乎字体正确大小、粗细和颜色的混合,创造对比,对比度越大越好。正确示范:   如何创建更好的对比度? 1. 不要单用不同字体大小来创建对比度和层次结构; 2. 主要内容使用粗体和深色样式,次要内容使用较小和较浅样式; 3. 创建三种不同颜色的文本; 4. 不要害怕在项目上应用大的字体间隙,通常间隙越大,对比度越好; 5. 对比度=字体大小+字体粗细+颜色。 技巧二:不要使用纯黑色 纯黑色文字颜色会给读者带来视觉疲劳,因此我们的解决方法就是,使用不同不透明度的黑色作为解决方案,而不是选择3个或更多十六进制颜色值:   技巧三:用加减法学颜色 大多数新手设计师并不擅长选择正确的颜色组合。想你的色彩搭配更加好,利用Hue,饱和度,亮度(HSB)上进行简单的加法和减法,就能发挥作用:   技巧四:使用间距分隔组 除了在两组间添加分隔线外,想分开页面的两组元素,使用间距分隔是一个更好更容易的解决方案。   技巧五:使用颜色分隔行 使用有差异且不那么明显的不同色块作为背景,既能保证整体整洁的,又能起到了区分的作用。因此想区分内容区块和层级,利用背景色区分绝对是一种优雅且毫不费力的设计技巧。   技巧六:使用品牌颜色作为强调 利用品牌颜色作为强调,起到画龙点睛的作用,用于一些需要重点突出的场景,强调交互的状态等,能加深页面的品牌调性。但使用品牌颜色作为强调时,尽量保持界面的整洁。   技巧七:注意对齐 设计列表时,将项目符号、标志符号或数字放在空白处,并对齐文字,这会让界面的可读性流不间断,更清晰。   用户界面不仅仅关乎实用性,美观同样很重要,因此想吸引用户的注意力,设计师应该实用性和美观性两手抓,才能将网站发挥到极致。

MENU
網頁設計公司