童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

网站设计之三:设计中的模数和秩序美

9月9日 桃花醉投稿
  大家看到个好站,有时感觉,咋那么精致、舒服、有信赖感呢?学会模数,就会精致设计,立即轻松获得秩序美。
  一、模数是什么东西?
  设计中还有模数?顶尖UI设计师大部分都闻所未闻吧?模数在大多数网页设计教程和课程中,都没有提到过,那么啥叫模数呢?
  模数是选定的标准尺度单位,作为尺寸协调中的增值单位所谓尺寸协调是指在房屋构配件及组合的建筑中,与协调尺寸有关的规则,供建筑设计,建筑施工,建筑材料与制品,建筑设备等采用,其目的是使构配件安全吻合,并有互换性。
  引用维基百科定义
  模数是建筑设计中的专业术语,是自定义的长度增量单位。按单位不同,建筑构件尺寸、钢筋直径、开间、进深、层高、跨度等一般以2、5、10、100的倍数或偶数倍为尺寸增量。比如层高优3米3、3米7等;比如钢筋半径有32mm、10mm、比如灰浆厚度有3个(3cm)、2个(2cm)等。
  为啥要用模数,这得从有了钢筋混凝土,出现了现代建筑的工业设计才出现的。建筑工业为了组建化、标准化、流水线化提高生产建设效率,不得不引进了模数,来使建筑构配件有互换性,更高效地设计组装。同理,自打室内装饰伴随广告产业的兴起,模数也引入到装修领域里了。
  往往一个建筑设计师到了退休年龄才达到建筑设计的成熟期,无论从艺术产出物的量级还是从其工序来说,都是任何其他艺术品所无法比拟的。建筑艺术被称为人类社会最伟大的艺术。而平面艺术、演艺、影视想比较来说就是小儿科了。网页设计呢,归属平面艺术范畴,再加上国内IT工业设计规范的幼稚水平,没有模数这个概念,也就顺利成章了。
  顺便再吹一下规范。建设领域分为不同的专业,比如建筑设计、建筑施工、结构设计、设备工程、材料预算等等,比较繁杂。单一个门类的明文纸质规范就是以尺来计算厚度的。专业人员在使用的时候都叫查规范,为啥?谁脑子进了水把几千万字的规范往脑子记啊。记的上学的时候,全校就我们系功课最繁重,单力学就三门,还学什么线性代数,至今我就没弄明白线性代数是咋会事。建筑领域所用的知识真是浩如烟海啊。现在已经把这些知识都还给老师了,唯一现在还用的就是“模数”。
  在IT工业中,内置标准、国际标准、国家标准才是真正意义的规范、而在应用领域(包括web应用的开发)的开发中,标准是各自为政乱七八糟的,微软如果不考虑市场和经济利益也不是不吊这些标准的。我不得不汗一个。
  二、模数网页设计中的应用
  好了,鄙视完小儿科的网页设计,我们来谈谈“模数”在网页设计中的用途。
  (一)网页设计中的尺寸单位
  网页设计中的尺寸单位有那么几个:
  最常用的就是px(像素),因为这个单位与图片单位可以互通,所以常用。
  (二)网页设计中的常用模数
  (1)最常用的是100、10、5的倍数
  比如分栏的时候,满宽式950px,左栏式180px,栏与栏之间的间距是10px、15px、20px
  (2)模数要尽量取整或末位为偶数
  这里要在提一下模数中有个概念就是,不满足常用模数的,位数尽量要用偶数,为的避免歧义和好记。还有个道理是,一律取偶数,那么按组件的偶数量组合顺序,叠加结果一定是偶数,末尾加再加个组件一定是奇数了,这样好判断是否有错。
  比如你的图片宽是231px,为啥不舍1取整为230
  再比如你的图片高时237px,你可以取235px、236px、238px
  (3)使用模数的好处轻松获得秩序美
  这个世界上什么是美?是秩序。看看元素晶体、看看飘落到你手中尚为融化的雪花、看看人类的基因螺旋结构,这些微观世界的东西,凝练了美得本源。而自然界、动物界、乃至宇宙星系,由于其包含了杂志和不断地衰减变化,这种“美”只是表象。
  人之所以是人,就是在一直探索事物的本源。并不断提炼还原美的本质。在中世纪人们迷恋于几何,在现代人们充分将其提高到工业设计中。工业设计是以规范标准和计算设计为基础的,升华成一套追求完美的秩序。形成秩序的模数,是一个递增量,这个增量可以是倍数、方根、幂、圆周率、素数、或以个方程式等等。而倍数恰恰是形成秩序的一种最简单的方法。所以在工业设计中,尤其是建设设计中大量运用了倍数来充当模数。
  现在我们有了简单的倍数类模数,那么这个模数又是怎么把美体现出来的呢?
  你说我感觉不到啊。答对了,模数美的确是人无法直接一下感受到的。因为这种美不仅仅体现在感官上,还体现在设计制作开发过程中,它不仅提高了制作效率,减小了莫名其妙的累计误差,还把一种整体的设计美蕴含在整体作品中,它的美是整体美和局部美一种相互转换。更直白点,你会在网页中感受到一种工业设计的“精致”和“用心”,反过来说,一个界面中的模块之间的间距或某模块四个边界与其内容的间隔,一会是8px,一会是12px,一般用户一定会在潜意识中感觉不精致,因为设计者没有用心,没有用模数把秩序美设计进去。
  有多少UI设计师不懂得啥是模数呢?
  有多少UI设计师因为不用模数而使整个网站缺乏设计美呢?
  有多少UI设计师即便是在局部或某组建用了符合秩序的倍数,但没有在整页布局和整站中是使用统一的模数呢?
  用你的眼睛细心观察,用放大镜去研究,用心灵去感受,你就知道你的设计师是什么水平了。
  (4)不被模数所束缚
  上面一直说模数要用倍数,要用偶数。要活血活用啊,一旦秩序美的追求与效率和规范冲突,哪就放弃模数。比如即成的国际标准小logo图片的尺寸是8831px,你非得为了符合模数而不遵循国际通用标准而改成8830px吗?
