app網頁如何設計

1、App 設計與 web 設計的主要區別是什麼

從使用場景上，Web App用戶面臨比原生APP用戶更嚴峻的問題：
1、頁面跳轉更加費力，不穩定感更強
思考點：如何減少跳轉（扁平結構、頁面布局技巧），增加數據及展示的流暢流程及穩定性（技術）。

2、更小的頁面空間（由於瀏覽器的導航本身佔用一部分屏幕空間），更大的信息記憶負擔；
移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的，用戶在滾動屏幕的過程中需要臨時記憶的信息越多，他們的表現就會越差。——《貼心設計：打造高可用性的移動產品》
思考點：排版更清晰、信息更簡練 （可在原生APP基礎上去掉一些豐富、復雜的視覺表現）

3、導航不明顯，原有底部導航消失，有效的導航遇到挑戰
思考點：如何有效的提供導航？有哪些形式？

4、交互動態效果收到限制，影響一些頁面場景、邏輯的理解。
思考點：比如登錄注冊流程的彈出、完成及異常退出，做好文字提示。

區別：APP屬於手機應用客戶端，移動網站可以製作成APP，APP也可以呈現手機網站。

相同點：二者都屬於手機系列 區別在於：APP可以安裝到手機上，而移動網站只能通這用戶打開網址才能打開了解信息。如果移動網站設計成app，則二者兼合。

2、如何成為一個APP前端UI設計師

了解平台
正如同web設計師需要了解HTML/CSS一樣，作為移動端UI設計師應該了解移動端APP的架構。首先移動端開發的語言和網頁設計就不太一樣，各個不同平台有著各自的編程語言和介面，界面的構成也無法使用CSS和標簽來實現。需要深入閱讀官方的開發文檔，明白APP的構成，編譯方式，發布方式，了解設計的規則。這些東西不僅關繫到應用開發好壞，還會影響系統的穩定性，電池續航長短等多種因素。作為移動端UI設計師，單了解設計是不夠的。
了解移動端的技術構成
光了解平台的基本特徵是不夠的。接下來需要了解相關的技術構成：位置服務（wifi，GPS等），藍牙（低功耗藍牙技術），信號，前後攝像頭，麥克風，陀螺儀，位置感測器，加速度感測器，指紋掃描儀（iPhone 5s），眼動追蹤技術，語音識別，人臉識別，等等等等。每一個新技術的背後以為著應用程序更多的可能性，交互設計、使用體驗，甚至商業模式。
發掘本地UI組件的開發潛質
每個移動操作系統中中總有著大量的本地UI組件，有著極大的自由度，方便進行定製。需要確切地知道特徵（尺寸，大小，功用），可以為合作的開發者節省大量的工作時間。
了解移動端的工作流程
安裝SDK並運行，了解移動開發框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開發環境，因為這其中包含了移動開發所需的方方面面。
了解移動端的界面模式
三大移動平台之間，有著相似之處，但是在深入探究交互設計，會發現在理念上的巨大差異。作為一個設計師，需要明白這些差異所在，以及是如何體現在實際案例中的。
不要只著眼於單一平台，三大平台都需要深入體驗，每天至少都要把玩一下，並且最少要持續半年。在這個過程中，體會差異，並且將覺得重要的、有代表性的、值得保存記錄的界面截圖留存。
記錄並解釋你的UI設計
考慮到屏幕截圖並不足以表現UI全部的特性，需要學會記錄界面不同的狀態、轉變過程、轉場動畫等信息，並且學會記錄界面對於不同狀況的反饋。
在設計階段踐行精益UX設計
一個現代的設計師應該是具備戰略眼光的設計師。目標不能局限於悶頭製作漂亮的界面，你應該讓設計與團隊合作結合到一起，切合項目需求。洞悉用戶深層次的需求，並且能快速地隨之反饋到設計上。將設計作品保存下來並附上詳細的說明，確保所有的設計都與核心理念保持一致，與用戶需要保持一致。
在開發階段採用敏捷UX設計
不能只將高保真的模型交給開發者就了事，因為在開發過程中會不斷提出新的需求。總會有之前考慮不周全的情況，需要在開發階段進行補充完善，設計師需要隨之進行快速響應。所以，在這個階段，設計師真的需要坐在開發者旁邊應付突發情況。確保開發者在碰到新的需求的時候，不用開發者自己來補充UX的細節，或者再來找設計師。

3、設計PC端網頁原型和手機端APP有什麼區別

