首页

移动端交互控件规范总结:弹窗(二)

高劲

以下内容主要以 iOS 官方设计指南和网络上的相关文章为参考,但同时也包含个人理解与思考,并非绝对、唯一的标准。

交互设计|产品细节体验笔记

高劲

随着互联网行业的发展,每一个软件背后都有一个优秀的项目团队和公司,腾讯或是阿里巴巴,他们旗下的APP我们也耳熟能详,但是关于每个软件的细节之处我们应该大多数都没有关注到,每个产品的人性化设计为我们增加了方面,想要了解和学习的崽崽们可以看看哦!

交互体验思考|产品体验

高劲


本文大纲

一、好的收藏体验这么做

二、互动信息隐私的保护

三、确定按钮放左边or右边?

四、手机实体键分布的合理性

五、静音键存在的必要性

六、经典的旋钮式交互



表单篇 | 掌握基本原则,帮你设计出更优质的表单!

高劲

表单是UI设计中很常见的元素,不管是PC端还是移动端,表单几乎是无法规避的UI控件,用户可以通过表单完成线上购物、信息交换、文章订阅等任务,使用范畴极为广泛且牵扯到方方面面。

2021-2022 设计趋势 · 数字未来篇

seo达人


背景

回顾互联网发展历程,从桌面端拨号上网到高速5G的移动互联网,随时随地互联互通对现实生活的影响力也逐步提升,虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。本文将从虚拟世界的视角,对设计挑战和机遇进行总结和预测。

概述

电影《头号玩家》里的“绿洲”描绘了一个庞大的虚拟数字世界,在这里人们用数字化身来控制、并相互竞争以提高自己的地位,这被视为未来虚拟世界该有的样子。不过目前落地概念是由Roblox在招股书里描述的8个关键词:身份,朋友,沉浸感,多样性,低延迟,随地,经济,文明。我们尝试把这8个词提炼5个虚拟世界的设计趋势,分别展开论述。

2021-2022 设计趋势ISUX报告·数字未来篇

一、虚拟世界人物:数字替身(Avatar)设计

数字替身(avatar)是用户在虚拟世界中的化身。它可以代表用户的位置方向、运动状态和姿势,是用户在虚拟世界的交互载体。avatar的设计有追求品牌塑造和技术突破的趋势。

1.1 形象多样化,追求品牌风格化

在avatar形象设计方面,当前大火的Roblox和Horizon worlds的设计非常有特点。Roblox基于多面体建模,显得不够精致。而Horizon worlds的人物直接没有下半身,一群上半身人物在空中悬浮游走。但从另一个角度来讲,这也许正是他们品牌风格的记忆点。

2021-2022 设计趋势ISUX报告·数字未来篇

Roblox的avatar形象

2021-2022 设计趋势ISUX报告·数字未来篇

Horizon worlds的avatar形象还有一些时尚品牌借助avatar穿戴自己的产品,以次来凸显品牌调性。著名奢侈品牌Gucci就与虚拟形象科技公司 Genies 合作,允许用户创建自己的个性化虚拟形象进行穿搭售卖。

2021-2022 设计趋势ISUX报告·数字未来篇

Avatar的不同呈现形态的根据“卡通感-写实感”、“儿童化-成人化”这两组维度,可以得到视觉特征定位图。其中第四象限是虚拟世界avatar形象超写实化的一个重要的发展方向。

2021-2022 设计趋势ISUX报告·数字未来篇

1.2 从指尖驱动到自然驱动

Avatar是用户在虚拟世界的替身,长久以来玩家依赖于“指尖”去控制自己avatar,比如前后左右移动方向,跑跳等动作。这需要一定的学习和转化成成本,这对用户的沉浸感带来一定的损耗。苹果Memoji是对表情AR技术的应用,TrueDepth相机硬件可以通过你的脸驱动Memoji的嘴巴、眼睛、头部和舌头。

你可以在FaceTime通话中与Memoji重叠,Memoji的嘴唇也能够与你的声音同步。统计表明,用户之间的信息或FaceTime对话越来越多的由文本或视频转向由虚拟avatar进行。

2021-2022 设计趋势ISUX报告·数字未来篇

Memoji脸部驱动的虚拟头套除了avatar的面部表情外,整个肢体也可以被现实人体通过动作捕捉技术来驱动。近期,美国广播公司Fox推出了全球首档虚拟人物歌唱比赛《Alter Ego》。节目中的虚拟形象可以设定不同的肤色、身体体型和性别。参赛选手可以自由设定他们认为最能代表自己内在,或最能引起观众注意的虚拟形象。然后使用动作捕捉技术,由自己的身体驱动虚拟形象进行表演。‍

2021-2022 设计趋势ISUX报告·数字未来篇

《Alter Ego》全身驱动虚拟‍形象在虚拟世界中,让每个人都能够拥有理想中的Avatar是未来的一种时尚,也是作为设计师的机会。

1.3 数字人的高仿真高智能趋势

作为虚拟世界里的NPC,数字人是智能化的独立avatar。在“外貌”方面数字人也会逐渐往高写实的方向发展。而在“精神”方面,依托AI机器学习算法和大数据,数字人的对话质量也与真人相差无几。服务应用的数字客服、游戏中的超级NPC,都可以以假乱真,表现甚至优于真人。这对设计师的智能化交互设计能力提出了更高的要求。

2021-2022 设计趋势ISUX报告·数字未来篇

UNEEQ公司基于知识计算和语音合成提供的数字人对话产品

二、虚拟世界空间:从界面设计到“界体”设计

在虚拟世界的概念下,界面(interface)设计师讲逐渐升级为“界体“(interbody)设计师。设计师的工作效率和发挥空间将会被大大扩展。

2.1 空间3D建模更加普及

虚拟世界基于VR/AR等可穿戴设备,可以实现整个身体与“界体”的交互。这将会大大简化建模步骤和时间成本,帮助设计师在沉浸式的体验中完成设计构想,释放创造力。而目前主流的通过手指对电子屏幕界面进行点触的交互模式将会被取代。皇家艺术学院研发推出的Gravity Sketch是一款支持在3D空间中建模型的工具。

沉浸式VR体验,让设计师可以将自己提前以客户的视角在虚拟场景中按真实的比例直观感受并调整设计。这个工具已经应用到了汽车和工业设计、服装设计、建筑设计等行业。借助Gravity Sketch,福特汽车公司已将汽车内外饰设计阶段的概念开发时间从四个月缩短至仅20小时。

