秒速赛车助手下载

首頁 ?/? 文章 ?/? 交互設計  /  正文

交互設計

橫滑或豎滑不知道怎么選?教你如何選擇正確的交互方式

時間:2019-12-18  來源:站酷 MoeDesigner

如何在移動端有限的屏幕內向用戶有效的展示傳達更多的信息內容,是UI/UE設計師們的重點研究方向。在實際工作與生活中,我們見到了太多左右橫向滑動交互設計,基本上第一感覺都是“哇,好酷!交互方式多樣性好靈活!”然后紛紛相仿,卻很少去考慮這種交互設計的科學性與實用性。

設計是理性的科學,而非感性的藝術

秒速赛车助手下载YONGHUXINGWEIHEYONGHUXIHAOSHIKEYITONGGUOYONGHUXINGWEISHUJUJINXINGTUIYAN。NENGKEGUAN,JUEBUZHUGUAN;NENGJIANDAN,JUEBUGUOYUFUZA;NENGLIXING,JUEBUGUOYUBIAODAGANXING。

 

常見的內容拓展方式

在有限的屏幕內將大量的資訊內容進行合理的依次展示,我們稱之為內容拓展設計。常見的內容拓展樣式有X軸橫向滑動Y軸縱向滑動Z軸的垂直長按交互三種。

 

1、X軸橫向滑動

JIZAIXZHOUSHUIPINGFANGXIANGKUOZHANNEIRONG,YINGWENMINGJIAO“Horizontal Scrolling Lists”,ZHIYIWEISHUIPINGGUNDONGLIEBIAO。ZHEZHONGJIAOHUFANGSHISHIYONGYUDANYEDUOWEIDUNEIRONGJUHEDEZHANSHI。

秒速赛车助手下载RUSHANGTUTAOPIAOPIAOANLI,JIANG Banner、REYINGYINGPIAN、JIJIANGSHANGYINGDENGBUTONGWEIDUDENEIRONGZHENGHEZAIYIGEYEMIAN,MEIGEWEIDUDANDUZHANYIGEKAPIANBINGLIEZHANXIANNEIRONG。

 

2、Y軸縱向滑動

JIWOMENZUICHANGJIANDECHUANTONGDEXIAHUASHIList,YINGWENMINGJIAO“Vertically Scrolling Lists”,ZHIYIWEICHUIZHIGUNDONGLIEBIAO。ZHIXUYAOBUDUANWANGXIAHUADONGPINGMU,JIUNENGJIAZAIZHANSHIGENGDUODENEIRONG,YONGHUXUEXICHENGBENJIHUWEI0。ZHUYAOSHIYONGYUDANWEIDUNEIRONG,RUDOUYIN、ZHIHU、PENGYOUQUAN、WEIBODENG,【SHUA】SHIGEZHONGFUSHANGXIAHUADONGDEDONGZUO,JISUOWEIDE【SHUA】DOUYIN、【SHUA】ZHIHU、【SHUA】PENGYOUQUAN,【SHUA】WEIBO,SHUADEDOUSHITONGSHUXINGNEIRONG。

 

3、Z軸方向的內容拓展設計

JIWOMENSHUODECHANGANCAOZUO,RUiOSXITONGDE3D Touch,GENJUBUTONGLIDUFANKUIHEBUTONGSHICHANGFANKUILAIPANDUANJUTIDEJIAOHUNEIRONG。ZZHOUJIAOHUFANGSHIJIAOWEIYINBI,YOUYIDINGXUEXICHENGBEN,ZHUYAOSHIYONGYUYIXIACHANGJING:1.FANGBIANYONGHUKUAISUDAKAIMOUGEGAOPINCIGONGNENG;2.DUIYURUKOUJIAOSHENDEGONGNENGKEYIYONG3DtouchLAIZUOWEIKUAIJIERUKOU;3.ZHENDUIMOUXIESHEJIDAOGERENYINSIDECHANPINHUOGONGNENGKEYIYONG3DtouchSHIXIANRUKOUTIDAI。

秒速赛车助手下载BENPIANWENZHANGZHUYAOJIANGHENGHUAHESHUHUADEYOUQUEDIANYIJIXIANGMUZHONGRUHEJUEZEDEWENTI。

 

X軸滑動優缺點分析

