实训项目:站酷iPad端APP设计思路

1、这一篇完全不具备专业性,只是在目前自己所了解的知识框架下的一些无稽之谈。

2、仅仅是想把这次Pad端设计的思路整理下来,顺便当做产品课的一个小总结。

3、仅供娱乐,没有参考价值,若有什么问题您提出来,我积极改正。

首先,讲一下来源

这次老师给了6天的时候让我们对某项产品进行iPad端的再设计(具体项目不限),任务量是3张页面外加产品包装,无需做规范。好吧,这个任务量少的可怜。

鉴于时间充裕,所以用了不到两天的时间选择性的浏览了苹果官方的iOS7设计规范《iOS7人机界面准则》,个人认为了解苹果的iOS系统设计规范和安卓系统的material design设计规范有助于设计师在视觉设计时更多的考虑人机交互,而不是过多的考虑视觉表现。

然后在后来的两天好好的休息了两天,从产品课开了以后已经好多个周末已经没有休息了,一直保持着高强度,正好趁着这段时间放松一下自己,有益于身心健康,毕竟一直强压也会降低效率的。(这种鬼话应该只有自己才会信吧)

最后用了一天半的时间,把思路的梳理和纸上产品原型图以及三张页面完成了。

然后,说一下思路

iPad端与Web端、手机端的屏幕大小不同,使用情境也大不相同,Pad具有屏幕比手机大的特点的同时还拥有着和手机端一样的移动性;所以应当利用好它的屏幕空间优势,同时避免整屏幕切换,优化网站的导航层级结构,使其更加扁平化适宜于Pad端使用。

站酷网是一个设计交流的平台,导航会有很多的细项分类和功能,在展示的时候也会出现大量的图片;所以在Pad端首页设计时,就需要在保证导航的易用性,同时要兼顾大量图片的展示。在权衡利弊后,我在站酷iPad端的设计中最终采用了竖导航布局模式。

(左侧竖导航布局模式)

我一共做了3张页面,自己的大部分想法都在这3张页面里面展示了出来。

竖导航设计的优点是:

结构逻辑清晰,操作效率高

竖导航设计的缺点是:

由于导航占据了屏幕边上的一部分空间,右边主要内容的排布会受到影响,影响浏览体验。

首页

站酷网的首页在我的理解中很大的一个功能用于展示原创推荐作品,所以我在iPad端的首页设计时更加注重首推作品的展示。

由于屏幕大小的问题,在站酷网首页的滚动Banner在iPad端设计中没有加入。

作品展示采用了卡片式的展现方式,背景采用明度值93的灰色区分前景,同时为了优化浏览,避免视觉分散,卡片不添加任何图层样式,整体页面也不添加过多修饰元素。

分类导航和作品筛选方式则整合到了一起,用透明弹窗的方式展现。弹窗在打开首页的时候默认弹出,再次点击首页可以将弹窗隐藏,弹窗隐藏后再次点击首页则会打开。

(弹窗弹出状态首页)

选中用加一层透明深色图层和深灰的内阴影的方式展现,在视觉上产生选中区域整体凹陷的感觉作为选中的反馈。

(作品选中状态)

个人中心

Pad端相较于手机端屏幕更大,在主页面的附属页面中过多的整屏跳转会让操作更加的复杂和逻辑混乱,所以尽量在不必需跳转的情况下所有操作在一屏内完成。

为了让个人中心的三个不同层级内容出现在同一屏幕中,所以将页面区分成3大块。同时增强了暗示,强调了选中的反馈,并将层级区分的更加明显。

由于存在作者个人首页页面,所以在个人中心页面中点击头像和ID信息会产生跳转。

(个人中心页面)

作品详情页

为了更好的浏览效果,点击单个作品后会跳转到作品详情页,作品详情页隐藏了左侧的导航栏,点击左上角返回按钮或者向右滑动可回到上一级页面。(作者个人首页页面和其一样)

整体视觉结合Web端和手机端,进行了视觉再排版,设计再排版的目的为了提供更舒服的浏览体验。

(作品详情页)

Ps:鉴于首页有弹窗模块的存在,以及为了更好的浏览效果,首页页面在左侧竖导航栏被选中时的反馈暗示方式和其他页面不同。

(部分有引用:网易UED - 打造舒适的阅读空间—云阅读iPad3.0设计总结交互篇)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,695评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,569评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,130评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,648评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,655评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,268评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,835评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,740评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,286评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,375评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,505评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,873评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,357评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,466评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,921评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,515评论 2 359

推荐阅读更多精彩内容