2021-2022 设计趋势ISUX报告·数字未来篇

△福特汽车用Gravity Sketch设计汽车

2021-2022 设计趋势ISUX报告·数字未来篇

服装设计的运用

2021-2022 设计趋势ISUX报告·数字未来篇

Gravity Sketch在建筑上的运用使用VR Gravity Sketch主要优点之一,就是能够帮助设计师更好地理解比例。同时Gravity Sketch在灵活性方面具有非常好的潜力,弥补了2D绘制和3D建模之间的空白。等技术更成熟些,相信Gravity Sketch 会有更大的可能。

2.2 数字孪生向高等级发展

虚拟世界不仅仅局限于在形态和环境方面的复刻。它应当是平行于真实世界的互联互通的“平行宇宙”。数字孪生通过为现实的建筑物在数字世界里锚定虚拟建筑实现互联互通。数字孪生也像自动驾驶一样分为几个等级。

终极形态的数字孪生,是真正意义上的平行世界。目前,数字孪生的进展正在向更高等级发展。最近发布的第四代万达广场“慧云4.0”介绍到:数字化运维管理平台,融合了BIM、数字孪生、Iot、大数据、人工智能、5G等技术,实现了对商业广场消费场景、运维服务和资产的管理。

2021-2022 设计趋势ISUX报告·数字未来篇

举一个温度报警的例子:传感器发现故障,收集信息并发出警报,同步反馈至管理平台。管理平台定位设备位置、显示影响区域及对应的环境参数,同步现场视频,显示设备连接管网。操作人员,处理报警信息,下发维修工单。现场维修人员收到工单信息,可通过电脑、手机、平板等方式进行远程查看及操控设备,实现快速检修。

3.3 数字空间的智能化发展趋势

虚拟世界的空间也会在数字孪生的基础上朝着智能化的方向发展,就像数字人可以完成自我进化和成长一样,这就是数字空间的智能化发展趋势。百度AIR智能交通系统定位于路端的“自动驾驶系统”。

跟传统的道路信息化设备强调软硬件结合不同,这是一套可在数据驱动下自学习进化的系统,应用L4级自动驾驶级别的感知预测规划技术,让路端交通基础设施实现数字化、智能化和网联化升级。在AIR智能道路系统加持下,自动驾驶将更快落地。

2021-2022 设计趋势ISUX报告·数字未来篇

百度AIR智能交通系统

三、虚拟世界交互方式:更丰富和自然

随着交互设计的发展,虚拟世界中中的交互方式会越来越趋向丰富和自然。就像点触交互逐渐替代按键交互一样,眼控、语音、手势等自然交互也一定会逐渐替代点触交互成为主流。

3.1眼控交互:更人性、更直觉

简单来讲,眼控交互开发的原理就是在开发引擎中,将视线范围设置为一条射线状或圆锥状物体,和VR/AR中的各种物体进行碰撞检测,当程序一旦检测到碰撞,则视为用户的视线落到了这个物体上,由此进行眼控交互。

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的环境中相比于其他交互来说,眼球追踪门槛低无需复杂外设,受环境影响小,应用场景几乎无限制,更为重要的是眼控交互非常人性化,眼动交互非常符合人的直觉。比如在应用中想要隐藏菜单功能,需要通过其他的交互方式刻意发出指令隐藏和调用菜单,而眼控交互可以非常自然,当注视点偏离,菜单会自动隐藏。

2021-2022 设计趋势ISUX报告·数字未来篇

又比如在射击游戏中,可以体验真实的眼球锁定目标进行打击的快感。

2021-2022 设计趋势ISUX报告·数字未来篇

尽管目前存在实时渲染、眩晕、米达斯接触等等技术问题的限制,但随着软硬件技术的升级迭代,用户体验正在逐渐完善,眼控交互一定是未来的交互趋势。

3.2 语音交互:更自然、更便捷

语音交互作为更趋近于人与人之间最自然的交流方式,近些年有许多发展的突破点。在虚拟世界发展主线上,语音交互趋向更自然、更人性化、更个性化。从GUI到VUI,不依赖触摸屏的输入,出现无导航、无按钮、无菜单界面。

过去反人类的一些沟通方式慢慢被“调教”。此外,多人会话场景下的技术方案日渐增多。Google的智能语音助手可实现连续对话,可以打电话给饭店或理发店等商家帮你预约,目前,Google Duplex可以跨app完成帮你租车、回复消息、找照片分享给好友、写邮件等一系列任务。

2021-2022 设计趋势ISUX报告·数字未来篇

Google智能语音助手语音识别可让你感觉自己仿佛就是故事的一部分。能够与内容进行真实的对话将会大大地提升沉浸感。在 VR 领域内,语音交互更可能替代现有固化的 UI 界面。只需要通过简单的语音交流就能完成繁复的操作,无需再去点击屏幕上放置好的浮动界面图标,这样的设计或许才是未来虚拟世界玩家所需要的。

2021-2022 设计趋势ISUX报告·数字未来篇

《Starship Commander》语音VR游戏

3.3 手势交互:更自由、更灵活

借助能够感知深度信息的摄像头,手机可以更好地读懂用户的手势语言。2019年国内外手机厂商的发布大会上,LG手机G8 ThinQ以及华为发布Mate30系列推出的隔空手势,可实现一些简单的诸如滑动、切歌、截屏等效果。

2021-2022 设计趋势ISUX报告·数字未来篇

在VR应用中,目前还需要手柄设备进行控制交互。但就像触屏手机终将取代按键手机一样,VR手势交互取代手柄按键交互将成为未来趋势。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

下面是微软hololens尝试的一些可以更自然地与我们日常生活中使用的某些手势匹配的命令:

  • 选择:通过用食指指向,捏以创建光线,将鼠标悬停在上面,将手/手指移到形状中。
  • 确认:通过竖起大拇指,确定的手势,点头。
  • 取消:拇指向下,通过摇动否定,交叉双手。
  • 删除:通过丢弃,轻弹,挥舞。

未来虚拟世界的人机交互方式一定是多种自然交互的混合,我们称之为“多模交互”。用户可以通过声音、肢体语言、信息载体(文字、图片、音频、视频)、环境等多个通道与计算机进行交流。混合 GUI、VUI、手势、体感等多种交互方式,更加自然和充分的模拟人与人之间的交互方式。

四、虚拟世界感知体验:更临场和沉浸