秒速赛车助手下载RUGUOYIGEappQUANSHIZONGHUAHUOQUANSHIHENGHUA,SHIMEIYOUSHENMEWENTIDE,YONGHUZHIYAOXIGUANYIZHONGJIAOHUFANGSHIJIKE,RUMANHUARUANJIANYUYUEDURUANJIAN,TONGCHANGDOUHUITIGONGHENGHUAYUSHUHUALIANGZHONGJIAOHUFANGSHI。KENGDESHIHENGHUASHUHUALIANGZHONGJIAOHUCHUANCHAZAIYIQI,ZHEJIUYOUXIEBUGOUYOUYALE。

QIANMIANSHUOGUO,XZHOUHENGHUAJIAOHUSHIYONGYUYIGEYEMIANYOUDUOZHONGWEIDUXINXIDECHANGJING,YZHOUSHIYONGYUYIGEYEMIANDOUSHIDANWEIDUXINXIDECHANGJING。

秒速赛车助手下载RUSHANGTUSUOSHI,WULUNSHIXIAOMIYINGYONGSHANGDIANHUANSHITAOPIAOPIAO,YEMIANDEHEXINNEIRONGDOUSHIYOUYIGEGEDE“YONGDAO”GOUCHENG,SHUHUAQIEHUANYONGDAO(BUTONGWEIDUDENEIRONG),HENGHUAQIEHUANTONGYIYONGDAODEBUTONGNEIRONG。ERWEIBO、PENGYOUQUAN、DOUYIN、KUAISHOUDENGGUOMINJIYINGYONG,DOUSHITONGGUOSHUHUAZAIYITIAOYONGDAOSHANGYIHUADAODI。

 

1、如何劃分泳道

秒速赛车助手下载ZHEMEDUODEYONGDAOZENMEQUFENBUTONGNEIRONGNI?BIAOTI。SUOYIWOMENHUIKANDAOSHANGTUSUOSHIDEXIAOMIYINGYONGSHANGDIAN、TAOPIAOPIAO、Tumblr,DOUGEIBUTONGDEYONGDAODEZUOSHANGJIAOSHEZHILEYIGEDADADEBIAOTI,TONGGUOBIAOTIWENZILAIZHIJIECHUANDAGEIYONGHUBUTONGYONGDAODENEIRONGGAIYAO。ZAOXIENIANJIANHUANYOUGEIYONGDAOZUOFENWEITUDEFANGSHI,JIXIATUDETUPIAN+WENZIFANGSHI,ZHEYANGCHULIYOULIYOUBI,HAOCHUSHITUDAPEIDEDAOWEIKEYIGENGHAODEQIANGDIAOZHUTI,QUEDIANZESHILANGFEIKONGJIANHEZHANSHIXIAOLV。

秒速赛车助手下载ZUOTUSHIYINGYONGHUI15NIANDEBANBENXIAOGUOTU,YONGDESHIDITUQIANGDIAOFENFENWEIDEFANGSHI。YOUTUWEIXIANXINGBANBENGAIBANHOULEISIMOKUAIDECHULIFANGSHI,QUXIAOLEFENWEITU,ZENGJIALEKEJIANZHANWEI,YUANLAIYIXINGZHINENGZHANSHICHULIANGGEYINGYONG,GAIBANHOUYIXINGKEZHANSHI4GE。

 

2、如何強化泳道可見性

XZHOUDEJIAOHUSHEJIHUANXUYAOZUOEWAIDEYINDAOLAIQIANGHUAKEJIANXING,CHANGJIANDEYINDAOFANGSHIYOUZHISHIQI、BUFENZHEDANGLIANGZHONG。

YOUQISHIBannerWEIHEJINGANGQU,RUGUOMEIYOUZHISHIQI,DADUOSHUXIAOBAIYONGHUGENBENBUZHIDAOGAIYEMIANSHIKEYIHUADONGDE。TONGYANG,BUFENZHEDANGYESHIJIAOWEICHANGYONGDEYOUXIAOFANGSHI,TONGGUOZHEDANGBUFENWENZIHETUPIAN,LAIQIANGHUA【HOUMIANHUANYOUNEIRONGE,LAIHUAHUAKAN】DEXIAOGUO。

