安卓UI设计系列知识

2025-7-11    涛涛 移动端UI设计文章及欣赏

 

一、适配

  1. 适配的定义：为使设计内容在不同尺寸的画布（即不同环境）中呈现 “好看” 的效果而进行的调整，例如将大画布内容等比缩小放入小画布，或在画布尺寸变化时合理调整元素布局（如固定部分元素高度，仅拉伸另一部分）。
  2. 适配原则：由于位图放大易模糊，建议选择大尺寸内容缩小适配小画布，但缩小也可能因未用向量档、未对齐像素、尺寸含小数、旋转图形等原因导致模糊，可参考《完美像素》学习解决方法。

    image.png

    image.png

    image.png

二、入手方法

  1. 分辨率选择：综合考虑适配效率和机型分布，建议从 xhdpi（720*1280）分辨率入手。因大分辨率内容缩小适配性更好，且该分辨率能兼顾安卓的 mdpi、hdpi、xhdpi 及 iPhone 3G、iPhone 4 及以上机型，一定程度上可实现一套界面适配安卓和 iOS（虽两者交互差异大，不建议完全共用界面）。

    image.png

    image.png

  2. 注意事项：若从小分辨率入手，需保证元素为形状图层（PS）或矢量图层（AI），以便后续缩放。

    image.png

三、设计准备

  1. 度量单位和网格：
    • 可触摸控件基础单位建议 48dp，按钮高度建议 40dp（上下外边距各 4dp），元素间留白建议 8dp，内容距屏幕两边建议留 16dp，顶部 ActionsBar、底部 NavBar、列表项的触摸区域高度建议 48dp，但可根据用户群体（如老人）调整大小。
    • 以上规范针对 mdpi，其他分辨率需按比例调整（如 xhdpi 为 mdpi 的 2 倍）。
  2. 图标：
    • 需区分图片大小和图形大小，建议图标背景透明。
    • 启动图标在 play 商店需为 512512 像素；操作栏图标建议图形区域 2424、图片大小 32*32；通知栏图标建议为白色。
    • 图标大小可根据用户需求（如老人）调整。

      image.png

  3. 字体：官方建议使用 12sp、14sp、18sp、22sp 等，尽量避免奇数大小。

    image.png

四、画图方法

  1. 新建与 xhdpi 分辨率相同的画布（单位为像素）。

    image.png

  2. 状态栏（styleBar）在 mdpi 中高度为 25dp，在 xhdpi 中为 50px，可从安卓 GUI 源文件提取并缩放使用，且算入设计高度；另一类类似元素获取和高度参考状态栏，可不算入设计高度。
  3. 结合原型图，依据上述规范设计效果图，可通过 PS play 在手机上查看效果，后续还将涉及风格变换、状态处理等内容。

    image.png

    兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

    关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

    我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

     

    image.png

« PC端网页的UI设计趋势 进阶 UI 设计能力指标体系 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档