在现实世界中,人类通过视觉、听觉、触觉、嗅觉和味觉感知真实的世界。同样在虚拟世界中,要做到沉浸感和临场感需要在感知层面缩小物理世界和虚拟世界之间的差距。五种感官中,视觉、听觉和触觉所占比例最大,虚拟世界的虚拟体验也主要集中在前三种。

2021-2022 设计趋势ISUX报告·数字未来篇

人类感知外界信息的途径

4.1 视觉:裸眼真实面对面

虚拟世界在感知层面最先要突破的就是视觉层面的极度真实感,毕竟这占据着人类信息感知83%的压倒性比例。谷歌Starline是一个软硬件结合的技术项目,目的是实现远方的人们之间的面对面交流。Starline使用摄像头捕获用户,进行虚拟世界的三维重建。通过实时数据压缩和传输,最后使用一种光场显示系统,让用户可以在裸眼状态下感受面对面的真实感。

2021-2022 设计趋势ISUX报告·数字未来篇

4.2 听觉:置身空间环绕声场

虚拟世界的临场感仅靠视觉是远远不够的。为了实现更逼真的效果,还原人耳的听觉效果、塑造360度的空间音频体验可以被认为是还原临场的关键。声音的临场感来源于真实世界的听觉环境:我们时刻都被声音笼罩,无论我们是否有意识地倾听。这种无处不在的声音能够提供重要的位置和空间线索,对于声音的感知能够提供给我们在特定情况下的位置信息。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的架构中,声音能够通过空间音效来呈现,以还原现实的声音效果,声音融入故事情节,并将虚拟空间从平面感扩展到三维的立体感。3D的空间音频创造出比单独的视觉效果更广阔的认知领域,让用户完全沉浸在音效空间之中。

举个例子,当你在雷雨中,传统的游戏音效让你仅仅感受到雷声在你身边,但在虚拟世界世界里,雷声从天上传来,雨声喧嚣不绝,你还能够听到雨滴落在地面和头顶的声音。这样逼真的音效有助于让游戏玩家沉浸在更熟悉的情景中。

4.3 触觉:在空气中感受触摸

在PC和手机已经非常普遍的现在,人们感受过游戏中的震动特效,或者手机静音时的嗡嗡声。但这些触觉震动对虚拟世界来说还过于简单,无法复制触摸真实世界对象并与之交互的丰富感觉。

因此想要将虚拟空间打造为“现实环境”,触觉也是关键的感官之一。我们无时无刻不在触摸物品,而虚拟世界里的触觉反馈是一种力的反馈,能够将虚拟接触转换为物理的感知。这是一种特殊的触觉反馈形式,通过技术,简单的穿戴设备就可以让身体感受到不同层次的触觉。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

目前,可用于各种应用的薄型触觉手套和热显示器已经逐渐问世。即由硅胶和电极制成的柔软、灵活的人造皮肤,通过自我监控以提供准确的信息,使用微电流技术将逼真的触摸感受反馈给用户。这种手套能够通过上百个力反馈点来感受虚拟物体的形状、纹理和运动、尺寸、重量、冲击力,甚至温度。

五、虚拟世界产品玩法延伸

虚拟世界奉行“开放共创”的理念,并受到加密技术的支持。这在产品玩法和数字资产领域也带来新的发展方向,值得设计师关注。

5.1 游戏和社交更高度的融合

虚拟世界产品领域,游戏和社交是主要的突破口。社交的内容是游戏,游戏是特定情境内的社交。因此,社交游戏化是将社交通过游戏的方式来展现,让用户在玩游戏的过程中进行社交。

而社交游戏化则是通过将游戏的机制融入社交系统中,从而让用户在社交的过程中,有游戏般的体验。游戏和社交的的高度融合是未来虚拟世界产品发展的重要趋势。以《Roblox》为代表的开放世界游戏与传统的MMO(大型多人在线游戏)相比,最大的不同点在于更加开放的社交生态。

作为游戏UGC创作平台,在这里玩家可以开发自己的游戏,也可以玩别人开发的游戏建立了稳定的虚拟世界社交关系。以人气较高的《Adopt Me!》为例。《Adopt Me!》的玩法是玩家扮演家长或者孩子,选择收养孩子或是被收养,整体玩下来形式类似过家家。玩家可以购买手推车、妆发等各式各样的付费道具装扮自己。这是一种更加沉浸和开放的社交模式。

2021-2022 设计趋势ISUX报告·数字未来篇

微软旗下公司开发的《我的世界》是一款和《Roblox》画风非常相似的开放世界游戏。2020年加州大学伯克利分校还在《我的世界》里举行了虚拟的毕业典礼,包含了现实流程中的校长致辞、学位授予、抛礼帽等。

2021-2022 设计趋势ISUX报告·数字未来篇

年轻新世代更青睐于轻松、趣味娱乐的社交类游戏,通过小游戏+语音互动等方式来制造丰富和封闭的娱乐场景,释放社交压力的同时增加趣味性和沉浸感。

2021-2022 设计趋势ISUX报告·数字未来篇

5.2 加密潮牌和艺术收藏崛起

和元宇宙一起走红的还有NFT。NFT全称为非同质化代币,简单来说,他具有唯一性和不可拆分性,这使得它可以和现实世界中的一些商品绑定。NFT 流动性高可随时交易以及鉴别,独一无二的艺术创作使其具备收藏属性,加密处理使得其难以复制仿造,最终成就了它的稀缺和价值。

前不久,Nike 宣布收购了仅仅成立两年的虚拟运动品牌 RTFKT。RTFKT 这个名字因为与英文「artifact(人造物)」发音相似而来,同时这个名字也代表着其品牌理念。有人这样评价 RTFKT:如果在你小的时候曾想拥有一双 AirJordan 的话,那么当你的孩子出生他会想要一双 RTFKT。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

无聊猿猴被很多 NFT 玩家认为是在 CryptoPunk 之后最成功的 NFT 收藏品项目,甚至部分用户认为它比 CryptoPunk 还要成功。无聊猿游艇俱乐部(Bored Ape Yacht Club)简称BAYC,是一个基于以太坊的NFT集合,包含10,000只独特的无聊猿(Bored Apes)。每只无聊猿都有一系列特征,这些特征由170多个特征以编程方式生成,包括表情、服装、头饰等。

2021-2022 设计趋势ISUX报告·数字未来篇

