深圳网站建设

| 专注于网站设计与营销型网站建设与优化

手机:186 755 66828

建站热线:0755-3355 6286

网站制作设计 >> 网站制作动态 >> 响应式网站设计移动页面设计中如何运用文字

响应式网站设计移动页面设计中如何运用文字2017.05.16

文章来源:牧羊人网站设计文章分类:网站设计

响应式网站设计移动页面设计中如何运用文字

响应式网站设计移动页面设计中如何运用文字
深圳网站设计中如何运用文字,深圳响应式网站建设公司,响应式网站设计,移动页面设计应注意的几点问题

网站设计中如何运用文字
设计师们在设计网页时,通常会为表达某种情感而选择字体。可以说,除了需要表达文字内容本身之外,设计师在选择一款字体时还应该考虑这款字体是否能与其他设计元素及布局相融合,同时加深网页上的人或事物的特点。深圳网站建设深圳网站建设觉得随着更多企业越来越“接地气”,他们开始注重与用户的互动与交流,增强用户的参与感,因此对话式的网站快速受到用户欢迎。这一趋势无形中要求设计师们需要加强对文字性格的把握,以更好的设计实现与用户的“对话”。

正如大家常听到一句话“字如其人”,在看到一种字体后,人们会下意识联想到某种人物形象、性格或感受,比如沉稳、柔美、活泼、可爱、平和等。

1.客观、正式、官方的、通用的


基本上看到这几个描述词,大家肯定知道描述的是什么字体了。没错,说的正是宋体。宋体是与印刷术同龄的出版字体,这种最普通的字体在报刊杂志中常用。在网页设计中,宋体也可以在很多地方使用,非常适合用于大段文字的版块。

响应式网站设计移动页面设计中如何运用文字

2.清秀、方正俊雅、真实可靠


有物电商平台的banner图中采用了楷体和微软雅黑两种字体,大字使用的楷体是汉字主要书体,看起来工整规范、干净利落,给人方正俊雅的感觉,这段文字与图片表达的“手工感”相融合,共同传达出一种认真和质朴的精神。


从文字的整体结构来看,楷体带有一种书卷味,可以考虑在教育行业的网站上适当采用。


3.强壮、坚韧、压迫、震撼、充满力量感


给人这种感受的字体一般笔画浑厚、浓重,很多情况下采用粗体或加粗的大号文字,在视觉上面积加重,给人一种强壮、震撼的感觉。比如下面阿迪达斯采用的这款蒙纳简粗雅丽体,在网页上占据的位置非常显眼。


下面案例中节目的Logo位于官网首页,采用了一款纯直线字体,显得硬朗、笔直、棱角分明,给人一种坚决的态度。

 

还有李宁官网图片中使用的字体,笔画粗细均衡,规律一致,充满了坚韧。

 

NBA官网和国际飞镖公开赛网站则是采用了微软雅黑字体,加粗的大号的字体略带倾斜,内容标题也同样采用了加粗的微软雅黑。微软雅黑加粗后的视觉效果虽然不像上面几个案例的字体那么强势,但我们依然能在视觉上获得类似“隆重、这是比赛”的感受。

 

4.细致优雅、纤细、柔美、婉转、流畅、精致


给人这种感受的字体一般笔画纤细,婉转流畅,具有曲线美,很多情况下会采用末梢曲线优美的衬线字体。


上文提到让人感觉正式的宋体就是一款衬线字体,在适当的元素搭配中,宋体也能展现出典雅的一面,给人优雅的感觉。比如下面Tiffany的官方网站。

 

这类字体一般呈现出纤细柔软的特征,适合应用于珠宝、化妆品、珠宝首饰,以及面向女性用户群体的产品等。另外像红酒、餐厅、手工艺品牌、精选类品牌、奢侈品等也会使用这类字体。有一点不得不说,其实很多品牌在中国区的官网上使用了特殊的自定义字体,但由于浏览器无法识别,浏览器最终以默认的宋体进行渲染,这时的视觉效果可能就不那么美好了。


5.活泼、可爱、有趣


给人这种感受的字体一般字体末梢圆润,看起来圆乎乎的,显得稚趣、可爱。比如喜宝HiPP官网采用的圆体。

还有帮宝适采用的幼圆字体。

 

给人这种感受的字体主要适用于趣味游戏、婴幼儿产品、游乐场、玩具等。另外,像柔软舒适的产品也会选用这类字体,比如某些家居用品等。


6.平和、干净、简单、平静


这类字体一般采用无衬线字体,链接衬线和字干的字弧被去除,字体看起来干脆利落,比如苹果官网的PingHei字体。


魅族官网的方正悠黑字体。

响应式网站设计移动页面设计中如何运用文字
这类字体主要适用于科技行业,包括平台、电脑手机产品等,同样也适用于现代感的产品、简洁风格的产品等。


7.古典、中国风


柒牌采用的行书字体行云流水,形态优美,带着浓浓的中国特色,更好地表达了其品牌所传达的理念。

 

此外,很多字体还能给人其他感受,比如费列罗官网的这款字体让人有一种愉悦、温暖的感觉。加粗的微软雅黑字体在以下案例中让人感到专业、可靠。黑体看起来刚健、踏实,在建筑行业、机械行业、房地产行业网站上展现出一种专业感。深圳网站建设深圳网站建设觉得看到这么多案例后,相信大家已经对字体性格有了基本了解,本篇关于文字性格的介绍就先到这里。了解这些基本的知识后,大家可以进一步学习,根据对不同字体结构、笔画弧度等元素进行判断,在不同场景下合理应用字体,最终能通过文字性格的展现让自己网页设计更有活力。

 


