广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

设计干货|14个UI界面设计小技巧

发布日期:2025-06-23 08:39:52 浏览次数: 805 来源:研推社

1
一屏的尺寸

图片
鉴于目前95%的详情页用户都来自无线端,所以我们在做详情页的时候有必要了解目前自己工作主要使用的平台的尺寸是多少。
这里以某宝为例,手机用iPhoneX,计算出了一屏可展示的高度,这样自己在做详情的时候就知道多高比较合适了。

2
竖屏思维



图片


既然用户使用场景是手机,那么在制作详情的时候,尽量用竖着阅读的方式去制作,而不是一味的继承电脑端的横屏思维。另外小建议:最小字体不小于18px。

3
图标设计




图片
图标在传达信息比文字而言效率要高很多,也更容易被记住。在使用的时候注意统一性,切忌面性图标和线性图标混合使用。并且,在使用线性图标的时候,记得统一图标的粗细。

4
关于人物肖像

图片
当需要出现多个人像的时候,最好使他们形象大小、方向、色调一致,眼睛在画面的高度最好也统一,这样有利于画面和谐。

5
图形

图片
圆形最好不要人为拉伸,因为这样并没有任何意义,并且展示出来还会以为是设计不够细心造成的。

6
圆角矩形

图片
关于圆角矩形的大圆角,不是不可以用,但是大部分人用的不好。所以稳妥一点,推荐圆角小一点,或者拉成半圆,会大气很多。

7
投影




图片
黑颜色的投影用的比较多,也很好用。但是有些时候换一种方式会出现更好的效果,比如试试添加深红色投影,这样看上去是不是就更干净一点了。

8
按钮&搜索栏




图片
凭感觉做出来的人一般都是从业很多年的设计前辈。如果不知道为什么别人做出来好看,可以试着分析下按钮的负空间,调整一下与单个字体之间的比例,做出来的按钮整体效果要比之前的大气哦。

9
箭头



图片


很多初学者习惯偷懒用英文的符号代替,但是往往细节决定成败。随便画一个矩形,删除一个锚点,旋转45°就能画出来,记住要统一成文字的笔画粗细。

10
字体搭配



图片


在对于字体个性不太了解的情况下,黑体搭配黑体、宋体搭配宋体,是不会有错的(黑宋搭配是比较难掌握的)。
但是搭配的时候需要注意,英文在同字号的时候行高没有汉字高,这时候就需要加大1-2个字号,同时字重需要匹配。

11
标题与正方



图片


标题与正文,想要搭配的好看,前期推荐用计算器,固定好标题文字大小或者内文文字大小,然后用1.414、1.5、1.618、1.732、2、3等比例进行运算。
内文的行距也是同样的道理,这里推荐大家文字大小用偶数,大小变换输入数值。这样可以在最后导出图片的时候,避免某些意料之外的瑕疵。

12
辅助线



图片


推荐拉辅助线的是按住shift,辅助线会以1、10这样的整数变化,不会出现小数点的辅助线。避免在对齐的时候出现1px的误差,被说成是粗心的失误。

13
阅读顺序


图片


试试用1、图、文字的顺序,跟图、1、文字的顺序阅读,大家不难发现后面这种阅读步骤更流畅、更能带来良好的用户体验。

14
标题推导



图片


当你的详情页中,有多屏视觉页展示的单页,且文字适合排在上方的时候,尽量让这个文字在每屏中的位置一样,这样会让你的设计看起来更规整、更有设计感。


END

声明:转载仅供学习参考,除原创作品外,本平台所使用的文章、图片、视頻及音乐属于原权利人所有。素材来源于网络,仅供学习和分享。
图片
图片

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!