前不久,adidas 三叶草宣布与 Bored Ape、The Sandbox、Coinbase 合作,正式进军“元宇宙”,加入 NFT 世界!

2021-2022 设计趋势ISUX报告·数字未来篇

几周前虚拟艺术创作团体RTFKT Studios 与村上隆合作推出的「cloneX」系列发售。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

5.3 设计版权得到更好的保护和增值

加密艺术家和设计师可以利用NFT创造出独一无二的数字艺术品,助力设计版权增值。鹅厂23周年,腾讯公司为员工发放了 23 周年纪念版NFT“数字藏品”,由腾讯旗下NFT交易平台「幻核」团队设计发行,腾讯旗下联盟链“至信链”提供链上存证。

该系列NFT以QQ企鹅形象为基础,进行了IP衍化,每一个形象都各不相同,每只QQ企鹅共有6个自定义部分,每个部位随机展现不同元素并组合成独有形象,共发行72000枚。其中有1000枚彩蛋款特殊造型“致敬”名人:李小龙、卓别林、诸葛亮、牛顿、爱因斯坦等等。

2021-2022 设计趋势ISUX报告·数字未来篇

近日,京东也正式上线「灵稀」数字藏品交易平台,该平台所有数字藏品将由京东云提供的区块链技术服务京东智臻链进行唯一标识。目前国内布局数字藏品交易平台的科技巨头已经有三家:蚂蚁旗下的「鲸探」、京东的「灵稀」以及腾讯旗下的「幻核」。除了后者是独立APP,前两者均为小程序。

2021-2022 设计趋势ISUX报告·数字未来篇

六、总结

虚拟世界时代将是一个以“设计”驱动的时代,设计师们将成为虚拟世界里的造梦师。面对虚拟世界的机会和挑战,设计师责无旁贷。正如《人类简史》提到过的,“想象”是人类能一步步发展到今天的关键。我们无法确定未来世界的具体样貌,亦无法确定虚拟世界是否会到来,但虚拟世界的丰富将是必然,未来亦会有更多的设计师参与建设。

 

作者:腾讯ISUX,微信公众号: 腾讯ISUX

本文由 @ 腾讯ISUX 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


iOS界面设计:12个优秀案例激发你的灵感

seo达人


那么,如何设计出一款界面精美的移动端App呢?

如果你是为iOS设计应用程序,那么此文你可以好好看一看。我们都知道用户界面会直接影响到用户体验。所以本文中,我首先精心挑选了12款最佳iOS移动应用程序模板和案例,它们都有着优秀的iOS用户界面设计(iOS设计模式)和良好的用户体验,涵盖生活类,杂志类,体育类,天气类,网上购物类等等。此外,本文还提供了一些iOS人机界面设计指南。希望能对您有所帮助。

1. City App

类别:导航

系统要求:支持iOS 9.0以上

City App是一个iOS应用程序模板,也是一款以用户为中心的信息类集合软件。City App用于提供城市指南解决方案,并可以显示你所在城市的有趣地点,并加以描述性介绍。

用户还可以直接通过相机照片搜索图片所在定位,一张图片就是一个数据的集合。Admin后台可集中管理地点数据,但您可以对其编辑,更新或删除。来自世界各地的风景优美的图片是界面色彩的主要构成,非常美观。

 

2. Triibe

类别:生活方式

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

Triibe是一个引领全新的社区类iOS应用程序,它是专门为制作达人设计的一款产品。它提供一种最简洁、直观的方式展示你的手工创作和学习创意。任何题材设计,包括工艺,烹饪,家居,时尚等等,都可以得到展示。该App的一大特色使其精美的界面,用户在这里上传和展示其手工作品,搭配纯净的浅色背景,几乎和任何的设计作品都能呼应。

 

3. Design Events near you

类别:活动

系统要求:没有限制

Design Events,顾名思义,就给人一种充满设计感的印象。它是由来自印度的一位才华横溢的设计师Johny vino设计的。它一款典型的iOS应用程序,主要用于发现你身边的各种设计活动以及您所在城市和附近地区的各种户外活动。它可以智能的进行有趣的活动推荐。该App的动画交互和过渡都非常简洁流畅,搭配明快的配色,让人觉得眼前一亮。

 

4. Trove

类别:播客和时尚

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一个非常酷炫时尚的iOS应用程序。借助Trove,您可以随时随地找到自己喜欢的风格,获取来自世界顶级风格影响者的无尽灵感和建议,追随顶级时尚博主。浏览“精选”服装,可以发现并关注与您风格一致的博客。此外,“My feed”选项卡,可以让您随时查看收藏夹,并将物品添加到您的收藏夹中,以便稍后再购买或可以选择立即购买,你的所有选择都是自由的。

 

5. Nowait Guest

类别:食品和饮料

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

Nowait Guest是一个简化生活的iOS App。使用该应用程序,可以为您节约大量的订餐等待时间,很餐厅都已经开始投入使用该App,以方便其顾客可以提早了解其订餐情况,包括Chili’s,Buffalo Wild Wings,First Watch等。用户在家时,就可以随时查看附件餐厅的当前等待时间,然后做出决定是否前往。餐厅的图片使用非常吸睛,整个界面看起来让人觉得“垂涎三尺”。

 

6. The New York Times

类别:杂志和报纸

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一款家喻户晓的应用程序,帮助您随时随地掌握最新信息,对于新闻爱好者和喜欢阅读的用户而言,这是一款比书美观,但和书一样能用文字传达信息的程序。该程序与iPhone,iPad和Apple Watch的NYT应用程序一起获得过闻类应用程序奖项。它具有新闻快讯,多任务处理,晨报和晚报,播客,保存文章以供日后在任何设备上阅读等功能。

 

7. iPhone X – Todo Concept

类别:杂志和报纸

系统要求:iOS 9.0或更高版本。与iPhone,iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong为Norde设计。它是基于iPhone X概念而制作的一个新原型。该原型的草图和psd模型都可以免费下载。它是设计师特别为iPhone X的发布而设计的。它的动画过度和转换都非常流利,其色彩选择鲜明大胆,极富感染力。留白的界面设计模式,和各种纯色背景都能形成鲜明对比,突出了重要信息,又美化了界面。

 

8. Cloud Music Offline MP3 Music

类别:音乐

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

