search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

[ 平面理論教程 ] 詳細解析大屏時代如何重設計界面交互- 其他教程 - 骨子愛創意

教學主題: 詳細解析大屏時代如何重設計界面交互

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 詳細解析大屏時代如何重設計界面交互

這教學的重點為這幾點 [ 設計,界面,交互,如何,時代,解析,大屏,詳細,操作,手機, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

有木有同學仰躺着玩手機時經常被砸臉?在不改變大屏幕的前提下,想護住你的臉就得靠交互設計師了。今天百度的同學總結了交互工作的一些經驗,用在大屏界面上特別合適,為了用戶的臉,這篇就別錯過咯。

有木有同學仰躺着玩手機時經常被砸臉?在不改變大屏幕的前提下,想護住你的臉就得靠交互設計師了。今天百度的同學總結了交互工作的一些經驗,用在大屏界面上特別合適,為了用戶的臉,這篇就別錯過咯。

這是一個大屏手機的時代。

強調這件事情的意義在於,這已經成為事實。

Medium上存在一份個人統計。

在過去7年,新上市的手機屏幕尺寸越來越大。




詳細解析大屏時代如何重設計界面交互

以4.5英寸為分界點,我們更清晰的看到這一變化。過去的兩年,4.5英寸的比例從10%升至80%。

詳細解析大屏時代如何重設計界面交互

在國內的過去3個季度,使用FHD HD分辨率的手機從38%的份額增至50%。

詳細解析大屏時代如何重設計界面交互

更大尺寸的屏幕可以承載更多的內容展現,更適合遊戲、閱讀與播放視頻,體驗得以提升。

詳細解析大屏時代如何重設計界面交互

然而屏幕尺寸的上升並沒有引起用戶操作上的過多不適,有51%的用戶已經適應雙手操作。

關於這點,有篇很棒的文章推薦給同學們,分析到位具體:《移動設備手持分析!用戶到底是怎麼使用手機的?》

詳細解析大屏時代如何重設計界面交互




即使用戶單手操作,在操作大屏幕時的相對盲區(深色區域),需要更多的響應時間,也可以被接受。

詳細解析大屏時代如何重設計界面交互

即便如此。3.5英寸~4英寸,依然是平衡單手操作與體驗的合理尺寸範圍。

詳細解析大屏時代如何重設計界面交互

這樣就產生一個矛盾:用戶擁有更大屏幕的尺寸,但從人機交互的角度,並不完美。




面對這一現狀,從APP產品界面設計的角度,需要做出改變。

大屏幕擁有典型的可用性問題:縱向單手操作機身,邊角、頂部、左右側邊難以觸達,放置在以上盲區的點擊入口,將導致體驗路徑中斷。

交互設計角度的最佳實踐:

1. 設計安全區域,避開操作盲區

示例,百度搜索結果頁,根據視線規律,典型的左上角操作盲區可以用於logo展現。




詳細解析大屏時代如何重設計界面交互

2. 注意使用場景路徑觸發的連貫性

示例,在百度手機助手Android中下載百度瀏覽器,操作區域集中在安全區域。

詳細解析大屏時代如何重設計界面交互

3. 更多的使用可拖動的浮動按鈕,給用戶更自由的操作可能性




示例,百度瀏覽器Android中翻頁/返回頂部的組合按鈕。

詳細解析大屏時代如何重設計界面交互

4. 更多的使用手勢,並提供暗示

示例,百度瀏覽器Android的刪除窗口操作。

詳細解析大屏時代如何重設計界面交互




5. 更多的使用語音作為輸入方式

示例:生活手記中使用語音替代鍵盤輸入。

詳細解析大屏時代如何重設計界面交互
貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

6. 橫屏Pad化的操作設計,以及更多的內容展現

示例,百度瀏覽器iPhone的橫屏設計,如同網頁的響應式布局概念。




詳細解析大屏時代如何重設計界面交互
貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
的選區;按住Alt鍵將從起始點為中心勾劃選區。

在界面交互的層面之外,在不遠的時間,硬件存在更多的優化可能性。

1. 更窄的邊框,更大的顯示比例。

詳細解析大屏時代如何重設計界面交互

2. 柔性材質。




詳細解析大屏時代如何重設計界面交互

3. “手機”成為服務的觸發者,屏幕投射與隔空操作。

鋼鐵俠即視感,順便推薦一篇鋼鐵俠的文章:《PS+AI教程!教你繪製超酷炫的鋼鐵俠面具!》

詳細解析大屏時代如何重設計界面交互

之所以將討論的範圍擴展到硬件,是希望設計師在針對具體屏幕設計的同時,能夠從另外的視角,思考人機交互的變化與可能性,激發創造力。




當前是大屏手機的時代,推動你的手機APP產品跟進吧。

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 詳細解析大屏時代如何重設計界面交互 這教學會喜歡

文章標題: 骨子愛創意- 詳細解析大屏時代如何重設計界面交互–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 設計,界面,交互,如何,時代,解析,大屏,詳細,操作,手機,

本文永久連結 :詳細解析大屏時代如何重設計界面交互

本文轉載自 :VIA



熱門推薦

本文由 designhtd01com_0 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