【抛砖引官方】微信UWP(手机端)UI设计——对!手机端!

et2****478 UID.914983
2016-01-13 发表

本帖最后由 et2240478 于 2016-1-13 12:11 编辑

万万没想到上周发了PC端的设计图大家的反响那么的大!(pc端ui设计原帖地址: ***链接停止解析***)所以大家的热情直接的鼓舞了我,经过一周多的忙里偷闲,这次我把微信UWP手机端的UI页面设计出来了!{:6_230:}
担心机油以为我要开发微信的客户端而对我报以太多不会得到回报的期待,这里再次说明一下,我只是设计师,只是一个会画图的美工{:6_228:}

废话不多说,下面看图:
***附件停止解析***
(这是很早就画好的UE草图,大概的交互逻辑都已经成型了)

***附件停止解析***
(最近联系列表到聊天页面的一个大致展示,交互逻辑主要参考wm10的短信应用)
***附件停止解析***
(从通讯录到单个联系人详情页的展示)

***附件停止解析***
(从发现页面进入朋友圈的展示)

***附件停止解析***
(最后是进去设置一系列的展示,把“mine”功能页放进menu菜单我觉得是一个很好的解决方案,不知道大家觉得怎样?)


ok,就是这样子。
这次手机端设计的尺寸比例是以lumia525尺寸([font=arial]800x480像素[/font])为基础用iphone6尺寸比例(0.56:1)改出来的大小
所以这个尺寸(480×853像素)会有点非主流哈哈,没办法,我也只有525而已
然后这次设计规范主要参考的有:
微软官方应用的交互设计(主要是短信应用),微信手机端(三个平台)的交互设计。
大部分的icon重新绘制了,小部分icon采用了安卓的源文件。


这次的设计也算是匆匆忙忙,如果有什么不对的地方也请大家指出了,评论我都会看的~{:6_225:}

最后特别声明,可以转载,但转载须注明出处。(因为上次看到有人转图顺便造谣了)




标签: UI设计 手机 微信

敬告:
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
全部回复:
乱刀斩快麻 UID.876470
2016-01-13 回复

既有枢轴的同时又有汉堡,不太科学。

Me****°7 UID.211143
2016-01-13 回复

人才啊,叼

kudick UID.415
2016-01-13 使用 Lumia 930 回复

支持,谁来把这个实现出来

海底之心 UID.852922
2016-01-13 回复

你这可是抛玉引“砖”啊!!!1{:6_230:}

sarot UID.121222
2016-01-13 回复

沙发啊!虽然没有挨个字看,不过还是要顶你的哦,加油!希望win10的生态越来越完善!

潇潇梅 UID.572831
2016-01-13 回复

做的设计棒棒哒! 你这个美工我给满分{:3_93:}

zhangshengyou UID.302226
2016-01-13 使用 Lumia 1520 回复

不错,但是微信有没有UWP计划还不一定

rshcsty UID.1044989
2016-01-13 回复

Quote***链接停止解析***
既有枢轴的同时又有汉堡,不太科学。


这种UWP多了去了

dg****07 UID.1184527
2016-01-13 回复

微信UWP(手机端) 搞了几年几代都没搞出来

Di****er UID.1207524
2016-01-13 使用 Lumia 950 XL 回复

那么什么时候可以推出呢?

abc****eqi UID.1189465
2016-01-13 回复

6666666 这个绝对6

Gordon国正 UID.1271352
2016-01-13 使用 Lumia Icon 回复

很希望uwp的扣扣,微信可以通知@自己的动态和评论

家有大宝 UID.1174773
2016-01-13 回复

不知道腾讯以后发布的UWP微信是什么样子呢?LZ设计棒棒的{:3_122:}

lj海 UID.926072
2016-01-13 使用 Lumia 1520 回复

聊天界面下面的 搜索按钮和那三点 应该全部去掉会更好看些,把搜索加入到汉堡式按钮里面或放在其他地方。

Ki****zb UID.1038908
2016-01-13 使用 Lumia 930 回复

棒啊 要是真的更棒了 哈哈

lin127 UID.49544
2016-01-13 使用 Lumia 1520 回复

这样样子的话挺不错的。。

mnb7892258 UID.831976
2016-01-13 使用 Lumia 1520 回复

支持,希望能做出来!

lx****62 UID.1151792
2016-01-13 使用 Lumia 640 XL 回复

赞,微信太食言了!!!!鄙视腾讯,鄙视微信。。。

G****y UID.1200958
2016-01-13 使用 Lumia 640 回复

正式版要推了,微软还搞不定微信,那只能呵呵了,安卓6.0速度也不是盖的,我现在突然觉得谷歌比微软靠谱。。。

shotawinter UID.109592
2016-01-13 回复

提个小意见啊,如果全部用方角元素,去掉圆形头像就更协调了

yuri****ster UID.879774
2016-01-13 使用 Lumia 925 回复

楼主可以考虑转行做ui设计师了。。。

活****年 UID.381852
2016-01-13 使用 Lumia 1020 回复

希望扬声器和听筒模式可以自动切换

MICHAEL~EDDY UID.934116
2016-01-13 回复

左上角的返回键根本就没有必要,手机上有返回按键多次一举,电脑端的返回键最好设置SystemNavigationManager里面的AppViewBackButtonVisibility并定义好事件就行,这样的UI界面才比较人性化

