App UI交互与视觉设计

UI交互与视觉设计

  • App UI设计的概念及原则
    App UI设计是指对移动端的人机交互,操作逻辑,界面美观的整体设计通过互联网链接的UI被称为虚拟UI。UI设计主要包括图形设计,交互设计,用户测试应用的外观与内在通过图形设计来体现,以应用中的操作过程与用户的沟通吸引用户继续使用的交互设计在一个应用UI实际完成之后要投放到市场上进行测试。在通过测试反馈的结果进行相应的改正。

    APP UI设计要遵守一定的原则在设计之前,需要考虑为什么要设计UI要怎样设计才能吸引用户,怎家用户的使用频率等。这样才会设计出更加实用美观的手机界面。APP UI设计有四大原则 : 突出性原则,商业性原则,趣味性原则,艺术性原则。

  • 交互方式和视觉风格的设计
    交互方式的设计
    随着通信技术的房展带动了无线通信科技的崛起智能手机和平板电脑已经成为人们日常生活中的必需品。但是在手机与平板电脑还是有一定的差距,这种差距使设计师在UI设计方面要进行分别设计。以便一个应用有多种版本方便用户进行选择,同时对于不同的手机系统,也需要不同的界面设计。

    需要根据场景的差异 交互方式 屏幕大小的差异等方面进行相应的设计与改动。移动端是被可以进行屏幕旋转 在屏幕旋转以后 页面也会进行一定的变换。在设计的时候要考虑到屏幕选装以后的页面尺寸移动端的交互方式主要通过手指在屏幕上的点击 滑动,旋转等方式进行操作还可以通过语音 硬件设备等来实现交互。

    视觉风格的设计
    图片作为一种通用文字,它具有广泛的应用性随着人们的追求变得多元化更加依赖图片和视频获取信息。借助它们可以表达感情,分享个人喜乐,定义人们的审美。逐渐演化而成的风格有的正在流行有的已经变为经典。

    APP UI视觉设计风格可以分为 :安全类 清新类 科技类 凉爽类 美味类 热情类 高端类 浪漫类 硬朗类 纯净类 复古类等

  • 色相 明度 纯度
    色彩的属性是指色相 ,明度,纯度三种性质色相是指颜色的基本相貌。它是色彩的首要特征。是区别色彩最精准的准则。色相又是由原色,间色,复色所组成的。二色相的区别就是由不同的波长开决定。即使是同一种颜色也要分不同的色相。如红色可以分成鲜红,大红,橘红等。蓝色可以分成湖蓝,蔚蓝,钴蓝等。灰色可以分成红灰,蓝灰,紫灰等。人的眼睛可以分辨出一百多种不同的颜色。

    明度是指色彩的明暗程度 明度不仅是表现物体的照明程度。还表现在反射程度的系数上 明度可以分为9个级别。最暗为1,最亮为9,并划分出3种基调。
    1~3 级为低明度的暗色调 给人沉着 厚重 忠实的感觉
    4~6 级为中明度色调 给人安逸 柔和 高雅的感觉
    7~9 级为高明度的亮色调 给人清新 明快 华美的感觉

    纯度及时色彩的饱和度也就是色彩的纯净程度。纯度在色彩搭配上具有强调主题的意想不到的视觉效果。纯度较高的颜色虽可给人造成强烈的刺激感,能够使人留下深刻的印象,但也容易造成疲倦感。要是与一些低明度的颜色想相搭配则会显的细腻舒适。纯度也可分为三分阶段。
    高纯度 8~10 级为高纯度 产生强烈 鲜明 生动的感觉
    中明度 4~7 级为钟明度 产生适当 温和的平静感觉
    低明度 1~3 级为低纯度 产生一种细腻 雅致 朦胧的感觉

  • 主色 辅助色 点缀色
    APP UI 设计必须注重色彩的全局性,不要使色彩偏向一个方向,否则会使空间失去平衡感。APP UI设计通常由主色,辅助色和点缀色组成。

    主色能够定义一个APP的主题基调,并发挥着主导作用,能够令整体空间看起来更为和谐 一般来说设计中占据面积比例最大的颜色为主色。

    辅助色可以补充或者辅助手机界面主体色的色彩,在页面它可以使主色的邻近色,也可以是互补色,不同的辅助色会改变空间蕴含的情感,给人带来不一样的视觉效果。

    点缀色是界面中占有极小部分面积的色彩,具有多变性,又可以突破整体造型效果,还能够烘托整个应用的风格,彰显出滋生固有的魅力,点缀色可以理解为点睛之笔, 是整个设计的亮点所在。

  • 邻近色 对比色
    邻近色与对比色在APP UI设计中运用的比较广泛,设计过程中不仅注重功能项,还可以用色彩来表现界面的丰富景象,与不同的元素集合,能够完美地展现出界面的魅力所在。

    邻近色 - 从美术角度来说 邻近色在相邻的各个颜色当中能够看出彼此的存在你中有我,我中有你,在色相环中两种颜色之间相距90度,色相彼此相邻色彩冷暖性质相同,具有一支的情感色彩。

    对比色 - 对比色是人的视觉感官所产生的一种生理现象,是视网膜对色彩的平衡作用两种颜色在色相环中相距120度或180度

  • 主色的对比
    主色是决定画面的风格趋向的色彩,通常情况下主色约占75% 。主色并不一定有一个颜色。它还可以是一种色调,最好选择同色系活邻近色中的1~3个要保持协调。通常情况下主色调主要是由界面中整体或中心的图像所形成的中等面积的色块。它在界面的空间中具有重要的作用。通常形成界面的视觉中心。通常认为饱和度高的颜色一般为主色 (图 2-32)。深颜色一般为主色 (图 2-33)。面积大的一般为主色 (图 2-34) 视觉中新所呈现的意版为主色 (图 2-35)。
    在这里插入图片描述在这里插入图片描述

发布了12 篇原创文章 · 获赞 71 · 访问量 1302

猜你喜欢

转载自blog.csdn.net/weixin_45026183/article/details/104273061