投诉 评论 转载

网页设计之四:未来发展趋势(一)回顾过去随着互联网技术进步,网页UI设计也在不断演变。我们先简要回顾一下,UI方面的发展历程:(1)“远古时期”的互联网传输的只有文本(2)后来增加了超……寻找梦幻城游戏交互设计篇接到梦幻城这个项目,内心其实是比较兴奋的,因为游戏的交互设计变化多样挑战大,自己一直想探索。但另一方面,初做游戏交互心里也有些紧张,摆在眼前的问题马上浮现:1。游戏设计的……敏捷项目管理体会鸟瞰说到敏捷(Agile),大家一定能想到很多Agile方式,XP,Scrum等等。互联网的应用开发要求我们稳定的同时,更需要敏捷的速度,其实不管那种敏捷的方法学,都不一定完全合适……交互设计实用指南系列(8)深广度平衡相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且……网站设计之三:设计中的模数和秩序美大家看到个好站,有时感觉,咋那么精致、舒服、有信赖感呢?学会模数,就会精致设计,立即轻松获得秩序美。一、模数是什么东西?设计中还有模数?顶尖UI设计师大部分都闻所未……谈谈设计中的效率本版有一篇极简主义,大致浏览了一番。看来需要介绍一下什么是效率!(一)过度设计和应用泛滥web1。0时代,由于客户的愿望和其本身提供的信息资源的匮乏,弥漫着“过度设……苹果平板电脑iPad为什么这么设计?千呼万唤苹果的平板电脑IPad问世了。不过貌似好多人并不怎么满意,大多数第一反应就是”这不是大好touch吗”或“电子相册?”。还有一部分人再看了配置以后,“怎么没有摄像头?”……网站改版,改的难道是寂寞么?虽然很久没做网站产品了,但丝毫没有停止观、想、总结,很多问题慢慢都都条理化了。首先想到的一个词是:“改版成本浪费”,做网站的公司有一个通病,就是网站改版。改来改去,其实也……自然描述与自然任务这次我们来说一些很小的东西,相当小。不过先说一个故事:这天晚上,你打算出去下一次馆子,就行动了,找到了一家新开的小店进去坐了下来,服务员很殷勤的走了过来问你想吃点什么。……互联网产品获得成功的不二法则需求该有谁来提出?由谁来决定?这可能是很多创业型团队目前存在最大的一个分歧。创业初期,制度与等级都不明确,很常见的做法是让创业团队的每个人都有提出需求的权利。这样既可以充……给年轻设计师的10大忠告01。好好规划自己的路,不要跟着感觉走!根据个人的理想决策安排,绝大部分人并不指望成为什么院士或教授,而是希望活得滋润一些,爽一些。那么,就需要慎重安排自己的轨迹。从哪个……设计中的生理色差(1)整理这样一篇文章,不求甚解,主要是希望进一步理解最近项目中出现的问题。公司的上层有美国人,对一些模板设计提出的质疑总感觉让人摸不着头脑。刚开始只是认为是设计中出现的问题,修改后……
关于产品经理的碎碎念在腾讯的第三堂产品课爆品的秘密融资的艺术6:和投资人开会时可能踩到的几大雷区Facebook内部分享:25个高效工作的小技巧那些年跳过的坑闲侃入门产品经理遇到的常见问题我想,我们做了一个很正确的决定PM与工程师,在“对立”中协作苹果最初的商业计划,不是1张A4纸O2O之火愈烧愈烈,但别轻易谈颠覆工具类app的社交化之路当我们做产品规划时,我们在干什么?雷军追捧的Costco模式究竟是什么?

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界