Ⅰ 手機網頁UI設計尺寸是多少

這個不同手機尺寸不一樣,比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 這些比較常用,還有一些其他解析度
看你回具體是針對什麼手機答做的了!

Ⅱ 手機UI設計的基本規范

目前移動設計在我們的工作中越來越重要,除了掌握基本的UI設計技能之外,我們也要對移動互聯網的特徵有所認識。為了能在交互設計和用戶體驗上做出比競品更優秀的移動APP產品,我們必須知道移動設計的基本原則。
之前25學堂有跟大家說到移動APP客戶端的UI設計原則及UI界面適配步驟,還有APP觸控操作設計原則之觸控目標的尺寸大小。
從移動互聯網特徵的角度來看,移動設計的基本八條原則
[圖片上傳中...(image-501af8-1523091320600-7)]
1、內容優先 ,合理的布局
對於手機而言,屏幕空間資源顯得非常珍貴,為了提升屏幕空間的利用率,界面布局應以內容為核心,而提供符合用戶期望的內容是移動應用獲得成功的關鍵。如何設計和組織內容,使用戶能快速理解移動應用所提供的內容,使內容真正有意義,這是非常關鍵的。
(1)充足內容,使內容符合移動的特徵。
(2)優先突出用戶需要的信息,而簡化頁面的導航。
(3)適時提升屏幕空間的利用率。
2、是為移動觸摸而設計
點擊操作是PC時代交互的基礎,在觸摸屏設備上基於手指的手勢操作已經代替了滑鼠的點擊操作。
(1)以信息架構為基礎,簡歷手勢交互規范。
(2)優先設計自然的手勢交互,而不是TAP點擊
(3)引導用戶在情境中學習手勢操作。
(4)特殊手勢不是必須的。
(5)可觸區域必須大於7×7mm,盡量大於9×9mm。
(6)手勢操作需要提供過程及反饋演示。

3、輸入方式的 轉換
文字輸入是移動端的軟肋之一,不管是手寫輸入還是鍵盤輸入,操作效率都相對較低。在行走或者單手操作時,輸入的出錯率也比較高。
(1)減少文本輸入,轉化輸入形式。
(2)簡化輸入選項,變填空為選擇。
(3)使用手機已有的感測器輸入。
4、操作流程必須確保流暢性
在移動產品的操作過程中會碰到多種多樣的情況——找不到目標、不知道該怎麼操作、操作後沒有及時反饋,等等,這都會對產品的流暢性造成影響。在移動產品的設計中主要從三個方面來考慮產品的流暢性:
(1)手指及手勢的操作流。
(2)用戶的注意流。
(3)轉場流暢或者自然,不能牽強!

Ⅲ Android UI設計字體大小規范

Android UI設計字體,由於android廠商和設備之多,目前沒有特定的標准,但根據設備的尺寸,有一個建議的原則,如下:

sp和dp一樣,是android開發里特有的單位,設計師在做UI設計的時候通常最初是建立320*480這個尺寸的畫布開始的,這個尺寸的畫布在android解析度的分類中稱為mdpi,在這個尺寸下,ps里的1px就等於android中的1dp,同樣,這個時候1點的字就等於android中1sp。

Ⅳ 怎樣規范設計移動端APP的UI

想要成為一個合格的APP開發UI設計師那就要跟緊移動時代的腳步,了解每一個UI設計師必須掌握的基本技巧才可以。

第一:要了解平台

正如同網頁設計師需要了解html/CSS一樣,作為移動端UI設計師的你應該了解移動端APP的架構。首先移動端設計的語言和網頁設計的語言就不太一樣,不同平台有著不同的編程語言和介面,移動端界面的構成也是無法使用CSS和標簽來實現。

你需要深入閱讀官方的開發文檔,尋找更多有關APP的文檔知識,明白APP的構成,編譯方式,發布方式,了解設計的規則。這些東西不僅關繫到你的應用開發好壞,還會影響系統的 穩定性,電池續航長短等多種因素。作為移動端UI設計師,你單了解簡單的移動端設計是不夠的。我們需要從長遠的角度去思考問題。

第二:了解移動端的技術構成

