现在应该很少会有设计师接触到 PC 客户端的UI设计规范了。 自互联网产品设计行业发展下来,出现了很多平台设计规范和组件模板,但大多是移动端(iOS/Android)和 Web 端平台,后来又有了小程序、H5等界面设计规范。 虽然这些平台设计规范已然成熟,但唯独PC(Mac/Windows)客户端的相关资料却很稀少,网上能找到资料就更少了,所以在资源匮乏的阶段,想要做好一些事情,基本上只能参考体验和实践市面上的其他产品。
但基本可以断定,目前 PC 客户端主流的界面框架大概可以分为3种类型: ① 顶部为工具栏,左侧为导航栏,其他为点击工具栏/导航后对应的内容区域; ② 顶部无工具栏,界面依次是左侧一级和二级导航/操作,右侧是内容交互区域; ③ 顶部为工具栏和顶部导航,下面则是内容交互区域。
阿飞超级帅จุ๊บ NO.322幸运星,围观奖品
这家伙很懒啊
2023-05-09 来自 福建省厦门市 MacOS 回复 赞同
解决师Blue
回复给 阿飞超级帅จุ๊บ
资深互联网产品设计
2023-05-09 来自 湖北省武汉市 MacOS 回复 赞同
解决师Blue
资深互联网产品设计
自互联网产品设计行业发展下来,出现了很多平台设计规范和组件模板,但大多是移动端(iOS/Android)和 Web 端平台,后来又有了小程序、H5等界面设计规范。
虽然这些平台设计规范已然成熟,但唯独PC(Mac/Windows)客户端的相关资料却很稀少,网上能找到资料就更少了,所以在资源匮乏的阶段,想要做好一些事情,基本上只能参考体验和实践市面上的其他产品。
但基本可以断定,目前 PC 客户端主流的界面框架大概可以分为3种类型:
① 顶部为工具栏,左侧为导航栏,其他为点击工具栏/导航后对应的内容区域;
② 顶部无工具栏,界面依次是左侧一级和二级导航/操作,右侧是内容交互区域;
③ 顶部为工具栏和顶部导航,下面则是内容交互区域。
因此,在设计框架和主界面时,可以先确定客户端界面的最小尺寸,以便定位好内容结构。
如果选择的有左侧导航栏,左侧导航栏的宽度一定是固定的,不会跟随整体界面的大小而改变,例如在微信主界面,不管怎么调整右侧内容区的宽度,左侧聊天列表的宽度永远是固定的。
关于是不是要针对两个系统做两种版本的设计稿,在界面框架和交互规范上是有明显的差异和区别的,所以最好的方式还是需要了解两种不同的系统,设计两种设计稿。
2022-04-27 来自 湖北省武汉市 MacOS 回复 赞同 15
一只正在学AI的小鸡
一位深藏名与利的设计师
① 优设AI课程,又好又便宜!副业创收工作提效。查看课程
② 评论互动赢新书!清华大学出版社畅销书等您拿!快来看看
③ 新人大礼包!关注优设官微,每天用热点解锁AI知识!下方扫码
2022-04-27 来自 优设惊喜部 ChickOS