激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)進(jìn)階產(chǎn)品設(shè)計(jì)師和交互設(shè)計(jì)概念和技巧

發(fā)布時(shí)間：2024-03-16 20:33:23 瀏覽量：220次

早在2015年，阿里巴巴設(shè)計(jì)高管就提到“全棧設(shè)計(jì)師”的概念，而“產(chǎn)品設(shè)計(jì)師”這個(gè)概念，更是很早就存在了，只是一直未成大氣候。隨著互聯(lián)網(wǎng)“下半場”的到來，產(chǎn)品設(shè)計(jì)師在行業(yè)內(nèi)的呼聲越來越高，它很可能取代UI和UE，變成它們二者的最終形態(tài)。作為一個(gè)兼UED的工作的UID，一直未對交互設(shè)計(jì)進(jìn)行系統(tǒng)性的思考。今天就來梳理下關(guān)于交互設(shè)計(jì)的一些理論和思路。



交互設(shè)計(jì)（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。簡而言之，交互設(shè)計(jì)的目的是幫助用戶更好的達(dá)成目標(biāo)，滿足用戶需求。


交互狀態(tài)



1. 等待


  • 無線端產(chǎn)品，多從等待開始
  • 降低用戶在等待過程中的敏感性
  • 若無法降低，就給予期望
  • 切忌呆滯


3秒內(nèi)不能讓用戶順暢使用App，約流失75%的用戶


2. 初始


  • 先打招呼，再商量，再問用戶要什么
  • 最好能知道用戶想要什么
  • 不要自作聰明做決定
  • 但可以給出建議



  • 網(wǎng)易云音樂初始頁是類似引導(dǎo)頁的登錄界面，可達(dá)到引人入勝的效果。其次用戶也可以選擇先體驗(yàn)再登錄
  • 知乎的初始頁則是主動(dòng)收集用戶需求，但也是選擇性的
  • 在行一點(diǎn)則在初始頁放入新人福利，引導(dǎo)用戶進(jìn)一步使用


3. 輸入


  • 輸入是一件成本極高的事情，不到萬不得已，不要選擇輸入
  • 如果一定要輸入，想辦法簡化輸入步驟
  • 幫助輸入



  • 京東金融幫助用戶記住賬號(hào)，免輸入
  • 人人貸的手勢密碼登錄
  • 微信的聲音鎖登錄



  • 微信的“按住說話”，用語音幫助用戶輸入
  • 微信的指紋支付代替密碼支付
  • 微信的掃一掃登錄/付款



  • 知乎首次進(jìn)入搜索頁面，出現(xiàn)熱搜、影視等推薦內(nèi)容
  • 知乎搜索頁面會(huì)根據(jù)輸入關(guān)鍵詞，實(shí)時(shí)推薦相關(guān)內(nèi)容
  • 知乎根據(jù)之前的搜索關(guān)鍵詞，加入搜索歷史


4. 空


  • 空是件壞事情，想辦法消滅（提升產(chǎn)品硬實(shí)力)
  • 如果不能消滅，那最好找到替補(bǔ)方案
  • 如果替補(bǔ)方案都沒有，就鼓勵(lì)用戶不讓它空著



  • 網(wǎng)易云音樂無結(jié)果沒有任何反饋，產(chǎn)品硬實(shí)力不夠（如硬實(shí)力很強(qiáng)的Google、火狐等瀏覽器包羅萬象）
  • 餓了么搜索后無結(jié)果，給用戶提供推薦商家
  • 口碑在訂單空狀態(tài)下，鼓勵(lì)用戶去首頁逛逛（創(chuàng)建訂單），淘寶、天貓等電商App在購物車空狀態(tài)同樣如此


5. 有數(shù)據(jù)


  • 引導(dǎo)用戶進(jìn)行下一步操作
  • 確定數(shù)據(jù)的排序原則，減少用戶挑選成本



  • 毒App根據(jù)關(guān)鍵詞的關(guān)聯(lián)性排序
  • 微信讀書則根據(jù)書本的閱讀用戶數(shù)排序
  • 鈦媒體的排序方式，話題>瞬眼>文章

6. 過多數(shù)據(jù)


  • 這不是用戶想要的
  • 不必展現(xiàn)所有數(shù)據(jù)
  • 收起而不是隱藏過多的數(shù)據(jù)，并給予出口
  • 篩選方式，判斷用戶的在乎維度



  • 知乎的篩選方式：綜合、近一周、用戶、話題、私家課、Live
  • 餓了么的篩選方式：綜合、銷量最高、距離最近、其他
  • 58同城選擇地區(qū)，將熱門城市展示靠前


7. 關(guān)注/沉浸


  • 保證用戶關(guān)注，有興趣（留住用戶）
  • 不要干擾，直到事件完成（如不要鎖屏，不要彈出無關(guān)信息）
  • 如果被強(qiáng)制干擾，記得保存現(xiàn)場



  • YouTube觀看視頻過程中，返回后依然可以以小窗口的形式看到該視頻繼續(xù)播放；
  • 淘票票則提供電影預(yù)告片引人入勝
  • bilibili在被打斷（如斷網(wǎng)或者有事退出），可以選擇繼續(xù)上次的播放進(jìn)度