對於一個UI設計師來說光了解平台的基本特徵是不夠的。接下來你需要了解它相關的技術構成:位置服務(wifi,GPS等),藍牙(低功耗藍牙技術),信號,前後攝像 頭,麥克風,陀螺儀,位置感測器,加速度感測器,指紋掃描儀(iPhone 5s),眼動追蹤技術,語音識別,人臉識別,等等等等。每一個新技術的背後以為著應用程序更多的可能性,交互設計、使用體驗,甚至商業模式。

第三:發掘本地UI組件的開發潛質

每個移動操作系統中中總有著大量的本地UI組件,他們有著極大的自由度,方便你進行定製。你需求確切地知道他們的特徵(尺寸,大小,功用),你可以為與你合作的開發者節省大量的工作時間。

第四:了解移動端的工作流程

安裝SDK並運行,了解移動開發框架,比如TubyMotion、Xamarin、Titanium。熟悉集成開發環境,因為這其中包含了移動開發所需的方方面面。

第五:了解移動端的界面模式

三大移動平台之間,有著相似之處,但是在深入探究他們的交互設計,會發現它們在理念上的巨大差異。作為一個設計師,你需要明白這些差異所在,以及它們是如何體現在實際案例中的。

不要只著眼於單一平台,三大平台都需要深入體驗,每天至少都要把玩一下,並且最少要持續半年。在這個過程中,體會差異,並且將你覺得重要的、有代表性的、值得保存記錄的界面截圖留存。作為單一平台的狂熱粉絲,你是做不好移動端UI設計師的。

第六:記錄並解釋你的UI設計

考慮到屏幕截圖並不足以表現UI全部的特性,你需要學會記錄界面不同的狀態、轉變過程、轉場動畫等信息,並且學會記錄界面對於不同狀況的反饋。

Ⅳ 手機軟體用戶界面UI設計規范是怎樣的

用戶界面設計的規范性顯得尤為重要。 一些事一、界面效果的整體性、一致性yixieshi手機軟體運行於手機操作系統的軟體環境,界面的設計應該是基於這個應用平台的整體風格,這樣有利於產品外觀的整合。 yixieshi1、界面的色彩及風格與系統界面統一互聯網的一些事軟體界面的總體色彩應該接近和類似系統界面的總體色調,例如:系統色調以藍色為主,我們的軟體界面的默認色彩最好與之吻合,若使用與之大相徑庭的色彩,比如大紅、檸檬黃,色彩的強烈變化會影響用戶的使用情緒,假想你買了一款從外觀到系統界面都很滿意的手機,操作的時候突然發現內置的應用軟體和系統界面不統一,你會有何感想呢?第一感覺不好的東西我們的用戶還會去用它嗎?所以我們要知道手機的外觀和系統界面已經是由手機製造商根據用戶審美習慣定製的,它應該有他們的審美群體,我們要給這款手機做軟體就應該有效地利用製造商基於此款手機的審美特徵,以贏得喜愛此款手機的用戶,使他們對系統界面的肯定和喜愛有效的轉移到我們的產品上來。當然合理地結合系統界面進行設計還包括圖標、按鈕的風格及在不同操作狀態下的視覺效果。互聯網的一些事2、操作流程的系統化互聯網的一些事手機用戶的操作習慣是基於系統的,我們的界面設計在操作流程的安排上,也得遵循系統的規范性,讓用戶達到可以使用手機就會使用我們的手機軟體,簡化用戶操作流程一些事二、界面效果的個性化一些事是不是我們追求整體性和一致性,就忽略軟體界面的個性化呢?整體性和一致性是基於手機系統視覺效果的和諧統一而考慮,個性化是基於軟體本身的特徵和用途而考慮。因此這一點也是不容忽視的!一些事1、特有的界面構架yixieshi軟體的實用性是軟體應用的根本,我們設計應該結合軟體的應用范疇,合理的安排版式,以求達到美觀適用的目的,這一點不一定能與系統達到一致的標准,它應該具有它所具有的行業標准,例如:證券交易、地圖操作等界面特徵,需要分析軟體應用的特徵和流程制定相對規范性的界面構架。界面構架的功能操作區、內容顯示區、導航控制區都應該統一規范,不同功能模塊的相同操作區域的元素風格應該一致,讓用戶能夠對不同的模塊的操作迅速掌握。從而也使整個界面統一在一個特有的整體之中。 互聯網的一些事2、專用的界面圖標一些事軟體的圖標按鈕是基於自身應用的命令集,它的每一個圖形內容映射的是一個目標動作,因此作為體現目標動作的圖標,它應該有強烈的表意性,製作過程中選擇具有典型行業特徵的圖符,有助於用戶的識別,方便操作。圖標的圖形製作不能太繁瑣,要適應手機本身顯示面積很小的屏幕,在製作上盡量使用像素圖,確保圖形質量清晰,如果針對立體化的界面,可考慮部分像素羽化的效果,以增強圖標的層次感。互聯網的一些事3、界面色彩的個性化設置互聯網的一些事色彩影響一個人的情緒,不同的色彩會讓人產生不同的心理效應,反之不同的心理狀態所能接受的色彩也是不同的,不斷變化的事物才能引起人的注意,界面設計的色彩個性化,目的就是用色彩的變換來協調用戶的心理,讓用戶對軟體產品時常保持一種新鮮度,它是通過用戶根據自己的需要來改變默認的系統設置,選擇一種自己滿意的個性化設置,達到軟體產品與用戶之間的協調性。在眾多的軟體產品中都涉及到了界面的換膚技術,在手機的軟體界面設計過程中,應用這一個性設置可以更大的提升軟體的魅力,滿足用戶的多方面需要!在具體操作實現的過程中,色彩的搭配顯得尤為重要,要考慮圖標色彩與換膚色彩的色彩反差和效果的統一,以不至於造成花、亂的界面效果。一些事三、界面視覺元素的規范。互聯網的一些事1、圖形圖像元素的質量一些事盡量使用較少的色深表現色彩豐富的圖形圖像,既確保數據量小又確保圖形圖像的效果完好,使圖形圖像在軟體系統中所佔數據量盡量減小,提高程序的工作效率。