zettabit UID.1305011
2016-01-13 回复

还挺好的,不过系统已经自带返回键了,就不用再另加返回键在左上角了吧。

小****鸭 UID.1250276
2016-01-13 使用 Lumia 830 回复

你去腾讯应聘吧,就按照这个来做,

wangge UID.370736
2016-01-13 回复

汉堡多余了 如果依赖汉堡 我的那个界面就做简化 中规中矩

xujones UID.62856
2016-01-13 使用 Lumia 735 回复

设计很棒 支持,但是不思进取的公司看到无路可图,不会有什么动作。不是泼冷水,国内app应用质量还有很大空间要提升,不止wm平台一个而已。

et2****478 UID.914983
2016-01-13 回复

Quote***链接停止解析***
既有枢轴的同时又有汉堡,不太科学。


其实我觉得,在微软没有给出一份详尽的系统交互规范说明来之前,这样子的存在并不矛盾的。
╮(╯-╰)╭而且我也没想到更好的解决方案了

et2****478 UID.914983
2016-01-13 回复

Quote***链接停止解析***
聊天界面下面的 搜索按钮和那三点 应该全部去掉会更好看些,把搜索加入到汉堡式按钮里面或放在其他地方。 ...


对于你说到的这个,其实我一开始的方案也是把搜索放进汉堡菜单里面的,确实是美观了。
不过在参考了安卓和苹果系统上微信的设计后,结合之前PC端的设计,我还是决定放出来。
放在右下角也是为了配合三个平台在交互上有相似的地方。
毕竟是全局搜索,所以也是可以的嘛~哈哈

et2****478 UID.914983
2016-01-13 回复

Quote***链接停止解析***
提个小意见啊,如果全部用方角元素,去掉圆形头像就更协调了


使用圆形头像也只是为了配合win10以及wm10的一个设计规范而已。
用方形的话,单纯看应用是蛮好的,但是配合平台的话还是稍显突兀

et2****478 UID.914983
2016-01-13 回复

Quote***链接停止解析***
左上角的返回键根本就没有必要,手机上有返回按键多次一举,电脑端的返回键最好设置SystemNavigationManage ...


{:5_190:} 虽然大概能懂你的意思不过这已经是开发者要考虑的事情了……

纨****子 UID.1031213
2016-01-13 使用 Lumia 930 回复

楼主神了,太牛,我等膜拜

沙漠孤音 UID.396373
2016-01-13 使用 Lumia 830 回复

不喜欢汉堡怎么办

Confused·s UID.1157946
2016-01-13 使用 Lumia 630 回复

我还是喜欢8.0那时的微信界面

Confused·s UID.1157946
2016-01-13 使用 Lumia 630 回复

现在wp的设计语言已经被ios和安卓同化了,现在再去看看wp7wp8.0那时候的系统界面和app界面,满满的都是wp风格。

Daroutuo UID.1160747
2016-01-13 使用 Lumia 950 回复

APP里的退回键是多余的,只有苹果没有系统退回所以APP才带的

Mr****on UID.844807
2016-01-13 使用 Lumia 1520 回复

让tx的人来看看他们有多无能

4****P UID.1084613
2016-01-13 使用 Lumia 1020 回复

这是纯绘图还是VS里搞?

nichenyang UID.605075
2016-01-13 使用 未知设备 回复

简直美呆啊!微信官方真的该吃10

13169685368 UID.878947
2016-01-13 使用 未知设备 回复

你设计好他不开发也没用

智能****BA UID.1150969
2016-01-13 使用 Lumia Icon 回复

谁叫微软不讲信用呢,本来早就应该发布和推送正式版w10m,那其他厂商不出微软的应用也是正常的

石****子 UID.1163693
2016-01-13 回复

微信会认真看吗?建议智机社区将这份草图交予微信官方,让其参详一番也好啊。

啥??? UID.760472
2016-01-14 使用 Lumia 930 回复

问题是谁开发出来!!

wenldong391 UID.720085
2016-01-14 使用 Lumia 830 回复

不错!!!!望官方能重视!!!!

kedai UID.954356
2016-01-14 使用 Lumia 526 回复

最主要是功能!

jh****ju UID.1001037
2016-01-14 使用 Lumia 640 XL 回复

没特色 一股安卓苹果风

re****ah UID.291108
2016-01-14 回复

赞一个,楼主快去微信应聘啊,呵呵。

shi****shu UID.578772
2016-01-14 回复

么么棒棒哒

梦****幻 UID.613973
2016-01-14 回复

***附件停止解析***

Win10的设计风格还有很大的挖掘空间,同美工~

mi****SD UID.1222950
2016-01-14 回复

不知道什么时候有。。。。

rob****109 UID.340314
2016-01-14 回复

强烈建议腾讯采用楼主的设计!!!!

深蓝de蓝色 UID.1085715
2016-01-17 使用 未知设备 回复

好美

秋****耶 UID.1072897
2016-01-17 回复

问下哈~为啥要把个人的那个tab做成收起来的菜单,这样很不方便耶

ase****999 UID.994370
2016-01-17 回复

好牛啊,楼主是哪家公司的啊

jimmy19990 UID.327382
2016-01-17 回复

漂亮! v

本站使用Golang构建,点击此处申请开源鄂ICP备18029942号-4联系站长投诉/举报