UI规范零散知识点总结

作者: 菜心设计铺 | 来源:发表于2016-06-07 21:16 被阅读1255次

1.段落文本的行高

定UI规范的时候,字体的行间距也要随之定出来,24px的字体一般用的行高是32px,也就是行间距为8px;32px的字体一般用的行高是44px,也就是行间距为12px。规范的来讲定一个行高就可以了。

这一点很容易被忽略,当然数值不是绝对的,但是要有一个自己基础的规范,然后遇到具体情况具体分析。


2.dp与pt

dp是安卓开发的计算单位,pt时ios开发的计算单位。

安卓开发的计算单位为什么用dp而不用px?

大家都知道,分辨率相同的时候,由于物理尺寸不同,从而使每个像素点的大小有所差别,如果还用px作为计算单位,那你的距离在不同物理尺寸(相同分辨率)的手机上也会有很大差别,但是如果改用dp为计算单位,dp就会根据不同尺寸进行自适应,这样就不会产生很大的差异性。

安卓1倍图的时候,1dp=1px;安卓2倍图的时候,1dp=2px;安卓三倍图的时候,1dp=3px;(相对的)

而ios不论在几倍图的时候,1pt都等于2px(绝对的)

这就是为什么在做ios端界面定间距大小的时候,px数值都必须是偶数,因为如果你是奇数,换算成pt就不能成为整数了


3.一套设计稿适配ios、安卓两端开发

不论是做安卓还是ios的UI设计,我们都会用2倍图尺寸来做设计稿,ios是750x1334px,安卓是720x1280px,两个尺寸十分接近,比例几乎相同,那是不是可以做一套720px的尺寸,然后将一些边距、头像等内容固定大小,其他一些内容进行自适应呢?这样界面和标注出一套就可以了(但是一些特殊情况还是需要特殊处理)。

这种做法的前提是两端布局结构完全相同。当然切图还是要有两套的。

建议:如果资源足够充足,还是做两套界面更加保险!


没有规范与原则的时候,就会花大量的时间去纠结,从而浪费人力物力,如果定下规范,后期的很多内容都是水到渠成的事情,所以不管是项目本身还是你自己都要有一套基础实用的设计规范/体系。

而这套规范/体系的来源就在于经验+总结!

相关文章

  • UI规范零散知识点总结

    1.段落文本的行高 定UI规范的时候,字体的行间距也要随之定出来,24px的字体一般用的行高是32px,也就是行间...

  • 郑州UI培训 UI设计注意事项

    郑州UI培训UI设计注意哪些地方?今天奇酷学院就来总结总结UI设计规范的原因以及如何避免这些错误的UI设计技巧,我...

  • iOS知识体系总结-UI部分

    注意:更新内容会同步到GitHub iOSWiki-知识体系总结 总结-UI部分 iOS知识点/UI相关 #iOS...

  • 无标题文章

    UI设计师必学的设计规范要点总结 www.woshipm.com/ucd/110202.html 要做设计规范前,...

  • 武当剑的美术规范

    动作规范 模型规范 贴图规范 场景规范 特效规范 UI贴图规范

  • iOS知识点总结一

    接《iOS知识点大总结一》 三十四、主线程操作UI(对UI进行更新只能在主线程进行) 解释:所谓的在主线程更新UI...

  • 零散知识点总结

    标签的合理使用 行级元素只能嵌套行级元素,块级元素可以嵌套任何元素 a标签里面不能适用a标签 p标签当中不能是用d...

  • ModuleLoad总结

    源码链接 笔记一共分三部分1、思路总结 2、知识点总结 3、代码规范总结 思路总结 新建全局对象(function...

  • UI设计规范整理一iOS字体和切图及规范

    UI设计规范整理一iOS字体和切图及规范 UI设计规范整理一iOS字体和切图及规范

  • 2019-03-01

    今日份学到的零散知识点 1.函数指针见[函数指针总结]https://www.cnblogs.com/lvchao...

网友评论

  • 9e32f92d31d5:标题加上移动端。PC 端没有。
  • fad807235c2e:菜大大,您说的pt等于2px是绝对不变的,这个不对吧。应该很dp是一样的,随着倍率变化而变化吧。x2下pt=2px; x3下,pt=3px吧?
  • 37792fd1f1e3:想尝试用sketch一倍图尺寸作图,但是突然不知道怎么衡量尺寸了,比如top bar和tab bar的高度,字体大小等,做习惯了750x1334
    Helife666:其实都是一样的,两倍的关系 在高度上面信息往下流就行了
    37792fd1f1e3:@菜心设计铺 噢噢噢好的好的,谢谢哈:stuck_out_tongue::stuck_out_tongue:
    菜心设计铺:@你好我找汤小樱 全部缩小一倍就好
  • ff2403e5f03a:比如导航栏(nav)被整个图片填充时,640和750!是一套图,那怎么处理!
    Helife666:做750的呀 适配640的时候等比缩小图片就行,只需要适配宽度,高度自适应
    菜心设计铺:@CHN广再 你要处理什么?
  • 9be431b4ded9:能讲下切图和适配的问题么,菜鸟留!
  • 4805ae8794ae:请问现在很多都建议用一倍图进行设计,像sketch给的默认尺寸很久前就改成一倍尺寸了,但是在PS中用一倍都是不太舒服,开发人员有时候又想要一倍的切图,很纠结是不是改用逻辑像素做
    菜心设计铺:@xiaoshitou 是的
    不大不小的石头:@菜心设计铺 原来如此。最近一直在纠结ps一倍图作图会模糊的问题,原来根本就不能这么做。网上很多理论都是针对sketch工具的好像
    菜心设计铺:@俊俊菌 ps一倍图没有意义,因为他不是矢量的,sketch是矢量的,所以放大几倍图都可以

本文标题:UI规范零散知识点总结

本文链接:https://www.haomeiwen.com/subject/huaddttx.html