Ⅵ 為什麼UI設計規范很重要

以下三點原來因:

  1. 保證平台統一自性

統一性是交互設計的一個基本原則,在一個長期迭代多人合作的項目中,不同的設計師會負責不同的模塊,每個人都有各自的思路,就有可能會對相同的元素做出了不同的方案,對於用戶來說容易造成困惑,對品牌整體形象的建設也沒有好處。所以對於較大型的產品,最好有設計規范來定義基本的元素,幫助眾多設計師一起做出有統一性的產品。

2.提升團隊工作效率

對於同一個基本元素,如果沒有設計規范,交互設計師需要設計一次交互方式,視覺設計師需要設計一次外形,UI開發同學需要開發一次,每個不同的設計師遇到這個元素時都可能重新設計一遍。但如果有了設計規范,只需設計一次,團隊中任何一個設計師需要用的時候直接拿來用就可以了,也不需要再進行視覺和開發,極大的提升了效率。

3.打磨細節體驗

在整理每個元素的規范時,設計師都需要對其場景、狀態考慮清楚。在整理的過程中,經常會發現一些以前沒注意到的問題,並進行優化。把一個小元素單獨拎出來仔細考量,寫成一篇完整規范的過程,其實就是在打磨細節的過程。

Ⅶ APP界面設計規范編寫指南

有關於《APP界面來設計規范編寫源指南》我的站酷看到過,我發你鏈接看一看吧!

http://www.zcool.com.cn/work/ZMjM2NTQ5NzI=.html

Ⅷ app ui設計 要求 怎麼寫

  1. 行業,業務介紹;告訴設計師app是用來做什麼的。及用戶群體大多是哪類人;有經驗的設計師會根據以以往經歷來斟酌設計。

  2. 設計要求及技術事項;如果你希望用什麼顏色;或什麼風格。可以把一些好的案例發給設計師。(但是也別太多;這無疑是把范冰冰眼睛,章子怡都嘴,林志玲都鼻子等諸多好東西從新拼湊;會起到反效果)技術事項是比如你的app是否需要兼容pad及安卓;

  3. 准備文案,比如app都首頁會有一張大廣告圖;但是圖上面的廣告語;得你來想好;如果設計師自己隨便弄個;也許不符合你的意願;完了修改。這又造成了時間與工作量的浪費。

    本答案由祝明園ui設計工作室專業回答

Ⅸ 小白一枚,想問一下如果做手機app的UI設計ios的尺寸規范是多少啊解析度都多少啊!求解

