做这行三年了,见过太多新人栽在尺寸上。
不是代码写不对,是图切错了。
昨天有个刚入行的小兄弟,拿着个iPhone 15 Pro Max的稿子去跟开发对。
开发一看,直接头大。
说你这边间距怎么跟安卓对不上?
我说,你也没问清楚适配方案啊。
咱们干UI的,手里没把尺子,心里没个数,那真是寸步难行。
今天不整那些虚头巴脑的理论,就聊聊实际干活时,那些让人头秃的ui设计的尺寸问题。
先说移动端。
很多人一上来就盯着1080x1920或者1170x2532这种具体型号去画。
我劝你,别这么干。
你画得再细,换个手机型号,全得崩。
现在的趋势是响应式,是相对单位。
但在设计阶段,你得有个基准。
一般建议用375pt或者414pt作为宽度基准。
为什么?
因为这是大多数主流手机的中间值。
如果你按750px画,导出时记得除以2。
这点细节,多少新人翻过车。
我记得有个项目,甲方非要高清屏,我直接给了3倍图。
结果加载慢得像蜗牛。
后来改了,设计稿用1倍,切图给开发时,根据屏幕密度自动适配。
这才是正解。
再说说Web端。
以前做网页,大家都习惯1002px或者960px居中。
现在不行了。
大屏显示器满天飞,笔记本也普遍1366px起步。
如果你还死守960,那左边右边空一大片,客户看着都憋屈。
现在主流是1440px宽度,内容区控制在1200px左右。
这样两边留白,显得大气。
但别忘了,还要考虑最小可视区域。
很多后台管理系统,客户用的还是老笔记本,分辨率只有1366x768。
这时候,你的ui设计的尺寸如果没做适配,底部按钮就被吃掉了。
这可不是开玩笑的。
上次有个后台项目,开发说按钮点不到。
我去现场一看,好家伙,滚动条把按钮挡住了。
后来加了个固定底部导航,才解决。
所以,做UI不能只盯着屏幕看,得想用户怎么用。
还有图标和字体。
图标最好用矢量图,SVG格式。
不管放大缩小,边缘都清晰。
别用PNG,除非是特殊效果。
字体大小也有讲究。
正文一般14px或16px,标题20px以上。
行高要是设成1倍,看着累死个人。
建议行高设为字体大小的1.5倍。
比如16px的字体,行高24px。
这样阅读体验才好。
我有个习惯,设计完稿子,我会把手机拿在手里,模拟真实操作。
看看手指会不会误触,看看文字会不会太小。
这种手感,是软件里模拟不出来的。
另外,关于切图。
别一股脑扔给开发一堆大图。
该压缩的压缩,该合并的合并。
一个按钮,能做成雪碧图,就别单独发一张。
虽然现在是矢量时代,但有些复杂插画,还是位图更合适。
关键是,你要跟开发沟通好。
告诉他们,这个元素是动态的,那个是静态的。
别让他们猜。
猜错了,返工的就是你。
最后想说,ui设计的尺寸不是死规定。
它是服务于内容的。
内容多了,间距就要大;内容少了,可以紧凑点。
别为了对齐而对齐,那叫强迫症,不叫设计。
多看看竞品,多看看大厂的设计规范。
苹果有Human Interface Guidelines,谷歌有Material Design。
照着学,至少不会犯低级错误。
但别照搬,要有自己的思考。
毕竟,设计是为了解决问题,不是为了炫技。
希望这点经验,能帮你少走点弯路。
毕竟,头发掉一根,就少一根啊。