对于喜欢听音乐的人来说,这是一款不容错过的音乐应用程序。您可以轻松地将音乐从云端下载到您的设备并脱机播放。您的设备上就是一个无限量的音乐库。其音乐播放列表非常有趣,设置了动画多样的操作按钮。整个界面白色纯背景,干净而简洁,用户的注意力会停留在其喜欢的音乐上,不会分散。该程序支持所有最流行的音乐文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

 

9. KicksOnFire: Buy Sneakers

类别:运动

系统要求:iOS 8.0或更高版本,与iPhone,iPad和iPod touch兼容

这个应用程序是是专为运动鞋发烧友设计的,主要是推送新款运动鞋的特别发布日期及其相关新闻。该程序是App Store下载量最大的运动鞋发布日历类应用程序,不仅是获得第一手运动鞋咨询,您还可以在这里购买您最喜爱的运动鞋。其推送会基于您的个人资料智能进行个性化的发布和价格估算。

 

10. Airbnb

类别:旅行

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

家喻户晓的一款App,风靡全球。当您准备旅行,从Airbnb开始享受难忘的旅行体验吧。这里,所有关于旅行的事情都变得更加美好,比如寻找旅行冒险,远游或找到一个全新的地方。游客可以获得度假屋租赁,体验一种新体验,并在世界各地参观的地方。如果您有房屋待租,Airbnb也是一个最佳平台,在这里,你绝对会当一个优秀的“房东”。

 

11. Local Weather Radar & Forecast

类别:天气

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

该程序是一个当地突破性的天气新闻播报App,也是一个美国本地,乃至世界各地的交通应用程序。只需一个点击,就可以来回切换地位,以便随时查看您的朋友和家人所在地的天气情况。该程序还可以以小时来记录您所在地区的气温变化情况,形成以个独特的“气温变化”列表。

 

12. Sofa

类别:电影,电视和书籍

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

这是一款iPhone应用程序,是可以让您沉浸在书籍,电影或电视节目中度过美好时光的一款App。您可以自定义创建电影,电视节目,书籍等列表,也可以将电影,电视节目和书籍添加到任何列表中。当您需要搜索某一条目时,可以通过向下滑动操作来直接解锁。

以上是2018年12个非常棒的iOS移动应用程序,它们中的大部分都位于App Store排行榜的首位,下载次数和使用人数都几位可观。看了这么多成功的iOS应用程序,作为设计师,你有没有思考过,这些App成功的秘诀的是什么?

不难发现,出色的用户界面和用户体验至关重要。iOS设计主题将就明晰、尊重和深度,这意味着,在整个iOS系统中,文字在任何尺寸的设备上都是清晰易读的,图标是精确而清晰的,并且需要流畅的动画和交互,有序的视觉层次等等。总之,您设计出来的App需要满足用户对质量和功能的高期望值,才有可能成功。

 

那么,设计一个美观精细的iOS移动界面都有哪些必须注意的点呢?

1. 排版

1)字体

字体选择不宜多,多则杂乱。只需使用单个字体并使用几种字体变体即可。苹果公司使用San Francisco,并根据产品功能选择字体。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,旧金山变体是SF UI Text和SF UI Display。你只需按照规则即可。但为了达到文字的易读性和可读性俱佳,关于字体选择和字体布局,你还是要根据具体情况仔细斟酌。

 

2)字体大小

iOS的字体大小有其比较明确的规范,具体查看下表:

 

2. UI设计中的颜色

色彩的魔力不言而喻,人都是视觉性的动物。颜色可以传达活力和信息,提供视觉连续性,响应用户行为提供反馈、帮助人们可视化数据。自iOS 7以来,Apple一直在为其操作系统界面和预设应用程序设置色彩明朗鲜艳的调色板。关于颜色的选择比较自由,你可以使用下面列出的默认iOS调色板,也可以自己定制,以便在同类App中可以脱颖而出。

了解更多:如何在UI设计中明智地使用颜色来创建完美的UI界面?

 

3. 图标

iOS的图标风格是简单易懂,并且专注于某个功能点或者信息点。通常情况下,iOS应用程序需要使用到不同尺寸的图标。比如,用户在安装某一App后,在主屏幕可能需要使用较小的图标,但该程序在App Store里又需要更大的图标。关于iOS图标大小,也有比较明确的规范:

 

4. iOS 11中的更新

1)加粗的导航设置

这几乎是iOS 11中最令人印象深刻的变化。使用粗体标题可以让用户快速了解其当前位置,并进行快速标签切换。

 

2)界面布局中的空白区域

iOS 11的标题文本包含一组元素,其中包含图片和描述,这些元素可以保持组元素之间的较大间距。在这种情况下,设计元素保持足够的间距并且可以用于区分不必要的装饰元素之间的层次关系。

 

地址:Mockplus

作者:jongde

 转载请注明:学UI网》iOS界面设计:12个优秀案例激发你的灵感

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何在界面设计中使用留白

seo达人


  01 .认识留白 

在介绍如何使用留白提升用户体验之前,我们需要先明确留白的意义。

留白是页面元素与元素之间,以及元素周围的空间。当设计师谈论留白时,实际上说的是负空间,术语“负空间”起源于传统艺术形式,它让我们更准确地捕获物体的形状。

“Suprematism: Self Portrait in two dimensions”

负空间就是元素之间的部分  by Kasimir Malevich

 

虽然我们称之为留白,但并不意味着就是白色的。只要该空间没有任何的文字和图像,即使被填充了任何颜色,这也算是一个留白。所以留白与实际的白色并没有关联,“留白”就是“负空间”。

 

 02 . 为什么留白很重要 

留白是一个好设计的基本要素,与传统艺术一样,物体在GUI里也需要负空间,文字,Button,Logo,和其他元素需要空间去呼吸,所有优秀的用户界面里,从顶部到底部,页面中所有的元素都有适当的留白。

空白可分为两种类型:大留白和小留白。

大留白

 

小留白

 

Note
小留白:文本和网格之间的空白,它有助于内容的可读性。
大留白:页面上主要元素之间的空白,与小留白不同,大留白是整体设计的容器。

 

 03.七种影响用户体验的留白 

留白是平衡设计元素的好工具,帮助我们更好得组织内容,提升视觉信息传达的体验。

— 1 强调特定元素 —

强调某种元素,是设计师最常见的任务之一,虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上,在焦点的周围运用留白往往都能获得比较好的效果。

距离和注意力之间有特定的联系,较大的距离能吸引人的注意,周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素,例如一段内容,较大的Padding值会加强这个区域的吸引力,因为屏幕上没有其它元素可关注。