屏幕來解析度一般是3個尺寸自iPhone4:640*960pt iphone5:640*1136pt ipad:768*1024pt
icon一般要以下幾個規格:
Icon.png – 57×57 iPhone應用圖標
[email protected] – 114×114 iPhone Retina顯示屏應用圖標
Icon-72.png – 72×72 iPad應用圖標
[email protected] - 144×144 iPad Retina顯示屏應用圖標
Icon-Small.png – 29×29 iPhone 系統設置和搜索結果圖標
[email protected] – 58×58 iPhone Retina顯示屏 系統設置和搜索結果圖標
Icon-Small-50.png – 50×50 iPad 系統設置和搜索結果圖標
[email protected] – 100×100 iPad Retina顯示屏 系統設置和搜索結果圖標

希望可以幫到你

Ⅹ 如何做APP界面設計

第一點:了解你的目標客戶群的心態
1、做微任務的目標客戶群(如隨時隨地看看新聞,聽聽歌,看看電影,聊聊八卦之類):
這類的解決方案是設計的app最好是小而准,不要大而全。越全的功能應用,只能代表著這個應用在各方面的都很平庸
2、喜歡當工具來使用的目標客戶群:比如找地圖,看天氣,查數據等。
這類的解決方案是 我們盡最大努力的去滿足用戶的情景需求。做到極致和簡單。
3、無聊的客戶群,用來打發消磨時間的:無需求,漫無目的的
這類的解決方案是盡可能展示用戶感興趣的東西,幫助客戶來打發消磨時光。

第二點:APP原型圖的製作和設計討論
這個環節是必不可少的。需要根據設計需求認認真真的來畫畫原型圖。
常用的APP原型圖工具:移動APP原型設計神器 POP 、axure、Foreui等

第三點:APP視覺設計與設計要點
(1)大概設計板塊有APP啟動頁面設計,APP界面設計的尺寸規范,app圖標設計等
一般來說,手機屏幕是從上往下布局的,重要的信息會放在上方。但是在操作上,大部分人都是單手拿手機,常用的操作,要放在界面的下方。
另外還有一個原則,最小的觸摸單位,一般是44個像素。如果再小,你的拇指難以觸碰,或者容易引發誤操作。同時,也不要讓界面太擁擠。
所以,設計師必須用減法設計,這個過程需要花時間思考、簡化元素。
你必須記住:(1)隱藏設計或者減法設計 (2)分區或分類 (3)幫用戶做決策 (4)提高交互創新設計 (5)讓人有爽快感和新奇感 (6)在設計中浸入情感,把握用戶的心理。(談談如何進行產品設計以及產品情感化設計)
一位大師這樣說過「真正的簡約設計是:作品必須不斷的被簡化,一改再改,直到設計最終成形。」
2014年 APP設計風格趨向扁平化和卡片化。卡片,扁平化都會是移動app設計的趨勢!認為卡片設計確實同時兼具了「擬物」和「極簡」2種優勢!

第四點:APP界面設計流程

(1). 設計APP界面時,學會從優秀APP界面設計作品中尋求靈感,以前的藝術大師,用少量的資源做了大量的設計。
(2). 放下工作,休息一下很有幫助。扁平和簡約設計的一切均關乎到細節的差異。因此小憩片刻後再回到工作,帶著全新的眼光工作,比長時間冥思苦想更有
效。
(3). 並排比較各個版式同樣有幫助。哪怕花20分鍾前將一個線條下移各5個像素分別保存,對比兩個版式就能很快分清孰好孰壞。
(4). 由於實物展示的相對比例至關重要,所以要及早在不同的目標設備上測試。
(5). 整個設計過程中不斷問自己「真的需要嗎?」 。支撐項目時候,找一些討巧的辦法,例如,添加一些有趣的元素、樣式會這樣會很容易也會很吸引人,
但必須始終注意剔除不必要的元素,不斷精簡。甩掉你費盡心血的部分總是難以割捨,但修改過程必須挑剔。

第五點:APP界面設計測試與預覽修正
設計完成之後,我們可以把設計圖導入手機測試或者是校正。之前發布的在線測試工具:快速在移動終端上預覽APP界面設計效果圖的方法最後:好的APP界面設計作品必然是要經過不斷升級、重復迭代的。