1、內容上pc端一定是內容豐富的，app一定是內容精簡的
2、從產品功能架構上，app端的設計通常只能滿足主流用戶的常用功能，相反pc端可以兼顧更多的用戶提供更全面的服務
3、相比pc端，app更注重用戶體驗設計，例如操作流程簡單快捷，語言文字精簡移動。
4、升級優化方面，pc端通常適合於兩年一小改，三年一大改，指的是改版。app則比較頻繁，且第一版本一般只是先主要功能，之後2、3個月幾乎就要出一個小迭代版本。

4、app分享h5頁面ui怎麼設計

若是你有基礎，比如是平面設計出身，PS，AI都很厲害，那麼就是缺乏交互方面的知識或者是其它的UI知識，那麼我建議可以去報一個專項學習班，差哪兒補哪兒。當然也可以根據自身的情況選擇自學。不過一般轉行業說明你差不了那幾個錢，能夠花點錢幫助你快速轉行，相信還是非常劃算的，或者百度文庫相關資料，介紹全https://wenku.baidu.com/view/.html?from=search

5、如何開發設計APP

千夏軟體（www.qianxx.com）表示一個APP項目的最初首先要確定項目整體方案，整個項目的規劃，大體框架，做成文檔展現出來，以便大家提意見和更好的改進。也就是說首先要確立產品原型，進入項目評估階段。經過反復確認，最終形成產品腦圖和完整的需求文檔。
2.功能設計—APP項目概要設計
第二步相當於網站的需求分析，需要整理確定App的主要用戶群體和APP能實現的功能。關於APP開發設計可以在DevStore平台上藉助一些工具來充實你的APP，像結合推送、地圖、社交分享、第三方登錄等常用的工具讓你的APP更豐富一些。藉助第三方服務來豐富自己的作品是很好的借力途徑，一定不要錯過，平時要養成收集平台的習慣，例如工具平台，學習交流平台，養成總結整合資源會是受益一生的好習慣。
3. 功能實現—APP項目打碼階段
APP的大概界面構思和設計，大功能模塊代碼編寫。正式進入產品的原型設計階段。UI、UE開始設計，形成初步的效果圖。在經過確認後界面的效果圖正式設計完成。產品在設計圖完成後，進入研發階段。通過編程語言形成正式的程序。至此，App的製作過程就完成了一大部分，可以進入測試部進行測試。作為一個開發者來說這才是重頭戲，設計，測試都是別人的事情，這一步主要是開發者努力打碼階段，不斷碼磚，修bug階段。
4.測試—APP項目大家評
把大概的界面和功能連接後，App的大致demo就出來了，demo自己試用和體驗幾遍後，根據實際情況修改，沒有大錯誤後，新版本可以嘗試尋找beta用戶， 根據測試用戶的反饋，改進並反復測試。用戶測試階段一定要把每個用戶的意見考慮進去，不一定每個意見都會採納，但是不要放過一點瑕疵，盡全力讓自己的作品更好。
5.APP項目完成
在產品經過多次測試，修改bug確認無誤後。一個App製作項目就完成，可以進入個大市場，投放使用。市場推廣也是比較關鍵的一步，在各大市場中，開發者就要通過各種方式推廣自己的App產品，力求App在市場上獲得更多的下載量，吸引更多的用戶。

6、如何設計好app里的個人設置頁面

css屬性 overflow-y:auto; DIV裡面的內容超過DIV的高度，右邊就會自動出現滾動條1、用一個div，定製成圖中的寬度和高度2、然後再把div的樣式設成overflow-y:scroll，當div里的文字超出那個高度的時候，滾動條就出來了。例如：<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

7、#ui設計師#一個App和網頁設計的流程是什麼樣的？能詳細說明下嗎？

APP設計流程 接到項目，先進行市場分析確定他的可行性，然後對目標用戶分析確定他的可用性，競品分析，吸取競品的優勢，根據用戶研究做出原型圖設計，再根據原型圖進行優化升級，做出合適風格的高保真圖，最後切圖，標注給開發人員。
網頁設計流程 網頁的話很APP進行的差不多，前期分析，而後根據企業特性，公司文化，公司特色，公司形象，展示自己的優勢，做出讓用戶易操作，易識別，易用性高的網站。 來自職Q用戶：用戶3780419
行業定性-市場方向-市場調查-潛在用戶-確定功能-開發流程（原型圖-視覺圖-開發-測試）等 來自職Q用戶：匿名用戶