物体周围的留白越多,就越容易吸引眼球。

在下面的例子里,Google在设计中大力倡导留白,留白很好地传达了设计的意图,我们的注意力在页面的主要目标上,不会分散给其他区域。

MailChimp的主页运用了相同的方法,来突出操作按钮(call to action),你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。

 

— 2 链接相关元素 —

当我们在检查元素布局时,通常把它看做是一些对象的组合,这是因为我们的大脑会根据物体之间的相对位置,来创造一个关系模型。格式塔的法则解释了,临近的物体会被看做是一个整体。留白也提供了一种视觉线索,看一下这张图:

很可能你看到的是两组点阵,而不是12个原点,这是12个相同的点,唯一不同的是他们的间距不同。

这个法则也可以用于交互设计,我们来看下面的Web表单。

  • 相关元素成组:我们知道,一组元素靠在一起时,看上去是有关系的,所以相关的标签要靠得近。左图较难传达出标签与输入框的关系,而通过调整间距,如右图,表单的可浏览性提高了。

  • 相关信息成组:众所周知,长的表单让人感到压迫。用户在填这些表格的时候会变得犹豫。把相关的字段组合在一起,能帮助用户了解他们必须填写的信息。以下的形式中,两种表格都有相同数量的字段。不同的是右边划分了三个组,内容的数量是相同的,但是给用户的印象大不相同。

 

— 3 防止视觉杂乱 —

许多的App和网站承载着太多的信息和元素,没有足够的呼吸空间。这通常由于产品创造者希望传递太多的信息,不幸的是,用户的关注度有限,越多的元素争抢着注意力,用户能够关注到的就越少。

可以看下面的例子,这是一个元素太多引起的极端案例。

当每个看上去都一样的时候,用户选不出重要的那一个

 

许多网站有着相同的问题,缺乏留白会给用户的眼睛和耐心带来压力,充斥着文字和图片的网站使用户产生挫败感,使他们逃离。

杂乱的页面没有吸引力,并且不会让用户想要阅读内容,尤其是当没有视觉层次时。

过多的信息负载让界面变得混乱,那么减少混乱就能提高界面的可理解性:通过消除干扰,你可以强制用户只关注即时可见的内容,你可以用留白来减少压迫性,留白可以减少噪音,让用户更能聚焦。当布局达到了留白平衡,各个元素更容易被解读时,就会带来更好的用户体验。

Tip
请尝试“5秒测试”,观察一个页面5秒钟,然后回忆你记得的内容,是否是你想要强调的元素,这将帮你了解页面中是否有合适的留白。

 

— 4 通过互动内容引导用户 —

如果你希望用户的视线从一个点流向另一个点,你需要给他一个这么做的线索,这个线索就是留白,留白运用的得当时,能为页面创造自然的视线流动。

特定的留白可以实现有效引导、保持读者的兴趣,如下图所见,Dropbox通过锯齿模型引导用户浏览一系列产品的关键特征。

空白可以帮助设计师讲故事

 

不对称是另一种留白技巧,可以用来引导用户对某一部分的注意,当一个元素运用了不对称留白,它会立马就会从周围的元素中跳脱出来,看起来更有活力。如果你要在页面中设计一个链接或者按钮,这种方法可以有效引起别人的注意。

非对称留白非常适合聚焦页面上的特殊区域

 

— 5 提高可读性 —

内容为王,内容是大多数应用程序和网站的价值,这就是为什么良好的可用性的一个关键方面是内容的可读性,很多因素可以提高可读性,比如字体的大小和颜色,或使用标题,留白是其中一个重要因素,因为它对内容的可读性有直接的影响:

行间距可以大大提高一段文本的可读性,一般来说,行间距越大,用户阅读时候的体验就越好,但是太大会破坏统一性,使得设计中断。

段落和文字块之间的留白有助于帮助人们更好地理解阅读的内容,根据2004年的研究,这种空白增加了近20%的可理解性

 

— 6 运用视觉分隔线 —

设计师经常使用横向或纵向的线去创造分隔线,虽然这样的分隔线在大多数情况下是可以的,有一个主要的缺点,大量分隔线的使用会导致视觉的噪音,造成密集拥挤的页面。

随着用户的偏好向更简洁的界面转移,对UI中的基本元素进行解构是成功的关键。可以用负空间来布局,而不是线,更少的分隔线能营造清爽、现代和更实用的感受,大方地使用留白可使一些复杂的界面看起来更简洁友好。这一变化背后的真正意义在于,在关注内容和功能同时消除冗余的元素。

 

— 7 创造成熟优雅的感受 —

虽然留白经常被看作是改善用户体验的技巧,但它也可以被用于纯粹的审美目的,大量留白的网站能反映出极简和奢华感。

留白有助于提高整体设计的基调——通过把更多的焦点放在产品本身,使产品看上去更奢华。

 

04. 关于利益相关者的几句话 

现在你可能知道了留白的重要性,而另一方面,留白可能引起设计师和利益相关者的矛盾。“留白太多了,我们可以用来做什么?”是我们经常从利益相关者(客户或经理)那里听到的。

把这种要求作为一个机会去教育利益相关者,作为设计师,我们的工作就是帮助他人理解为什么留白是用户体验重要的组成部分,宣扬并解释你的思考过程,如果这不起作用,你可以采用A/B测试,测试一个设计的两个版本,一个由设计师提出,一个由客户提出,用户可能会喜欢那个不那么混乱的版本。

 

05.结论 

留白不是一个空白的画布,而是一个强大的设计工具,但是这个工具很难掌握:现实应用中的留白既是艺术也是科学,掌握如何使用留白来创建良好的布局需要实践。你实践的越多,学到的也就越多。

 

原文地址:medium

译文地址:51UXC(公众号)

译者:51UXC 翻译社

 转载请注明:学UI网》如何在界面设计中使用留白

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



为什么界面设计大多喜欢用蓝色?

seo达人


 为什么选择蓝色?

理由很多,我这里罗列一些:

1、人们就是喜欢蓝色

问卷调查显示大部分人把蓝色当做它们最喜欢的颜色。因此蓝色被认为是全球最安全的颜色。

色彩偏好是视觉体验中的重要一环:

 

2、与大自然的关联

蓝色与净水、晴空等自然景观能够产生强烈的关联,这提高了人们对它的喜好。

 

3、界面设计的通用颜色

