恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
非官网的UI 中国 App 设计说明
0.0°
2016-07-15 原创文章 经验/观点 举报 4623 10 33 2

从《FLY》电子杂志休刊到现在的这几年时间里,很少在网络上活跃,在各种技术、设计和知识分享交流平台基本处于潜水状态。以前经常逛的中国插画网和蓝色理想网站也很少去了,说起来对大龙哥和蓝色两位大佬感到很愧疚,白混了个论坛版主的头衔却好久没尽责了……


一直潜水的话有个弊端,即使平时有看他人的作品和经验,但因为缺少分享和交流,始终是不利于个人成长的。人是社会动物嘛,怎么少得了社交呢?所以我决定以后还是多冒泡^_^


UI 中国是我这几年经常逛的设计平台之一,一直喜欢她的简约淳朴,即使有少量的广告也比其它网站的补丁式风格更让人容易接受。她就好比一位温文尔雅的姑娘而我又刚好喜欢她,既然真心喜欢就会想着为她做一些事,于是萌发了设计 UI 中国 App 的念头。搜索了一下,发现设计 UI 中国 App 的设友还是蛮多的,看来很多人跟我一样喜欢她^_^


在动手设计之前先对网站做了稍微深入的了解,并回顾了一下自己作为一名设计师在网站内最频繁的使用场景,然后结合了移动互联网的特性,对主要功能模块和信息结构进行梳理和调整。


下面的2张图是 UI 中国网站的主要功能模块和调整后的 App 功能模块,有了思维导图,可以方便自己对即将要做的事有更清晰的理解。

思维导图


我对这个 App 的定义是“轻”,保留最基础、最常用的“浏览作品”以及与此相关的部分功能,所以做了减法和重组:

  • 去掉[招聘]和[更多]这两栏;
  • 简化作品的排序和筛选;
  • 将网页底部链接的内容整合到[关于]栏目里;

整理后的导航变成了这样:

导航


一开始打算采用舵式导航并把[发布作品]放到导航中间位置,但考虑到在移动端上传作品不如电脑端方便,并且跟一些摄影类应用不同,手机随手拍了发布摄影作品就直接在移动端完成了,而咱们设计师的作品通常是在电脑端设计完成,还有好多设友喜欢做长图片,所以打消了这个念头,最终把这个功能入口放在了首页右上角和[我的]界面中。


这是一部分草图:

草图


因为不涉及到团队合作,自己也比较清楚要做的是什么,所以并没有使用 Axure 做完整的原型,草图就相当于原型了。


说干就干,马上进入设计阶段,最先设计的是首页。关于作品的几个属性和分类,在2种方案中纠结了一下,后来选了方案二。作品列表分为大卡片式和陈列馆式2种,可自由切换,以图片为主,舍弃了许多非重要信息,陈列馆式更加直接,只显示作品缩略图。


分类方案


滑动作品列表时的样子:

Image title


作品详情界面的点赞功能,其实个人觉得用“大拇指”或者“心”形图标来表达会更好,看了一下 UI 中国网站在移动端用的是“心”形图标,跟桌面端的“花盆和叶子/花”不统一,感觉看起来有点怪,所以最终为了和 Web 端的点赞功能保持一致,保留了“花盆和叶子/花”概念。在设计时做了些妥协,后来选了方案二:

点赞方案


许多设友在设计个人中心里的个人名片界面时,大多数都直接照搬了 Web 端的设计,其实在移动端的效果并不理想。稍微做了一下改良,同样有2个方案,方案一是通过左右滑动来切换,方案二是点击向下展开/向上闭合,最终选了方案二:

个人名片方案


之前有提到过,我将[发布作品]的入口放到2个位置,一个在首页右上角,另一个在[我的]界面里:

我的


最近工作忙所以只做了一部分界面,而且一开始就计划按照“实用第一”的原则来设计,整个设计尽量和现在的 Web 端保持一致性,许多地方做了妥协,设计上并没有太多酷炫吊炸天的东西,我觉得更重要的是整个设计从零到有的过程吧。以后说不定会将 UI 中国当成自己的产品,然后按照自己的想法做一个无拘束版本^_^



It's Showtime!

UI 中国 App


Ok,点赞和拍砖时间到,请大家点击下面的…纳尼!只有点赞按钮?好吧,请大家点击下面的赞^_^


更新:2016-07-15

收藏

10人已收藏

schiy

个人网站:https://schiy.com

  • 22

    作品

  • 87

    粉丝

  • 38

    关注

  • 易标网整站设计
  • 乐标网网站设计
  • Little Forest(小森林)主题页面设计
  • 35 分钟,简单三步打造简洁型展示网站

    猜你喜欢

      2016-07-15 原创文章 经验/观点 举报 4623 10 33 2

      非官网的UI 中国 App 设计说明

      0.0°

      你确定要举报非官网的UI 中国 App 设计说明

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年07月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      33
      10
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录