移動端ui
1. web端UI設計和移動客戶端UI設計有什麼不同
界面的大小不一樣
UI即User Interface(用戶界面)的簡稱。泛指用戶的操作界面,包含移動APP,網頁,智能穿戴設備等。UI設計主要指界面的樣式,美觀程度。而使用上,對軟體的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。好的UI不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。
2. 移動端UI設計和PC端UI設計的區別
移動端UI設計:指的是手機上的UI設計
PC端UI設計:指的是電腦上的UI設計
那麼這2種UI設計有那些地方不同呢,
今天就和大家講下。
1. 屏幕尺寸不同
電腦顯示器的屏幕尺寸一般為,19-24英寸,
手機屏幕尺寸一般為,4-6英寸。
尺寸不同的背後就是,2種設計的設計顯示區域也不同。
所以電腦上的UI設計,首頁要多放一些內容,
盡量減少層級的表現。
而手機上的UI設計,因為屏幕顯示尺寸有限,
所以不能放那麼多內容,可以多加層級。
像電腦版的淘寶,一進入內容非常的多,包括了主題市場分類的顯示,
廣告頁的展示,個人中心的展示等。
而手機版的淘寶,層級較多,有五個大的展級,
其中主屏上又有十個小的層級,一層連一層,
展示區域相對較少,沒有主題市場分類的直接展示,
必須通過層級進入二級頁面才能看到。
2. 設計規范不同
電腦的UI操作一般是用滑鼠,手機的則是用手指,
滑鼠精確度非常的高,手的精確度相對較低,
所以電腦上的圖標一般會小一些,手機上的會大一些。
微信的電腦版的圖標,明顯比手機上的要小一些。
3. UI交互操作習慣不同
電腦可以實現,單擊,雙擊,按住,移入,移出,右擊,滾輪等操作。
手機只能實現,點擊,按住,和滑動等操作。
所以電腦上可以展現的UI交互操作習慣可以更多,功能也就更強。
手機上的話弱化了很多。
像手機版的騰訊視頻,在屏左邊上下滑動可以調亮度,右邊上下滑動可以調聲音。
最下面左右滑動可以調視頻的進度,雙擊可以暫停,其它的就是要通過圖標點擊才能生效。
而電腦版的,就可以雙擊,右擊,單擊,滾輪多點操作了。
3. 面試官問:PC端與移動端在UI設計方面有什麼區別
前端開發中PC端和移動端網站的區別,主要是:
1、PC端在開發過程中考慮的是瀏覽器兼容性,移動專端開發中屬考慮的是手機兼容性問題,做移動端開發,更多考慮的是手機解析度的自適應和不同手機操作系統的略微差異化;
2、在部分事件的處理上,移動端自然是偏向於觸屏的,另外包括移動端彈出的手機鍵盤該如何處理,這樣的問題在PC上肯定不會遇到,但在移動端,如果你沒有經驗,處理起來是相當麻煩的;
3、布局上,移動端開發是要做到頁面布局自適應的,而PC端頁面布局的比例會相對固定;
4、在動畫效果處理上,PC端要考慮IE的兼容性,通常用JS做動畫的通用性會好一些,但相比CSS3卻犧牲了較大的性能,而在手機端,如果要做一些動畫、特效等,第一選擇肯定是CSS3,既簡單,效率又高。
總結:以上是移動端和PC端比較突顯的區別,在實際的開發應用過程中,還會有更多的差異化區別。
4. 什麼叫移動UI設計師
移動UI設計師是從事對軟體的人機交互、操作邏輯、界面美觀的整體設計工作的人。
設計從工作內容上來說分為3大類別,即研究工具,研究人與界面的關系,研究人。 與之相應, UI設計師的職能大體包括三方面:
一是圖形設計,即傳統意義上的「美工」。當然,實際上他們承擔的不是單純意義上美術工人的工作,而是軟體產品的產品「外形」設計。
二是交互設計,主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計,並且確立交互模型,交互規范。
三是用戶測試/研究,這里所謂的「測試」,其目標恰在於測試交互設計的合理性及圖形設計的美觀性,主要通過以目標用戶問卷的形式衡量UI設計的合理性。如果沒有這方面的測試研究,UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判,這樣就會給企業帶來極大的風險。
(4)移動端ui擴展閱讀
UI設計師在移動應用產品設計、游戲軟體、多媒體製作、廣告設計、工業設計及醫療、軍事、科技、交通、通訊、商業流通領域都有廣闊的發展空間。
由於UI設計師在國內的發展尚處於起步階段,整體上缺乏一個良好的學習與交流的資源環境,這一領域真正高水平的、能充分滿足市場需要的UI設計師為數甚少;而IT行業日新月異的發展速度和人們日益提升的生活標准,也對從業人員提出了越來越高的要求。
因此,UI設計師應該通過不斷的學習實踐,在諸多不同領域,尤其是在人才資源普遍缺乏的社會學、心理學等人文學科領域拓展視野,豐富自我,努力向高級、資深設計師乃至設計總監的方向發展。
除此之外,具有較強協調、組織、管理能力和領導資質者,則可考慮晉升為IT項目經理。
5. 移動端ui設計分類排列方式有哪幾種形式
UI設計也抄是隨著互聯網的發展在不斷的更新的,每一個時期或者階段的用戶需求會發生很大的變化,不管是移動端還是pc端,如果始終堅持以往的設計風格,沒有新的變化,無疑會被市場所淘汰,每天都接受新的東西,是一位ui設計要做的事情。
6. 如何成為一個移動端UI設計師
學習,理解,聯系,實踐分這四步走,王氏【cgwang】就是走踏實路線,一步一個腳印最終一定會有收獲的,加油
7. 什麼是移動UI設計
什麼是UI設計
UI 設計,全稱 User Interfac,翻譯成中文意思叫做用戶界面設計。
UI設計按用戶和界面來分可分成四種UI設計。
分別是移動端UI設計,PC端UI設計,游戲UI設計,以及其它UI設計。
(前往公眾號UI設計區可了解更多)。
第一種:移動端UI設計
移動端UI設計,也就是手機用戶,界面指的就是手機界面,也就是說手機上的所有界面都是移動端UI設計。
比如微信聊天界面,QQ聊天界面,手機桌面,手機上看到的所有圖標界面點了後會有反應都可以理解成移動端UI設計。
第二種:PC端UI設計
PC端UI設計,也就是電腦用戶,界面指的就是電腦上的操作界面。
像電腦版的QQ,微信,PS等軟體和網頁的一些按鈕圖標等,都屬於PC端UI設計。
第三種:游戲UI設計
游戲UI設計,用戶也就是游戲UI用戶,界面指的是游戲中的界面,游戲中的場景人物什麼的就是不UI了。
像手游王者榮耀,端游英雄聯盟和一些其它游戲中的界面,登錄界面、個人裝備屬性界面也都是屬於游戲UI設計。
第四種:其它UI
像VR界面、AR界面、ATM界面、一些智能設備的界面,比如智能電視、車載系統等等,用戶較少,但又需要,未來有可能很火,有可能保持現狀。
據 網路經驗
8. PC端和移動端的界面設計,有什麼區別嗎
PC端和移動端的操作方式、顯示方式、用戶習慣等的不同,所有做PC端和移動端的原型界面設計時差別很大,即使是移動端,安卓和蘋果對於某些操作也是不同的,需要注意
9. 移動webapp前端ui用哪個框架好
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是騰訊社交用戶體驗設計 - 增值UI開發團隊一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規范,選取最常用的組件,
做成手Q公用離線包減少請求,升級方式友好,文檔完善,目前全面應用在騰訊手Q增值業務中。
FrozenUI提供的CSS組件是目前QQ會員前端開發組所用的通用樣式庫。遵循手Q樣式規范,基本樣式使用離線包的方式減少請求,並提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件,更優雅地在移動端上呈現更靈動的動畫效果。
FrozenJS 是針對移動端開發的 js 組件庫,其依賴 zepto.js 和 FronzenUI。
FrozenJS 的所有組件均以 zepto 的插件的形式存在。
阿里開源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基於 Framework7 開發的UI庫。並參考 Ratchet、Fastclick 開源庫。它非常輕量、精美,只需要引入我們的CDN文件就可以使用,並且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開發跨平台Web App。
輕量的UI庫 SUI Mobile 非常輕量,核心庫壓縮Gzip後的JS、CSS網路傳輸體積總共只有52K,卻提供了20+個常用的組件。
對於只有HTML&CSS的組件,你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件,並且提供了Zepto/jQuery 風格的API,你將會非常熟悉這種方式。
開發團隊:阿里巴巴共享業務事業部UED團隊
網路系
GMU
GMU是基於zepto的mobile UI組件庫,提供webapp、pad端簡單易用的UI組件!
Jingle
Jingle是一個SPA(Single Page Application)開發框架,用來開發移動端的html5應用,在體驗上盡量去靠近native應用,希望有一天html5能夠做到與native一樣的操作體驗。
豐富的UI組件提供了按鈕、列表、表單、彈出框、輪換、上拉/下拉、日歷等各種移動端常用的組件,簡單適用,
前後端分離支持前端模板渲染,模板按需自動載入,完善的事件機制。
輕量級基於Zepto開發,依賴了iscrol
purecss
purecss採用其Grid的部分即可,需要定製的部分,建議自行配置,或者是直接採用grid.css,grid960.css這樣的柵格來處理。Purecss小的沒有節操,全部模塊gzip壓縮後才 4.4KB* 。 考慮到移動端,保持文件盡量小對我們來說非常重要,每一行CSS都經過深思。如果你只用部分模塊,簡直小的忽略。
Pure基石,Pure基於Normalize.css添加了HTML元素的布局和樣式,以及常用的UI組件。全是精華,木有糟粕。
移動端是初衷,Pure是響應式的盒子模型,適應所有尺寸的屏幕。通過皮膚生成器可以自定義樣式。
寫出你自己的樣式,Pure提供最基礎的樣式,鼓勵你基於此寫出自己的樣式。它被設計為容易覆寫,且不影響你自己的樣式。
ionic
基於angular2,豐富的UI組件,大大改進的編程模型,非常適合快速開發。
jquery mobile
jQuery Mobile 是創建移動 web 應用程序的框架。
jQuery Mobile 適用於所有流行的智能手機和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
Bootstrap
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式布局、移動設備優先的 WEB 項目。
wex5
國產的ui,支持打包。
前端UI:完全恪守html5+css3+js,干凈純潔設備api:採用業界主流Phonegap/Cordova
向導、模板:簡單定義,即可輕松製作向導和模板
主題、樣式:海量bootstrap資源引入和定製
UI組件:純H5+CSS3,輕松引入第三方UI組件
插件:輕松對接即時通訊、推送、支付等各類插件
後端:輕松調用後端組件和api,並實現可視化
10. 網頁UI設計和手機UI設計的區別是什麼
網頁UI設計,面對的對象是網頁,各種的網頁。
手機UI設計,面對的對象是手機端APP的頁面。
兩這個規則是不一樣的,因為屏幕的大小是有所區別的。