从一个界面设计师的角度来看,蓝色绝对是一个有用的颜色。红色、橙色和绿色通常都是有含义的,例如错误、警示和完成。蓝色相对来说就成为了非常好的选择。

 

4、科技创新感

这也是很多公司使用这个颜色的原因。

 

5、安全感

在旅游网站上,蓝色是一种非常通用的色彩,因为它可以表达可以依赖的感觉,这对于旅游来说是件好事。

 

6、让产品看起来更加可信

很多情况下,说服用户使用我们的产品至关重要。这时,蓝色就可以表现出信赖感。很多像Dell、IBM、Intel、AT&T和支付宝这样的科技公司利用蓝色来传递信誉信息,因为他们的产品是人们每天都要依赖的。

 

7、色弱

很多种色弱患者(如最常见的红绿色盲)都可以看得到蓝色,这一点上蓝色明显优于诸如绿色和红色等其他颜色(Z Yuhan:幸运的是,色盲虽然在百种男性中的发病率高达10%,在亚洲人里却十分少见)。

普通人看到的颜色 VS 色弱患者看到的颜色:

Facebook用蓝色,因为扎克伯格就是色盲患者,他说:“蓝色对我来说是最丰富的颜色,我可以看到所有种类的蓝色。”

 

结论

我希望读完本文,你能了解为何蓝色在设计师中如此流行。然而这并不意味着你应该把你的方案的主色调改成蓝色。

蓝色也不是最好的万能色,万能色并不存在。

在一个网站或App上行得通的颜色,可能在另一个上就不能用了。最安全的方法还是根据目标用户的喜好来选择。

所以最终,用在你设计上的最佳色彩应该是你的用户所认为的最佳色彩。

Z Yuhan:我发现我的手机上橙色比较多,文化差异,还是这几年激烈竞争的变化?

 

原文地址:babich

译文地址:知乎

译者:Z Yuhan

 转载请注明:学UI网》为什么界面设计大多喜欢用蓝色?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



“手把手教你设计”—12个最佳手机APP界面设计教程

seo达人

如何使用Photoshop来设计手机UI界面

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手,又在做UI设计,这个教程教你如何使用常用的Photoshop设置来达到更好的效果。本文是以iPhone为实例告诉你怎么在UI设计中使用Photoshop,完全是初学者的教程。

 

2. How to Design an iPhone App in Photoshop

这篇文章将为我们介绍使用Adobe Photoshop为iPhone设计一个简单的3页目录列表应用程序。并且将一步步地指导你完成这些步骤,还涵盖了使用Photoshop设计iPhone应用程序的所有基本原则。

 

3. Design an App Landing Page in Photoshop

在这个教程中,我们可以看到一个应用程序着陆页的详细设计过程。设计师使用Tuts Android应用程序进行演示,强调其功能和优势,利用多个CTA来完善整个着陆页的设计。

 

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要设计一个像Facebook或者Instagram这样成功的登录界面设计,那么这个完全是你必看的基础教程,视频中教你如何选择颜色,设计按钮以及详细的步骤来展示登录界面的设计过程。视频虽然是四年前的,但是里面的设计依旧不过时。

 

如何使用Sketch来设计手机UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

开始一个新的设计项目是很难的,无论你是自由设计师,还是在知名的产品公司工作,时常会感到迷茫。本文将一步步的教你如何使用Sketch开始一项新的APP设计项目。

 

2. Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial

视频主要是介绍如何使用Sketch制作一个美食类APP 菜单栏UI设计,简单易懂。

 

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款优秀的矢量设计和图形程序,很适合用于设计iOS应用程序。在这个视频中,设计师使用Sketch 3来设计一个iPhone APP用户界面。

From Idea To Reality: Designing An App With Sketch And Xcode 》这篇文章是进阶版的APP 设计教程,从理论到具体的例子讲解,非常受益。

 

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作为当下主流的设计工具,似乎有超越Photoshop的趋势。本视频介绍的是如何使用Sketch来制作一个音乐APP登录页设计,可以说是手把手的教程,每一步都非常的详细细致,非常适合初学者。

看了前面的音乐类APP登录界面的教程, 你是否也想设计出一个属于自己的音乐APP呢?接下来我将介绍如何通过结合Sketch和原型设计工具设计一款音乐类的APP(Prototype an music app with prototyping tool)

 

TIMING

这款原型音乐类的APP在Mockplus设计大赛中斩获头筹,设计师通过采用Sketch以及Mockplus的结合,做出了高保真原型。这个APP主要体现一种复古的视觉效果,磁带转动的效果是这次视觉上的设计重点。

 

必读的手机界面UI设计好文

1. The 10 principles of mobile interface design

计算机和手机是人们日常工作和生活必备的通讯工具。但在许多方面,手机往往更加强大,手机更加的私人化,与我们的联系更紧密。鉴于移动手机和计算设备之间的许多差异,移动设计与桌面设计的设计大不相同。这篇文章详细的向我们介绍了移动界面设计的基本原则,帮助设计师们开发移动应用程序的独特力量。

 

2. UI Design Do’s and Don’ts

iOS良好的优化了用户面设计,并提供给用户优质且具有吸引力的用户体验。在开始你的iOS设计之前,一定要清楚Apple官网的关于iOS常见的设计原则,来在增强手机应用的可用性和吸引力。更多关于优秀的iOS界面设计,请阅读《iOS人机界面指南》。

 

3. How to use colors in UI Design

颜色可以说在UI设计中至关重要。用的好,那就成功了一半,用不好,可能导致整个应用失败。在你的配色方案中,最好只使用三种主色跳,使用的颜色越多。越难实现平衡。这篇文章不但提到基础的用色知识加上实例解释,还有常用的工具介绍。

 

4. 10 Best APP UI Design for Your Inspiration

每位UI设计师都梦想着做出最出色的界面(UI)设计, 能够脱颖而出的手机界面设计则少之又少。设计师们在设计UI界面时,往往会参考来自不同设计师的设计,这篇文章列出了2017年最出色的的10个手机应用界面设计范例,给设计师们谋福利。

 

总结

移动设计不断地在发展,如果你想跟上这个时代,你需要不断阅读和观看高质量的教程或文章。在本文中,我收集12个最佳教程的示例来教初学者如何学习手机UI界面设计,希望你们能从中受益。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》“手把手教你设计”—12个最佳手机APP界面设计教程


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



10个最新优秀手机应用界面设计实例

seo达人


1). YONO.MP3 mobile app – 音乐软件

