界面:
PC:windows ,vistar , 安卓,移动端,塞班,
安卓图标:主题物展示
IOS:突出功能展示,圆角矩形
wp:贴片
关于Ui设计的几句话:
1.UI设计是指对软件的人机交互、操作逻辑、界面美观的设计。
2.好的UI设计不仅是让软件变得有个性和品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
3.界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式并且为最终用户而设计。
4.从心理学意义来分,界面可人为感觉(视觉、触觉、听觉等)和情感两个层次。
5.置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性
UI设计流程:(代表讲者,不代理me的观点,只想感慨现在的Ui设计和交互设计也在往产品经理的方向发展啦)
*产品分析/使用人群特点分析
*竞品分析/使用人群特点分析
*确定功能点
*功能思维导图
*手绘交互
*软件绘制交互
*确定视觉风格(手绘)
*视觉呈现
*标注/切图
*包装产品到官网
手机端列表常见展示方式:
1.竖列表
优:能更多的展示功能,清晰,一目了然;
缺:层级比较深,加大用户点击次数;

2.左右滑动
优:展示效果很漂亮,在游戏界面用的比较多,每一功能点展示内容多
缺:每次只能展示一个功能点

图片来自网络
3.九宫格
优:展示功能多、美观;
缺:层级深

4.磁贴
优:展示功能多,图片/图形展示,美观,层级可分主次;
缺:层级深;

5.侧滑
优:不占用主界面空间,更好的利用手机页面空间;
适用于功能较多的APP;

6.下拉
优:可直接在同一界面看主功能内的功能,可更加快捷的操作,适合功能多的APP
缺:界面不太美观;

7.上拉
隐藏功能,与侧滑类似
不同的是:侧滑多采用文字列表
上拉多采用宫格图形

8.悬浮式
功能隐藏,适用于功能较少的APP
交互形式更加有趣

9.tab栏
适用于同级,同注意力,同等份量功能
快捷查看切换其他同级功能

手绘原型参考

电脑绘制原型参考


网友评论