8. 正確


  • 最好的交互是讓用戶感覺不到，就繼續(xù)下一步
  • 除非這是最后一步，才需給予用戶提示



9. 錯(cuò)誤


  • 直接幫助用戶修正錯(cuò)誤
  • 告訴用戶錯(cuò)在哪，越明確越好
  • 給用戶指明修正錯(cuò)誤的方式



  • UC瀏覽器在百度搜索，可及時(shí)糾正文字錯(cuò)誤
  • 簡書登錄提示手機(jī)號(hào)碼格式不正確
  • 用未注冊過的手機(jī)號(hào)登錄時(shí)，提示用戶注冊


10. 待確認(rèn)


  • 無法返回，可能是誤操作，需要確認(rèn)
  • 涉及到金錢
  • 確認(rèn)文案清晰明了



11. 結(jié)束


  • 絕不等同于：請你關(guān)了我 ?
  • 繼續(xù)引導(dǎo)用戶下一步操作
  • 呆滯狀態(tài)，間接告訴用戶操作已結(jié)束



12. 中斷


  • 因?yàn)橐馔馇闆r，操作被迫終止
  • 保存現(xiàn)場，讓用戶繼續(xù)上一步操作
  • 意外崩潰采用定時(shí)保存方式，以降低用戶損失



交互設(shè)計(jì)定律


1. 奧卡姆剃刀原理



在設(shè)計(jì)上的應(yīng)用，則表現(xiàn)為：不必要的元素會(huì)導(dǎo)致設(shè)計(jì)效率降低，并增加不可預(yù)期的后果。所以去掉不必要的干擾元素，保證頁面純粹、簡潔。


2. 席克定律



席克定律多應(yīng)用于軟件/網(wǎng)站界面的菜單及子菜單的設(shè)計(jì)中，在移動(dòng)設(shè)備中也比較適用。例如比起 2 個(gè)菜單，每個(gè)菜單有 5 項(xiàng)，用戶會(huì)更快得從有 10 項(xiàng)的 1 個(gè)菜單中做出選擇。

3. 菲茲定律



1、我們想要更容易點(diǎn)擊到控件，就應(yīng)該放在屏幕的邊緣或角落里。讓常用的控件更大，更容易辨別;

2、使用屏幕的邊緣和角落，讓控件有效擴(kuò)大，永遠(yuǎn)不要把控件放在離屏幕邊緣或角落1px遠(yuǎn)的地方;

3、邊緣之外的地方，也可以算作目標(biāo)點(diǎn)的面積，這樣一來，目標(biāo)的面積就被無限的放大了，也更方便用戶操作。


4. 神奇數(shù)字 7±2 法則



1、web導(dǎo)航或選項(xiàng)卡盡量不要超過9個(gè)，移動(dòng)應(yīng)用交互設(shè)計(jì)上，選項(xiàng)卡不會(huì)超過 5 個(gè)。

2、如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來展示各段及其子段，并注意其深廣度的平衡。

3、把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容。（如iPhone手機(jī)號(hào)：XXX XXXX XXXX）


交互手勢



看圖真的很多，這里就說說移動(dòng)端常用的幾種


1. 點(diǎn)擊


  • 常用于從一個(gè)頁面過渡到下一個(gè)頁面（如：點(diǎn)擊icon、butten等）
  • 切換某種功能（如：設(shè)置里的開關(guān)）
  • 點(diǎn)擊預(yù)覽（如：微信朋友圈圖片）
  • 點(diǎn)擊選擇
  • ...


2. 滑動(dòng)


  • 上下滑動(dòng)瀏覽信息/內(nèi)容（如微信朋友圈）
  • 左滑刪除（微信消息）
  • iOS端左滑返回上一級(jí)
  • 滑動(dòng)切換元素（如知乎iOS端上下滑動(dòng)切換答案，Android左右滑動(dòng)切換答案）
  • ...


3. 拖拽


  • 微信拖拽呼出小程序
  • 往下拖拽加載刷新（如淘寶主頁）
  • iOS端向上拖拽到一定高度關(guān)閉后臺(tái)App
  • 向下滑退出照片預(yù)覽（如微信朋友圈照片）
  • 拖拽調(diào)整順序
  • ...


4. 長按


  • Android端長按刪除消息/App
  • iOS端長按刪除App
  • 長按保存/分享/更多...
  • 長按拍小視頻
  • ...


5. 雙擊


  • iOS端雙擊Home鍵，呼出所有后臺(tái)程序
  • ...


6. 輕掃


  • Android端三指輕掃拍照/截屏/刪除
  • ...


7. 捏合


  • 預(yù)覽照片捏合放大縮?。ㄈ缥⑿排笥讶φ掌?/span>
  • ...


8. 搖晃


  • 微信搖一搖（人、歌曲、電視、領(lǐng)紅包）
  • ...

9. 3D Touch


  • iPhone控制中心的icon用力按壓均可呼出其頁面
  • iPhone桌面用力按壓任意一個(gè)App圖標(biāo)會(huì)彈出一層半透明菜單，里面包含了該應(yīng)用下的一些快捷操作
  • ...



來源網(wǎng)絡(luò)

熱門課程推薦

熱門資訊

請綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定