DANSHIJIXIAOGUOZHONG,ZHISHIQIDEZUOYONGJIHUWEIHUQIWEI,YONGHUZHUDONGCHUFALVHENDI。YINWEIJUEDABUFENYONGHUZHIZAIHUYANQIANNENGKANDAODENEIRONG,ZHIYUYINZANGQILAIDENEIRONG,YONGHUQUZHUDONGFAXIANDEYIYUANHENRUO。ERBUFENZHEDANGDESHEJIFANGSHI,ZECUNZAIYIGEZHUANHUADIJIANDEWENTI,JIYUEWANGHOU,CTR(DIANJILV)HECVR(ZHUANHUALV)YUEDI,SUOYIJUEDADUOSHUYINGYONGYIXINGZUIDUOYEJIUFANG8-12GENEIRONG,TAISHAODEHUAYIHUADAODI,BUFUHEYUQI,TAIDUOHUABUDAOTOU,YONGHUHENKUAIJIUHUIYANJUAN,PAIHOUMIANDENEIRONGJIUWANQUANBUHUIYOUPUGUANGJIHUI。

 

3、位置對轉化率的影響

秒速赛车助手下载TUWEIMOUappDANGETUIJIANMOKUAIDEDIANJILVYUZHUANHUALVQUXIANTU。CONGQUXIANKEYIKANDAO,WEIZHIYUEKAOHOU,DIANJIYUZHUANHUAXIAOGUOYUECHA,JIHUSHIDIJIANDEQUSHI。ZHIYU0HAOWEIHE1HAOWEIWEISHENMEBURU2HAOWEI3HAOWEIDEDIANJIGAONI?ZHEGEGEN0HAOWEIHE1HAOWEITUIJIANDECHANPINYEYOUYIDINGDEGUANXI,TONGYANGDEPUGUANGLV,YOUZHIDECHANPINDIANJILVZIRANGENGGAO。ZHEYECONGCEMIANSHUOMINGYIGEWENTI,XZHOUHENGXIANGDEPAILIEZIYUANWEI,WUFASHIYONGYUJINGJIAPAIWEI。DUIYUYINGLIXINGDERUANJIANLAIJIANG,ZIYUANWEIHENZHONGYAO,SHIDUIJIESHANGHUDECHOUMA,YOUXIAODEZIYUANWEICAINENGRANGJINZHUBABATAOQIANTAODEGANCUITONGKUAIA。

DUIYUYZHOUCHUIZHIDEJIAOHUFANGSHILAISHUO,YIGEWEIZHIYIGEJIAMA,MINGMABIAOJIATONGSOUWUQI,BIJINGPAIWEIFEICHANGMINGQUEDEYOUXIANHOUSHUNXU,XIANKANDAOSHUIHOUKANDAOSHUIWANQUANKEYIYUQI。ERXZHOUHENGXIANGJIAOHUNI?DAODINAGECAISHIDIYIZIYUANWEINI?SHI0HAOWEI?1HAOWEI?HUANSHIDIYIPAIXIANLUCHULAIDEDOUSHI?YOUXIANJIHENHUNLUAN,TONGCHANGLIANSHANGWUDOUNANYIHELIGEIHENGXIANGWEIZHIDINGJIA,YINWEIHENGXIANGJIAOHUDECHUFALVTAIDILE。

 

最后,橫滑or豎滑?怎么選?

·橫滑

秒速赛车助手下载1.HENGHUAHENKU,HUADONGGUOCHENGZHONGHUIYOUYIZHONGTESHUDEZONGSHENGAN。

2.SHIYONGYUDUOWEIDUDEXINXIZHENGHE,JIZHUANTIGUINAZHANSHI,YIGEZHUANTIKAPIANXIANGDANGYUDUOGEXINXIYEDEHEJI。

3.GUDINGDEKONGJIANNEIKEZHANSHIGENGDUODESHANGPIN。

4.YOUYIDINGXUEXICHENGBEN,YOUXIANJIBUQINGXI,PUGUANGLVYUZHUANHUALVZHENGTICHENGDIJIANQUSHI,BUSHIHEYONGZAIJINGJIAPAIWEIDECHANGJINGXIA。

 

·豎滑

1. JIHUMEIYOUXUEXICHENGBEN,YOUXIANJIMINGQUE,SHIHEYONGYUJINGJIAPAIWEIDECHANGJING。

2. SHIHEDANWEIDUXINXIZHANSHI,ZUICHANGJIANDEXINGSHISHIfeedLIUDEXINXIZHANSHI。

 

特別說明:本站所收集的素材版權歸原作者所有,在此僅供學習參考,請勿用于任何商業用途!

掃一掃加公眾號(uibaba)