在过去的几年中,移动领域呈指数级增长。 iOS App Store和Google Play上的Android Apps已成为智能手机爱好者的两个热点。 随着智能手机用户数量的增加,我们看到成百上千的移动应用程序开发人员向市场推出了新的想法。
最受欢迎的应用程序都带有自己的网站 。 这有助于行销并在其中树立您的名字。 与两个App Store相比,它也是一个更漂亮的在线URL。 我觉得任何成功的移动应用程序都几乎需要Web程序。
在本文中,我想介绍一下移动应用程序网站的一些最常见的设计趋势 。 建立这样的布局没有严格的规则手册。 而是有一些独特的指南和趋势,网页设计师发现这些指南和趋势可以很好地吸引观众。 结合我的iOS开发指南,您还可以组合一个出色的移动应用程序并构建其网站。
在下面查看这些概念,然后尝试将其实施到您自己的应用程序网站布局中。
设备屏幕截图
任何移动应用程序网站的重要组成部分必须是该应用程序的屏幕截图。 访问者仅对您的应用感兴趣,有什么比通过屏幕截图更快地证明其用途的方法? 您可以将设备快照适合任何布局样式,因此这不是限制因素。
Easy Chef是西班牙语iOS应用程序,它使用许多设备快照。 布局的最顶部具有不同视图的幻灯片预览。 但是当您向下滚动时,您会注意到使用iPhone显示屏的其他图表。 这些面板包括详细的标签和近距离放大的屏幕视图。 我实际上在较旧的文章中写过有关设计信息丰富的产品图形的文章。
![Easy Chef iOS App网站图形](https://i-blog.csdnimg.cn/blog_migrate/4535cd644836eb9cc32af65b8aaed964.png)
另一个有趣的设置可以在Tweetbot画廊页面上找到。 这是iPhone上非常流行的Twitter客户端,开发人员将屏幕快照放在一起。 如果您要在布局中节省空间,这可能是一个更简单的解决方案。 访客无需向下滚动即可查看特定视图。 jQuery易于实现,您可以快速组合滑动的iPhone屏幕预览。 可能难以包含其他详细信息,但是可以在另一部分中添加。
![Tapbots和Tweetbot iPhone App屏幕截图库](https://i-blog.csdnimg.cn/blog_migrate/9f595fa3ad83db2ac1272809885b130e.png)
App Store徽章
一旦完成了应用程序的构建,这项技术就显得很废话了。 徽章很快被识别为指向应用程序市场的下载链接。 Android和iOS用户都可以直接从其浏览器查看应用程序,或者在智能手机上查看时将重定向。
我喜欢以Instagram为例,因为该网站已更新为较新的布局。 它们具有支持Android Marketplace( Google Play )和iOS App Store的徽章。 两种徽章的设计都非常简单,一眼就能认出。 如果您正在寻找更复杂的设计,我建议您进行快速的盘带搜索 。 有才华的设计师通常会分享其应用商店徽章概念,以进行建设性的批评。
![Instagr.am App Store徽章-2012年5月重新设计的新版面](https://i-blog.csdnimg.cn/blog_migrate/e89d72411808304e4390117a2324dfac.png)
移动社交网络
Facebook和Twitter已切换到移动设备,但这并没有阻止其他网络的兴起。 我们看到社交网络使用移动应用程序来允许全新的交流平台。
Localmind运行于类似于Foursquare的概念,在该概念中,您注册了一个帐户并开始查看本地位置。 您可以留下问题,也可以回答其他人的问题。 他们的网站非常友好并且吸引新来者。 我特别喜欢使用自定义地图背景设计的顶部横幅部分。 他们使用渐变和背景纹理使网站拥有了自己的生命。
![移动值机社交网络应用程序网站Localmind](https://i-blog.csdnimg.cn/blog_migrate/fdc096719d8dc3afb1d4fea5f1d6d602.png)
最少的照片共享
姿势是另一个具有简约设计理想的移动网络。 您可以下载适用于iOS和Android设备的移动应用程序 。 这种感觉类似于weheartit,但它适用于移动时尚爱好者。 整个应用专注于时尚,发型,化妆和魅力。
![时尚爱好者的移动社交网络-姿势](https://i-blog.csdnimg.cn/blog_migrate/e1f190fc48a061d67ca5c954b11ffe82.png)
用户可以拍摄他们的衣服,衣服或配饰的照片,并在网络上共享它们。 关于Pose值得注意的一件事是您浏览网站的速度。 很容易找到公司博客,联系方式等。其他应用程序网站通常会忽略这些公司功能,这可能是一个棘手的主题。
如果您想引起媒体的关注,重要的是使您的网站看起来像一个真正的社交网络产品。 您不仅在尝试出售您的应用程序(通过广告或付费订阅),而且还在出售网络本身。 社交应用绝对比设计常规应用网站要棘手。 但是他们也从用户那里获得了更多的下载量,这是移动领域一个令人兴奋的新领域。
从卑鄙的开始
Web设计人员并不总是能够将离谱的图形和图标组合在一起。 值得庆幸的是,应用程序网站对于您拥有多少Adobe Photoshop能力并不重要。 实际上,我觉得极简主义可以更好地适应这种布局风格。
Leef App是iPhone的最新发布的Forrst客户端。 他们的网站包含一个漂亮的应用程序屏幕截图以及一个大胆的下载按钮。 所有页面文本都以类似于Apple的字体和配色方案的方式进行了简化。
![iOS上的Forrst Leef App-简约的网站设计](https://i-blog.csdnimg.cn/blog_migrate/317b5210eee6db1fda325d7e63ac6801.png)
Leef网站的出色之处在于每个页面元素的坦率性质。 它是公然的,没有任何隐藏或推开的东西。 我建议您尝试将这种样式用作您的第一个移动应用程序网站,如果有的话只是为了练习。 通过最小化较小的花絮并集中精力吸引注意力,您可以学到很多东西。
可爱的空白
Wood Camera App网站同样非常简单。 它们的布局仅保留纯白色背景和居中内容。 此内容包括一些默认屏幕截图,一个应用商店徽章以及一些其他关键功能。
![Wood Camera iOS iPhone应用程序网站](https://i-blog.csdnimg.cn/blog_migrate/0495b4f717dce8e6a60139e879a338e1.png)
如果您觉得简约和空白对您的布局很重要,那么请坚持使用! Wood Camera并不是一个特别令人神往的网站布局,但是它非常易于导航。 他们的网站甚至没有链接到开发者官方页面以外的任何其他内容。 这始终专注于应用程序及其提供的功能,这比浮华的图形要重要得多。 尽管这并不是说浮华的艺术品是个坏主意-它只需要适当的实施即可。
彩色插图
与极简主义方法截然相反的是一件带有独特插图的作品,我对此非常崇拜。 通常,这些额外的细节会完全把我卖给应用程序。 我可以联系的一个例子是iPhone的Barista App。 他们的网站标头上布满了少量的矢量卡布奇诺咖啡和意式浓缩咖啡。
![Barista iOS App网站矢量图形](https://i-blog.csdnimg.cn/blog_migrate/8756b9e82c85f152ca9a91c731e6b474.png)
但是请注意,向下滚动页面时没有其他图像。 整个顶部专为iPhone应用程序设计,类似于登录页面 。 这些向量立即吸引了您的眼球,也暗示了应用程序的意义。
Kitchenator是一个类似的iOS应用程序,可转换烹饪和烘焙的计量单位。 他们的标头布局使用了丰富的木质纹理,方格桌布和迷你水勺。 在您浏览内容之前,此图像就暗示了该应用程序的用途。
![Kitchenator量杯数字iOS App网站](https://i-blog.csdnimg.cn/blog_migrate/8c227852e6ebe1da5fce154b0e70ca30.png)
这种设计风格实际上贯穿整个布局。 页脚区域具有相似的木制背景和许多相同的字体选择。 这是一个非常简单的网站布局示例,其中包含一些非常强大的图形。
应用程序网站:高级展示
哪怕没有一点眼光,哪一篇文章也会完整? 除上述技术外,我还整理了这个精美的移动应用程序网站库。 注意徽标和导航方案,以及域URL。 通过研究专业人员的工作,您可以了解设计趋势并将其用于您自己的项目中。
![Bosquet App Forrst for iPhone](https://i-blog.csdnimg.cn/blog_migrate/cdeb115fb9fded84e9825685853bdb78.png)
![Android和iOS Banjo应用程序](https://i-blog.csdnimg.cn/blog_migrate/bc21bb568d4fcbaf5f56229a3d34079f.png)
![适用于iOS的iPhone Everyme应用程序](https://i-blog.csdnimg.cn/blog_migrate/9fdc1ed5f6fba1e25e1aa779da3ec3ff.png)
![社交网络Gifture应用程序网站](https://i-blog.csdnimg.cn/blog_migrate/c6967c12b9e35c90ae7e336bdca45538.png)
![Fontain iPhone应用程序站点](https://i-blog.csdnimg.cn/blog_migrate/39c2047ad0564a7456ce1b54b081f41d.png)
![ImGame社交签到视频游戏网络](https://i-blog.csdnimg.cn/blog_migrate/798ef02a9086ae57d5a5cdcd108f1235.png)
![适用于iPhone iOS的Sparrow App](https://i-blog.csdnimg.cn/blog_migrate/de6593901fbdcf122b41cb8dd4107027.png)
![文化代码iOS5 Things App待办事项清单](https://i-blog.csdnimg.cn/blog_migrate/7fcc94547ec4dc50997ed1e9c0845677.png)
![Snap Guide iPhone应用程序](https://i-blog.csdnimg.cn/blog_migrate/e4ea8d3c51411e2f5d9b3f9c18a2a0c8.png)
![iPhone版Whoovie应用程式电影评论](https://i-blog.csdnimg.cn/blog_migrate/41fab33f999551842f5630d58148d94d.png)
![iPhone的Path社交网络](https://i-blog.csdnimg.cn/blog_migrate/b654c0ee97b59bb34b6f398ff2ee8590.png)
![重复Timer Pro应用商店iOS](https://i-blog.csdnimg.cn/blog_migrate/e84079ba0b34df452d4055ff2c6be87d.png)
![最可爱的爪子iOS应用](https://i-blog.csdnimg.cn/blog_migrate/cfc3ab3e27117ec40013abe1f3c88f53.png)
![适用于移动iOS的开心果应用](https://i-blog.csdnimg.cn/blog_migrate/0fa4dee9df47d51bb5b913674394eca1.png)
![美味的iPhone应用程序Delibar网站](https://i-blog.csdnimg.cn/blog_migrate/87a438ce53846e861e38b1c6ed2e81b4.png)
![与好友iPad应用程序素描](https://i-blog.csdnimg.cn/blog_migrate/376070fca0851c80e498dbfe55e19f7a.png)
![适用于iPhone iOS的Billy App](https://i-blog.csdnimg.cn/blog_migrate/647cbce3bd9be21cb6c2e80a11678651.png)
![适用于iPhone的原始钉跳游戏应用程序](https://i-blog.csdnimg.cn/blog_migrate/59d7386dc5ceee4bf587a5bfe489e62d.png)
![停止Vom iPhone iOS游戏](https://assets.hongkiat.com/uploads/design-mobile-app-sites/19-stop-the-vom-iphone-app.jpg)
![Android和iOS Crowdspottr应用程序移动](https://i-blog.csdnimg.cn/blog_migrate/a85bf64ac3a63880240617f92201427e.png)
![蒙克iPhone应用程序网站设计](https://assets.hongkiat.com/uploads/design-mobile-app-sites/21-munch-5-a-day-app.jpg)
![适用于iPhone的Dribbble Travveling](https://i-blog.csdnimg.cn/blog_migrate/1d512a82161267bcf1737d5013c98323.png)
![单张iPhone应用程序网站设计](https://i-blog.csdnimg.cn/blog_migrate/60023b6ac843eb1db7aebf178b6dbac8.png)
![OS X和iOS App Store网络](https://i-blog.csdnimg.cn/blog_migrate/c97b85fb56fbc03b3cf37a3066ee3387.png)
![Plazaa德国iPhone应用程序网站布局](https://i-blog.csdnimg.cn/blog_migrate/8be02ba23c91596bd388d3aa10e0fb8e.png)
![iPhone的搞笑面Kong照片应用程序](https://i-blog.csdnimg.cn/blog_migrate/88bb96a9c0704548f2631ccc0d6bf6bc.png)
![iOS Float应用程序移动网站云](https://i-blog.csdnimg.cn/blog_migrate/60c0b237344d0ba66f44065d1fda6677.png)
![通过Intuit编织待办事项iOS App](https://i-blog.csdnimg.cn/blog_migrate/ecc048f23d9541ede068a7b517f60cb8.png)
![Kangaroo Bandit的Dribbble Ballin'iPhone应用程序](https://i-blog.csdnimg.cn/blog_migrate/37b92e7456536d97dc766a4cea9d4ded.png)
![Forkly社交网络移动应用程序网站](https://i-blog.csdnimg.cn/blog_migrate/aadb8e7b84ef2fb0e6c0a2ef5cdfc921.png)
![iOS应用商店的城市之路](https://i-blog.csdnimg.cn/blog_migrate/b48c16b8844f10b3e52b11a154590079.png)
![tapplace iPhone应用程序网站设计](https://assets.hongkiat.com/uploads/design-mobile-app-sites/32-tapplace-bookmarks-mobile-app.jpg)
![图片统计iPhone App](https://i-blog.csdnimg.cn/blog_migrate/99b70ede1643d5acb3eef14160466d2b.png)
![适用于iPhone的Idea Mix网站布局示意图](https://i-blog.csdnimg.cn/blog_migrate/73c68b98c578f55fd0dece16cbfecabb.png)
![加拿大假期应用程序iPhone商店](https://i-blog.csdnimg.cn/blog_migrate/01088a13449cd1109ba1c1ed3360901c.png)