*设计师:Anton Shmatko, Green Shark Studio, Pavel Khenkin

*软件介绍:YONO.MP3是一款即可欣赏音乐, 也可收听广播节目, 了解最新时讯和趣事的手机端音乐软件。它会是你闲暇时搜索和分享歌曲,歌手和专辑的理想工具。

*亮点:该款软件采用了一个极具特色的配色方案 — 所有界面整体使用黑红两种颜色的对比, 经典而不失大气。 而局部渐变色的使用, 也让其功能和按钮更加突出,极具层次感。而且, 软件图片, 按钮和图标的层级叠加, 也使整个界面更加的时尚柔和。总之,软件界面设计整体简洁漂亮而不失易用性。

 

2). Watering Tracker App – 生活类软件

*设计师:Tubik

*软件介绍:Watering Tracker app, 顾名思义,就是一款可以追踪盆栽或植物的水分情况,及时提醒用户浇水的生活类手机应用。

*亮点:首先,这种能够监测植物水分情况,通知用户浇水的创意,新颖且有趣。其次,界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适,带给用户好心情。 当然,作为植物监测的工具,同时也设置了显示各株植物水分,湿度,光照之类细节信息的功能区,即点即可了解到植物的具体生长情况,简单易操作。而且,配色方面,黑色背景搭配白色和绿色图片及按钮,符合整个植物主题的同时,也更易于用户接受和使用。

 

3). Listen – 音乐软件

*设计师:CD UXT

*软件介绍:Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰,用户可以简单的通过不同频道(例如最新歌曲,电台,主体和专辑等)和不同场景(例如驾车,运动,工作和约会等)快速的搜寻到最喜爱的歌曲。而且,软件还特别为用户提供了根据不同心情播放不同音乐列表的功能,更具个性。总之,喜欢闲暇时沉浸在自己的音乐世界的你,它会是你最佳的选择。

*亮点:软件整体采用经典的蓝色背景搭配白色字体和同色系图片,更加柔和舒适。一系列插画风格 的场景和频道对应图片,也使整个界面设计更加美观有趣。结合明亮阴影的图标和按钮让软件对应功能更加凸显的同时, 更能易于用户识别使用。 针对不同部件添加的灵活交互,也能够使用户具有更加流畅且愉悦的体验。总之,它是一款以用户愉悦体验为基础而设计的软件原型,值得尝试。(点击这里查看原型详情

 

4). NightOwl Coffee – 咖啡预定软件

*设计师:Queble Solutions

*软件介绍:NightOwl Coffee是一款能够帮助用户根据自己的需要快速订购各式咖啡的手机应用软件。

*亮点:软件整体采用了独具特设的插画风:主页添加的由明亮颜色和各种几何元素呈现的卡通咖啡机,可爱且切合主题。纯色的背景搭配上灰色插画以及黄色图标和按钮,使整个软件界面更加干净整洁,易于用户使用。

 

5). Roomframes app – 管理型软件

*设计师:Adrain Rudzik

*软件介绍:Roomframe app是一款适用于iOS手机端的应用软件,能够帮助用户记录并珍藏他们所旅行过的地方的相关记忆,尤其是他们旅行中所居住过的房间的珍贵记忆。所以,从这方面来讲,它是一款生活管理型手机应用。

*亮点:软件多处使用了框架设计,方便用户根据不同的旅店,工作区和相关新增地点,添加对应的日期,图片和描述。其简单的白色背景,使用户信息更加明显,也易于用户随时回顾或与家人朋友分享这些难忘的回忆。

 

6). iOS App Slide Car – 生活类软件

*设计师:Melany Roa

*软件介绍:iOS App Slider Car是一款专门针对iOS手机研发的应用软件,能够帮助用户分类搜索各式汽车信息,并实现在线交易的一种手机端应用。同时,它也是一款能够帮助用户结交不同汽车爱好者的社交工具。

*亮点:简单纯色的背景,使用户专注于汽车图片,价格,描述和所有者等信息。搜索界面添加各种搜索参数,用户简单点击即可实现汽车信息搜索。总之,整个界面简单,整洁而实用。

 

7). Karoline – 购物软件

*设计师:Varduhi Adami

*软件介绍:Karoline是一款手机端服装购物软件,提供了各类服装的详细信息和购买渠道。

*亮点:软件整体的粉色系配色,柔和甜美,对女性购买者极具吸引力。所有界面以服装图片为主,更易于用户根据喜好挑选。而且,添加的简单且易识别的图标和按钮,方便用户搜索和查询相关服装细节。软件界面丰富,例如主页,我的账号,我的订单,我的购物车,要请朋友,设置,购买等,能够满足用户购买时各方面的需求。所以,如果你有通过手机在线购买服装的打算,它会是不是错的尝试。

 

8).Space – 管理类软件

*设计师:Doeun Shin

*软件介绍:Space是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务:早上,自动结合用户的日常习惯,提供有用的日程管理信息和建议,例如交通和天气情况等; 晚上,通过自动分析用户语音日记,提供符合用户心情的主体和提示音等等。

*亮点:该软件以插画风为基础,添加了各式动画按钮及图片,直观生动。蓝色主题,漂亮舒适,无论早上还是晚上使用,用户都不会反感。而且,软件本身添加多样的功能性界面,例如语音日记,心情日历,日常服务,节日简介等等,简单全面。总之是一款极具吸引力的管理软件。

 

9).QuickBee – 广告类软件

*设计师:Monish Mohanan

*软件介绍:QuickBee是一款广告分类管理软件,提供了生活中各个方面的信息,例如汽车,房地产,求职和教育等风方面面信息。使用者只需创建账号,即可搜寻所需生活信息,了解流行趋势,浏览各类特色广告。

*亮点:软件设计简洁,颜色搭配极佳。彩色按钮呈现多样的生活分类,整洁美观。各式框架呈现流行趋势和特色广告,简洁有序。矢量图标简单易识别。添加多种界面,满足用户各方面的需求。

 

10).Wallet – 理财类软件

*设计师: uixNinja

*软件介绍:Wallet一款能够帮助使用者理财的移动端软件。

*亮点:软件使用黑色,红色和紫色三种颜色的对比和渐变,极具特色,漂亮时尚。简易图标和多色几何图形,是软件界面更加简洁使用,令人印象深刻。

 

结语

这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。 希望他们不仅能给你新的设计带来灵感,同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》10个最新优秀手机应用界面设计实例


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档