<menuitem id="1h7lz"><th id="1h7lz"></th></menuitem>

    <big id="1h7lz"></big>

                    ??谶_內IT培訓
                    美國上市IT培訓機構

                    18035108441

                    UI設計師的響應式的定義,??贗T培訓

                    • 時間:2021-01-15 13:40
                    • 發布:不詳
                    • 來源:網絡

                    大家是傾向于用電腦看視頻還是常常用手機看視頻呢?

                    女孩紙們是喜歡用筆記本看淘寶網站還是用手機登陸淘寶?

                    小說黨看書的首選是電腦?平板電腦?Kindle?還是寸步不離的手機?

                    同一家網站,從電腦桌面到手機端,到底隱藏著怎樣的奧妙?和小編一起來看響應式網站的桌面優先設計。

                    1

                    桌面優先設計的相關定義

                    在介紹桌面優先設計之前,先來科普一下響應式的定義。我們發現同一家網站在筆記本、平板電腦、手機上是有很大區別的,例如系統平臺、屏幕尺寸、屏幕定向等都各有不同。響應式設計就是網站頁面的設計與開發應根據用戶行為以及設備環境進行相應的響應和調整。無論用戶正在使用筆記本還是平板電腦,網站頁面都應該能自動切換分辨率、圖片尺寸及腳本功能等,以適應不同設備。

                    桌面優先設計便是一種高效率的響應式設計,我們先設計桌面版本的網站,然后為移動設備減少其元素和內容。它和移動優先設計可以理解成兩個相反的原則,移動優先是首先設計較小的屏幕,然后為更大的屏幕添加更多功能和內容。


                    2

                    桌面優先設計的優勢

                    既然桌面優先設計和移動優先設計都可以去響應用戶的設備,那么桌面優先究竟有哪些優勢呢?以下便是設計師們青睞桌面優先的三大優勢:

                    1.你可以一次看到網頁所有功能

                    2.可以讓你設計出你首選設計的最大可能

                    3.對使用臺式機和筆記本的用戶,這是最好的策略

                    口說無憑,我們不妨來親身體驗一個桌面優先的設計案例。

                    以b站為例,桌面上首頁就有所有分類,鼠標懸停時也會出現這一類別下的具體分類。而手機端由于空間不足并且它靠手指觸摸無法實現鼠標的懸停,需要一步步在分區找,再導引到分類。再來比較一下個人中心,桌面官網右上角的視角可以是自己,也可以是新訪客和粉絲的視角來瀏覽自己的個人中心。這些都是移動用戶無法體驗的功能。

                    這就是桌面優先的優勢,桌面設計功能更為全面,設計師們可以設計出首選設計的最大可能,桌面用戶能得到得到更高的UX,即用戶體驗。

                    3

                    優雅的退化

                    咦,怎么剛剛還在聊桌面優先設計,突然出現了“優雅的退化”?難道要講生物學了?No!No!看完小編關于“優雅的退化”的介紹,桌面優先設計的重要意義也便一目了然。

                    不過我們是不是發現了呢,優雅的退化是構建Web功能,提供更多的現代瀏覽器的用戶體驗,但它也使用戶在舊的瀏覽器下體驗一個較低的水平。那這個瀏覽器的問題請往后看。

                    4

                    桌面優先設計需要解決的棘手問題

                    這個棘手問題,首先便是瀏覽器問題。大多數老版本的瀏覽器不支持現代桌面元素,如畫布,音頻/視頻和動態輸入。但近年來已有很大的變化。

                    現在所有移動瀏覽器基本上都支持與桌面瀏覽器相同的功能?,F代瀏覽器還使大多數元素的方式相同。像Chrome和Safari等主流瀏覽器的占比都是很大的,而且它們都能保證桌面端和移動端的功能相同。

                    其次是觸摸問題。告訴你個小秘密:桌面端和移動端最大的區別不在于HTML / CSS支持,而是基于觸摸支持。因為移動屏幕要小得多,并且還需要用手指敲擊。電腦鼠標比人的手指更精確,而且桌面屏幕更寬敞,更容易看。就像這里的food sense的頁面:


                    看吧,這里pc端的版面很大,而且鏈接分類等都很齊全,導航和鏈接的排版也比較松散,很方便鼠標點擊。然而平板電腦端和手機端就不是這樣了,它們的屏幕太小,排版比較緊,有些鏈接和文本框等也不太方便手指點擊了,觸摸突然困難起來。

                    所以從桌面轉到移動時,至關重要的是考慮不同瀏覽器的工作原理,支持的方式以及如何處理用戶基于觸摸的輸入。

                    5

                    縮小桌面設計的規則

                    接下來介紹縮小桌面設計的三大規則:

                    1. 使可變化元素更大

                    可以隨時檢查所有瀏覽器的HTML5規范,以查看哪些瀏覽器支持哪些元素。

                    2.添加支持滑動動作的JavaScript庫

                    可以使用JavaScript來檢查瀏覽器的尺寸或操作系統,如iOS或Win Mobile。使用此信息,可以加載額外的樣式表,并為觸摸/滑動事件創建完全不同的體驗(僅適用于移動用戶)還可以查找免費資源,如TouchSwipe,為所有網站添加支持觸摸和滑動手勢。

                    3.增加主體文字大小,使鏈接更容易點擊

                    我們不妨來看兩個App界面,這是韓國音樂節目的投票App:M COUNTDOWN和Show Champion,根據藝人在各大音樂節目的打歌,由專輯銷量等方面的分數來進行總排行。


                    現在我們對比一下這兩個App的界面,左邊MCD的主體文字較小,投票按鈕就只是右側小方框的這個按鈕,這個按鈕很小,不太方便粉絲點擊,而右邊冠軍秀的主體文字較大較顯眼,使用戶看的更清晰,而且它的投票按鈕是這一整條,無論是點擊圖片還是名字還是文字介紹都能進入鏈接,這個鏈接更容易點擊,相比之下用戶的體驗自然更為滿意。

                    6

                    桌面優先設計的適用情況及操作

                    最后,桌面優先設計在哪些情況下適用呢?小編來告訴你:如果移動體驗可以非常簡單,但桌面體驗需要詳細和動態,那么說起來就是桌面的工作量更小。

                    如果是喜歡從桌面工作并轉到移動,那么就可以獲得該流程的訣竅并可能成為一種默認值。當然,對一個鐘愛移動優先的設計師而言,按照喜好選擇同樣是有效的。

                    對想要嘗試桌面優先的入門者,在這里提供一些操作的建議:

                    1.確保有一個移動網站的計劃,至少有一個模糊的想法,看看它的外觀。起草一些線框,給自己一個起點。

                    2.還需要考慮所有屏幕尺寸不同的平板電腦,較小的上網本和筆記本電腦。桌面首先幫助建立一個在較大屏幕上工作的體驗,先關注每個可能的功能。

                    3.減少細節來改善界面。

                    4.從桌面的角度構建的項目有助于定義限制??梢宰杂蛇x擇網站的寬度,要使用什么樣的網格系統,以及所需要的功能。

                    最后再提供兩個小例子供入門者參考。


                    強大的桌面方法的一個很好的例子是Mashable。他們的全尺寸網站跨越1440px寬,包含三列新聞與巨大的導航菜單。

                    還有YouTube,我們可以看到桌面的功能是非常齊全的,而移動端就很簡潔,進行桌面設計的時候,通常是從桌面到移動逐步減少細節。

                    END

                    在這個響應式網站的時代,桌面優先設計是用戶體驗設計師非常重要的一種選擇??赐晷【幍慕榻B,是不是覺得桌面設計非常的高端大氣好處多多呢?快來實踐吧,相信桌面優先的設計理念會給你帶來意想不到的靈感火花。

                    免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

                    上一篇:JavaScript 編碼技術經驗,??贗T培訓
                    下一篇:編程語言之間的區別與選擇

                    UI設計師的響應式的定義,??贗T培訓

                    什么樣的字體排版才具有設計感?

                    • 掃碼領取資料

                      回復關鍵字:視頻資料

                      免費領取 達內課程視頻學習資料

                    • 視頻學習QQ群

                      添加QQ群:1143617948

                      免費領取達內課程視頻學習資料

                    Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

                    選擇城市和中心
                    江西省

                    貴州省

                    廣西省

                    海南省

                    亚洲做性视频在线观看|中文字幕乱偷在线|色777狠狠|四虎影视库的网站,亚欧美综合性色,国产高清在线观看91最新,色婷婷综合缴情综