你来啦，谢谢你，这么优秀还关注我〰〰〰

※※※

签到：2026年7月10日

你好吖，我是妙华。

🔸每天30分钟自由学习时刻🔸——热爱是所有理由和答案。

昨天，我学了一个小知识，就是关于"APP首页的设计方案分析”，这个是Ui设计行业方面的。现在我来复盘记录，加深记忆。

常用的设计样式，样式是有多种多样的变化的，是需要学会举一反三，学会设计思路。

首页各元素的设计。

图片是需要贴图，纯色是纯代码。

导航栏——

规范:导航栏88px，状态栏40px。

颜色:黑、白、主色、主色带渐变、透明...

手机的色彩模式是比较敏感的，比电脑要清晰很多，所以饱和度尽量提高。

不同饱和度之间的渐变。

同类色之间的渐变。

搜索栏——

规则:搜索框高58px左右。

浅色导航栏背景加略暗的搜索栏。

深色导航栏背景加略亮的搜索栏。

分词匹配-技术考虑的问题。

精准搜索or模糊搜索。

搜索。

1 只有搜索框;

2 只显示历史搜索记录;

3只显示推荐搜索项;

4 历史搜索记录+推荐搜索项。

标签栏——

规范:98px。

背景:灰白色系or灰黑色系。

图标:线-线，面-面，线-面，线-线面。

其实只要保证两种状态风格一致，按下态和非按下态可以这么来组合!

标签栏-舵式标签栏。

标签个数:3或5。（基数）。

banner——

推荐:状态栏+导航栏+banner400以内、偶数。

通栏就是没有留白。

选项卡——

1，选项卡-下拉列表。

黑色蒙层，类似弹窗。

2，选项卡-按钮形式。

圆角形切换。

3，选项卡-下划纯色块。

未选中or选中状态。

4，选项卡-下划纯色块+弥散阴影。

5，选项卡-纯色背景。

网页用得多。

6，选项卡-三角指示。

7，选项卡-侧边导航。

电商用得多，分类多。

▂注意规范严谨作图。

不能发挥的地方不要大胆发挥。

文字按规范。

分割线统一1px纯黑，10%透明度。

颜色不要杂乱。元素不要太多。

以上就是今天的内容，希望有所收获。

🔸🔶🔸🔶🔸🔶🔸🔶🔸🔶🔸🔶🔸

妙华的座右铭：

如果不知道自己想要干什么，就先工作。

只要工作，就可以得到米、酱、酱油、朋友和信任。

可以一边工作，一边寻找真正想干的事，千万不要游手好闲。

— END —

写字不易，如果觉得有帮助，不妨【转发】给朋友，点亮【赞】和【在看】，能量会回流，好运滚滚来！祝你发财被爱，我们下期见！