当前位置: 首页 > news >正文

如何保持响应式设计新鲜感

响应式网页设计很流行,而且绝无秘密可言。行家们倡导,各品牌趋之若鹜。这不仅是创建一个移动端站点,而是让你的网站适用于每种浏览器尺寸,不论桌面端、平板还是智能手机

响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站。在点开你的设计软件着手动工之前,你需要考虑很多。这是个额外步骤,最终成品却总能证明它的价值所在。很明显,设计师若不考虑响应式设计,网站就会倾向于呆板无趣

设计师绝对有必要保持自己的创意贯穿整个响应式站点。鉴于更多人在使用平板和智能手机,你总希望保证每个人都能访问你的网站。这里有一些提示,可以帮助你在设计响应式网站的同时,保持创意和高效

1. 使用绝妙的字体

对于响应式网站,你不得不考虑它在小屏幕上看起来如何。好的字体是所有优秀网站的重头戏,然而它在响应式设计中,却几乎成了必需品。随着屏幕减小,大部分元素都应该变化、缩小或者移动位置。首先,也是重中之重,你的字体要具备这种能力

第二,你得用不同标题尺寸和多种文字大小。如今,我们在桌面端设计中常常使用巨大的标题和页头。这点不必延续整个网站,因为你总得考虑更小尺寸。确保你使用FitText这类插件来缩小字号就好,它很管用

2. 使用精彩的图片

和文字排版一样,图像在任何网页设计中都至关重要。在响应式设计中,当你在更小的屏幕上查看网站,你的图片应该相应更小或等比缩放,这点也和文字相同。响应式设计中有成百上千种不同布局和图片尺寸。注重图片的选择和使用,因为它们毫无疑问会发生变化。随着屏幕变大或变小,图片会改变形状和展现方式,或被裁切掉一部分

理想情况下,你会希望确保窗口尺寸变化时,大幅摄影图片不会有任何裁切。另外,在你制作图像时,必须保证你的作品加载速度快,而且对小尺寸屏幕可见。这就是为什么设计师推崇扁平设计,它使得这点更容易

在Pandiscio中,首先你得注意一下这个大标题图片在桌面端的样子。它是完整的,伸向两侧边缘,而且质量相当高。当你缩小窗口尺寸,图片也跟着变小、变化形状(从矩形变成方形)、被裁切。他们找到了随屏幕尺寸变化仍保持美观的图片

3. 不要忽视导航

如果人们不知道如何浏览你的网站,那他们就直接不浏览了。响应式设计的导航更难处理,因为我们已经习惯于为横向设计打造导航。如今,我们得创建能够轻易压缩以适应纵向规格的导航

只有少量链接时这并不是大问题。你可以将你的导航变小或缩至顶部,也可以为访客提供一个下拉菜单。主要问题是该如何处理包含更多内容的繁重导航

Monocle网站导航顶部有两块延伸部分。为适应小尺寸浏览器,他们为极端情况的内容创建了下拉菜单,并且缩减了导航的第二部分

4. 使它好玩

点击网上的链接,在看见页面之前,你很可能要坐等内容加载。精确地找到“下一页”按钮来浏览更多内容也非常令人讨厌。这类的事情并不好玩,也不直观

注重细节并使你的网站更加直观,会令你的网站更值得分享。想想在所有尺寸的浏览器上使用同一个网站会是怎样。想想你执行一个操作时网站应该如何反应。找到这些问题并修复它们,你的网站用起来就会很容易、好玩和直观,同时也使它更有趣点!

5. 跳出条条框框

如果其他办法都没效果,那就发挥创意吧。响应式设计并不意味着要束缚我们的创作方式。总有实现创意的空间,无论通过代码还是设计

Enso创造了一个看起来绝非响应式的网站。注意尺寸缩小时布局如何一点点变化,却仍然保持着他们的品牌和创意

结论

在响应式设计或任何网站设计中保持创意,和画出构思并修改定稿一样简单。开始计划网站的作用和功能时,会比着手动工更好玩。响应式设计未必是一件重大、万全的任务,广大设计师畏惧的那种。它非常简单!

 

转载于:https://www.cnblogs.com/gonrun/p/3698714.html

相关文章:

  • 设计模式之Iterator模式
  • hbase rowkey设计的注意事项
  • SQL 必知必会
  • Javascript学习4 - 对象和数组
  • Ubuntu 14.04下安装GitLab指南
  • 黄渊普:媒体视角--O2O与传统零售
  • Makefile学习之make 的运行【转】
  • [原]unity3d刀光剑影(二)
  • C#设计模式之外观
  • MDK调试错误之HardFault_Handler
  • Dom4j
  • Java基础work4
  • NIO入门系列之第9章:字符集
  • 新语言学习
  • Leetcode | Permutations II
  • 【comparator, comparable】小总结
  • 2017届校招提前批面试回顾
  • JavaWeb(学习笔记二)
  • Joomla 2.x, 3.x useful code cheatsheet
  • Linux CTF 逆向入门
  • Odoo domain写法及运用
  • React中的“虫洞”——Context
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • Spring Cloud Feign的两种使用姿势
  • 从0实现一个tiny react(三)生命周期
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 区块链共识机制优缺点对比都是什么
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • 阿里云服务器如何修改远程端口?
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • #### go map 底层结构 ####
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (1)(1.11) SiK Radio v2(一)
  • (C++)八皇后问题
  • (HAL库版)freeRTOS移植STMF103
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (MATLAB)第五章-矩阵运算
  • (Python第六天)文件处理
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (五)IO流之ByteArrayInput/OutputStream
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • **PHP分步表单提交思路(分页表单提交)
  • .NET Core WebAPI中封装Swagger配置
  • .Net 知识杂记
  • @PreAuthorize注解
  • @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
  • [.net]官方水晶报表的使用以演示下载
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决
  • [Angular] 笔记 16:模板驱动表单 - 选择框与选项
  • [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c
  • [LuoguP1141]01迷宫
  • [MAC OS] 常用工具