8、如何說一個手機app的設計理念？

第一：品牌

品牌是應用設計的基石。它回答了「用戶使用應用時應該獲得何等感受」這個問題。

首先，你應該確定你的主要目標人群或者產業是哪些：兒童，青少年，專業人士，媽媽，學生，醫生，設計師，老年人，等等。應用的設計風格必須與品牌相一致，這樣才能建立更強的品牌認知，並消除用戶疑慮。

例如，為老年人設計的社交應用就應該用大號字體，而股票交易應用就得有策略地使用安全鎖圖標來讓用戶有安全感。如果可能，你還該考慮為品牌找一個吉祥物。吉祥物可以將品牌擬人化，同時強化應用留給用戶的印象。

第二：顏色方案

顏色方案決定了應用的形象，它應該是品牌主題色的擴展。

它是視覺設計的核心，因為應用所有可見的地方都會使用這些顏色。首先，你需要選擇一個能增強品牌形象的主題色。例如，Evernote的主題色是綠色。然後，你應該圍繞這個主題色來創建顏色方案。亮色可以吸引人的目光，所以適合那些消費導向的應用;中間色可以讓人把精力集中在信息本身，所以更適合專業性的應用。

Parable的主題色是「Tangelo橙」，因此我們選擇了灰度作為主要顏色方案，這也符合我們一貫的時尚創意。另一個例子是SnapChat，它使用了華麗的亮色方案來吸引青少年用戶。

第三：直觀

在高度競爭的應用市場，根本沒時間讓用戶仔細品味你的應用——我們講究的是「一見鍾情」。能讓你第一眼就明白其功能的應用才是最好的應用。

有一個管用的小方法，就是去研究一下那些熱門應用是怎麼做的，盡量別讓用戶產生困惑。然後，要全面地測試所有的交互環節，充分優化應用。到達最重要的交互環節之前，用戶的操作步驟不能超過三個，例如，發布到Meerkat上只用點一下，發布到Instagram上只用點三下。一些用戶熟知的平台上有特定的交互方式，使用它們往往會效果拔群。

第四：愉悅感

用戶評價應用的首要標準是體驗。

想要獲得死忠用戶，你必須得提供一些意料之外的愉悅感。隨著時間的推移,這些愉悅的體驗就會給用戶留下深刻印象，從而讓應用成為他們日常生活必要的一部分。

像Pinterest和Parable里點擊分享時候出現的動畫，還有刷新SnapChat時候的動畫，都是很好的例子。

第五：精煉

卓越的視覺設計都是細節為王，每一個像素都要完美無缺。首先是排版。字體是應用的臉面，一個好的字體可以讓你的應用脫穎而出。

你可以從50多個iOS字體中精心挑選一個來;當然，如果你能購買並製作屬於自己的字體那就更好了——總之，千萬別弔死在默認字體這棵樹上。Serif字體適合長文章;san-serif字體可以使用更多字體大小而不讓頁面看起來擁擠。緊湊型字體可以讓屏幕上顯示更多文字，但它跟普通字體放一起就會很奇怪。接下來，我們來談談圖標的問題。能准確傳達情緒的圖標才是最好的。你可以利用一些免費的圖標資源，然後在Photoshop裡面稍加修改，把它們變成自己的圖標。

當創建純色圖標時，堅持使用單一色彩可以避免讓用戶感到擁擠和混亂。最後,讓我們把重點放在視覺資源上。Post-skeuomorphic時代讓資源開發變簡單了。我們應當盡量在代碼中進行渲染，以盡可能地縮小應用包。添加資源時需要確保它們能正確匹配屏幕大小;粗製劣造的一大表現就是資源的像素化。

第六：簡化

開發者總喜歡添加一些復雜的導航界面或者用無關的信息，結果把界面搞得一團糟。這簡直讓用戶崩潰。

讓一切保持簡單!屏幕布局應當保持整潔，信息應該分層排列，重要的在上面，不重要的在下面。只顯示相關度高的細節，用統計工具分析有哪些動作是沒用的，然後把它們刪掉。可以借鑒蘋果的理念：無贅物即為完美。分析下面這個簡潔的Pinterest個人主頁。

它把用戶和分塊展示區放在一起，最重要的關注和點贊按鈕被小心地放在了合適的位置。要做最佳應用則需更深刻地貫徹這一原則，讓內容動態化，例如在滾動瀏覽時導航欄要隨著動畫隱藏，再如在多步驟的交互中要隱藏按鈕。