深圳响应式网站建设公司,响应式网站设计

响应式网站概念
      响应式概念:   

伊桑·马科特在2010年首次提出了响应式网页设计(RWD, Responsive Web Design)的概念。(当时能提出这个概念是很不简单的哦) 他根据工程师在处理不同屏幕分辨率的网页内容展现的效果的时候常用的技巧和策略,创造性的进行了归纳总结。简而言之是指网页根据屏幕宽度,做出相应调整的,力求能够达到在不同的设备下,内容都能以最合适的方式展现给用户。   


响应式网站建设

响应式原理:在CSS中,有一个不常用到的属性media。为了达到响应式设计的目的,让css根据屏幕宽度(例如 media screen only @(max-width:480px)),使用不同的CSS代码,从而达到自动调整页面DIV宽度的目的。当然,除了CSS,还可以使用JS对页面内容进行动态的调整,不过这个技术不是很流行。  


响应式价值:随着越来越多的智能移动设备( 手机,平板 )加入到互联网中来,互联网上的访问设备是爆炸性的增长(屏幕的分辨率也是爆炸性的增长)。为了给手机和平板设备提供更好的体验,必须在网站设计中使用响应式网站设计,并且整合从PC端到手机的各种屏幕尺寸和分辨率,用技术来使网页自动适应不同分辨率的屏幕。  


总结:响应式网站设计,为计算机、手机、平板电脑等不同设备的访问用户了提供更加舒适的界面和更好的用户体验(和速度),而且随着目前移动设备的增长,已成为大势所趋。如果一个网站不支持响应式设计,那么就已经可以说不是很符合潮流了。


移动页面设计应注意的几点问题
 在移动应用界面设计(后续简称:移动设计)的世界里,大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的应用带来的效果更好,而有时候却恰恰相反。不过,有些基本规则是人们不愿意去打破的。如果你的移动设计使得用户无法顺利触达关键功能,这显然是行不通的。假使你的文字字号过小导致没人能顺利完成阅读,那么你得回炉重做。


Alyssa Burke与Macy Nguyen是AKTA(一个数字体验咨询公司)的设计师,俩人都曾为财富500强的公司以及迅速增长的创业公司效力,参与过原生移动设计项目,为某些机构的顶级项目贡献设计输出。以下是他们认为无法接受的移动设计7宗罪:(深圳网站设计觉得这七条非常容易让大家犯错,看看你是不是也会这样)


1、忽略上下文情境

目标用户的个人档案(年龄、生活习惯、技术潜能等)与他们的物理环境(室内室外,在线离线,早晨晚上等)会影响许多设计决策。移动设计师应该在迭代流程中 充分考虑上下文因素,以降低可用性不足的风险。即使拥有平滑的过渡转场、光滑的按钮和美丽的字体,一些应用也会因为整体界面设计不符合特定用户场景(深色 界面用于户外场景:糟糕的移动设计)而失去成名机会。


2、闭门造车

设计和开发数字产品是一项需要团队协作的工作。即使有项目成员(开发、新人、极客、狂热者、朋友、陌生人、你的哥们儿和设计师潮人)对具体项目内容完全不 了解,将设计工作及早并及时推广到整个项目周期中的不同角色之间也是非常关键的。我们需要让他们了解到必要的上下文信息,并持续保持相关信息互通。与其在 发布后修复问题,不如在项目进程早期预留调整空间。


3、怠慢开发人员

程序员和工程师(以及偶尔酗酒的码农)不仅是你的同伴,而且是技术先导。他们除了知道哪些能够在现实中奏效之外,还能够如你设想的那般确保你的想法得到完 美落地。有些移动设计在技术上行不通,有些或许可行,但这些都需要很多努力或时间在项目中验证。如果不问你或许永远无法确定能否做到。在项目交付时,开发 人员会把你的设计成果实现出来,此刻,他们可能很欣赏你,也可能很讨厌你。


4、低估动效设计

随着物联网逐步成熟,数字界面在人们与周围真实世界的互动中扮演了更重要的角色,界面设计的这一部分需要被设计师更加慎重的对待。人类拥有与生而来的本 能,从所处环境的变化中得到不同的感知与反应。使用合理的界面动效是一种呈现优先级和重要内容的有效方式。在某些情形下的恰当运用,甚至能够引发用户的愉 悦。有兴趣的读者可以了解下迪斯尼动画的12项基本法则。


5、字号太小

比起纸质内容,人们在手机屏幕上进行阅读的精确度和深入度略有不足。正如移动设计拇指触控规则所定义,数字界面的字号最少应该两倍于印刷字号。不同情形适 用不同的字体和设置,尤其当用户试图在移动设备上完成多类任务时。为了避免字号太小,还需要优先考虑按钮形状、图片及交互等界面元素对整体体验有何影响。


6、忽略触控目标

许多移动设计师仍然对用户手指大小不同的现状缺乏重视。一旦涉及行动或者任务导向的触控目标,尽可能的使它简单而且容易点击。为老人设计时要考虑触控时的 抖动因素,同样为儿童设计时需要考虑点击的不准确性。深圳网站设计建议为图形资源周围增加留白区域,以便本质上提升触控面积,帮助提升完成任务的速度。


7、死抠平台规范

在Android和iOS平台上统一一套设计方案有一定局限性,也容易对全局体验目标带来副作用。两个平台上有各自用户熟悉的设计模式,设计师不应该只熟悉规范,而应该探索在两个平台上流行的应用。

上一篇: 网站建设如何抓到用户心理
下一篇: 企业移动网站建设关键词选取策略原则

文章分类

牧羊人网站设计微信

热门文章