9、網頁設計html5和製作手機app的軟體用法一樣嘛？有什麼區別？

不一樣吧，HTML是超文本語言，也是一種計算機語言，編程的一種語言，而手機軟體的語言好像是Java語言，當然，現在有那種無需會編程就能生成手機軟體的工具，不過這局限很大。

10、App中的空白頁面應該如何設計？

我認為做一個產品面向於用戶時，就像是跟對方交流一樣，你的語言就是你的App所呈現給用戶的內容。你需要用你的界面跟你的用戶去對話，溝通，才能讓你們之間的交流順暢且具有持久的粘性。

所以說，每一個頁面，你都需要設計的合理，以便讓這個頁面在被用戶看到的時候，是可以說話的，是對方能理解的，是可以引導對方去跟你交流下一步的。

好了，回歸話題，App的空白頁。

第一個問題，你的App為什麼會產生空白頁面？

App啟動的時候（冷啟動，無內容）

App出錯的時候

用戶內容為零的時候

先說App啟動的時候。

如果用戶第一次打開你的App，你需要有一個靠譜的開場白來讓你們迸發出第一句話吸引到你的用戶。所以建議在App啟動的時候，頁面最好有一些預置的內容。比如說，你的App中的內容需要用戶注冊或者是登錄後才能使用。所以很多App一上來就以一個生冷的畫面，要求用戶去注冊或者是登錄。換個角度，你是用戶的話，遇到一個一上來讓你掏身份證的人，你會跟他繼續交流么，肯定不會啊。

所以，這個時候你應該預置一些內容，比如一些吸引的跟登錄後的內容有關的資訊類的東西，讓用戶先行瀏覽，瀏覽後用戶後下一步慾望操作的時候，你要求他登錄。

如果，實在是沒有什麼優質內容可以免登陸查看的話，那麼，可以讓你的第一個頁面更加「性感」、「有意思」，吸引用戶「渴求」進一步操作，「渴求」與你的對話溝通。這個時候，就要考驗你的設計團隊能力了，不過，作為產品經理，你需要有自己的核心想法並且傳遞給你的設計團隊。

然後，App出錯的時候。

這有可能是用戶操作失敗了，或者是網路失敗了，或者是其他什麼問題。無論是哪種情況，都是需要「和諧」的對話的。這就像是你跟用戶交流的時候，突然出現故障了，你需要站在你的用戶的角度想想，遇到聊天中斷的故障時，用戶的第一反應是什麼——「我擦，出什麼事了」。看到了吧，不安的焦躁的情緒。所以你的第一任務是——安撫你的用戶，安撫你的聊天對象。安撫的方法可以是你的頁面展示元素，也可以是一句溫馨的打趣的好玩的話。

用戶的情緒穩定後，第二反應是——「為什麼會這樣」，你要用最簡潔的語言跟對方解釋清楚為什麼會這樣，例如「網路連接失敗」

用戶知道出錯原因後，第三個反應是——「我該怎麼辦」，你需要有直觀的引導方式來告訴用戶應該怎麼操作才能解除這個問題，例如「稍後再試」、「立即刷新」、「去設置網路」

此處，建議頁面設計地應該有一些靈動性，符合你的App整體風格，或嚴肅，或賣萌，或調侃，或溫情。

然後，用戶內容為零的時候。

這有可能是用戶刪除了整個頁面的內容，也有可能是用戶誤打誤撞進來了一個無內容的頁面。OK，anyway，這個頁面啥也沒有了，也沒有出錯，遵循頁面功能的原則，也不能出現該頁面功能無關的內容。還是跟聊天一樣，試想一下你和用戶正在交流，他問了你一句話，你無法回復給他答案。這個時候你應該怎麼做呢？是應該站著不要說話？NO，no，當然不是，這樣你聊還怎麼繼續聊天。你需要做的就是告訴他「不好意思，我沒有什麼可以回復的了」。so，這個頁面，第一個要表現的元素就是——「頁面內容為空這一事實」。其次，為了讓你們的對話繼續下去，你可以建議你的聊天對象做點對應的事情，會不會讓聊天更有持久性。比如，你們的對話可能是這樣的「不好意思，我沒有什麼可回復的了，不過你可以看看那兒沒准可以讓我回復」。so，這個頁面的第二個要表現的元素就是——「建議用戶可用的操作」

OK，先講這么多，有問題可以單獨留言給我~