可思分享 - 網頁設計範例哪裡找？探索靈感就用Pinterest

內容大綱

從資本額１萬的白手起家，到現在是營業額千萬的穩定公司，

從小型５萬的網站，到上百萬的大型專案，這十幾年的網站架設經驗，不算多也不算少， 網站架設的過程中難免和客戶有摩擦與誤解，
（創業心得可以看，我在PTT發表的文章），

讓我更認為公司應該是以服務為出發點，
幫助每個客戶完成心目中理想的網站，
以人為本，我們不是完美的，但是，我們盡力做好每一件事，

可以的話，請讓我們為您服務吧！

  html: table

原本table設計用來就是呈現複雜資料的一種html tag，但在早期也常被用來作為網頁的排版，甚至現在精美的email樣式也都仍然是用table來排版。

然而因為其複雜的html程式結構，還有樣式設定的彈性較低，在重視SEO且行動裝置普及的現在，已經不再適合作為網頁排版的方式。

 以table排版的網頁經常看到這樣的複雜巢狀結構

  css: float

後來使用div標籤（即division，部分、區塊）已成為網頁排版的主流。只要在div上設定其CSS的float屬性就能根據內容大小靠左或靠右，並且讓接續的文字環繞在旁。

常見的文繞圖就是再接續文字區塊的<img>上設定  float: left  或  float: right  。

 在bootstrap 3 的grid system也是以float作為排版方式

另外要注意的是float效果在position: absolute的元素上是無效的。

立刻來玩玩  https://www.w3schools.com/cssref/pr_class_float.asp

  css: flex

雖然float在排板上已經相較於table容易許多了，但還是有很多問題無法解決，例如：對齊、垂直排列、clear等等。

而flex的出現簡直就是救星！flex要注意的是外容器與內元素分別要設定的屬性是不同的，

並且要先在外容器設定 display:flex 或 display:inline-flex ，才能繼續設定外容器與內元素的flex相關屬性。

在bootstrap 4 的grid system也改以flex的方式作為排列方式。

不過flex能玩的東西太多了，後續會再寫一篇flex專篇來介紹！

 文章在這裡！

  css: grid

真正為了排版而生的css屬性終於誕生了！

不僅可以調整排列方向、對齊方式，還能夠直接設定欄、列數，以及欄、列的間隔，不用再自己計算50%或33.33%了！

與flex類似有外容器及內元素的概念，須設定外容器為 display: grid 或 display:inline-grid 。

但新的東西總是會遇上支援度不足的問題，在IE瀏覽器就無法使用grid屬性。

與grid相關的屬性也會在後續寫一篇為大家作介紹！

● UI是什麼？

UI（User interface design）又稱使用者介面設計
指的是在使用者體驗和互動的指導下對電腦、電器、機器、移動通訊裝置、軟體或應用以及網站進行的設計。
使用者介面設計的目標是使得使用者在完成自己的任務時與被設計物件之間的交流儘可能地簡單和高效。
好的使用者介面設計能夠讓使用者在完成任務時不必因為設計本身花費不必要的精力。
通過圖形設計可以提高介面的可用性。 

可以把UX想像成找出介面問題的內科醫生，UI像是治療問題的外科醫生，這樣的比喻應該能讓大家跟了解UI、UX設計師的不同。
--是什麼UX設計傳送門--

● UI設計的工作又是在幹嘛？

UI設計的工作基本上可以分為三大方向
1.確立介面的整體視覺準則走向
    如：視覺風格、元件設計、icon等等
2.交互動態設計與展示
    如：Hover效果、載入效果、各類動態效果等等
3.定義介面在不同的資料狀態的呈現方式
    如：錯誤、警告、理想、部分、空白這五大狀態

好的UI設計必須掌握10大設計上的準則
1：系統狀態的可見性
2：系統與現實世界之間的匹配
3：用戶控制和自由
4：一致性和標準
5：錯誤預防
6：認知而不是回憶
7：使用的靈活性和效率
8：美學和簡約設計
9：幫助用戶識別，診斷錯誤並從錯誤中恢復
10：幫助和文檔

有興趣的朋友可以去這個網址看一下
https://www.nngroup.com/articles/ten-usability-heuristics/

● 總結一下：
UI設計不只要掌握畫面整體的美感與資訊視覺化的展現，
更是要定義出介面在不同的資料狀態的呈現方式與整體使用介面上的一致性和標準，
降低使用者在介面上使用的錯誤，讓使用者可以在最低資訊負擔的狀態下使用介面，
當然還是要具備基本的程式能力，避免設計出來的東西無法實現喔！！

● 文獻參考：

https://zh.wikipedia.org/wiki/%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1
https://www.nngroup.com/articles/ten-usability-heuristics/

● UX是什麼？

UX（User Experience）又稱用戶體驗設計， 想了解是什麼是UX前不得不解說一下，UX始祖人因工程，在二戰時期才開始被高度重視， 雖說在一戰時期就有飛機與汽車這些產物，由於剛起步操作簡單大家並沒有發現人去適應機器的個問題所帶來的嚴重性，但二戰時各類的機器開始高度複雜化，駕駛人員在實際任務中失勢率超乎異常， 各大研究單位才開始正視人因工程的問題，要如何透過設計去減少操作者的錯誤率，讓機器去適應人開始變成了工業工程的核心要點。
隨的時代進步數位時代的到來，人們也開始把在機械的人因工程導入到了，電腦、手機、遊戲機、VR、AR這些數位產品，都在HCI的研究範圍內。

● UX設計的工作又是在幹嘛？

UI設計的工作基本上可以分為三大方向
1.目標使用者設定
2.滿意度的範圍和主題設定
3.使用者需求的功能
4.互動研究
5.系統回饋和最終的報告與成果
使用者經驗可以通過多種方法來度量，例如眼動追蹤、問卷調查等。
在問卷調查中，標準化的量表由於其客觀性和可比較性強以及易於使用等優點被廣泛應用。

什麼是好的UX設計？
11個屬性如下：
1：易學性
2：效率
3：實效
4：記憶力和保留力
5：低錯誤率和容錯能力
6：態度和滿意度
7：有用性
8：控制與靈活性
9：用戶特徵
10：上下文和目的
11：介面與設計
有興趣的朋友可以去這個網址看一下
https://econsultancy.com/the-attributes-of-usability-and-how-to-exploit-them/

● 總結一下：

UX是一個近年來新興的學門，不只要了解設計原理與研究方法，更是要了解視覺原理、認知心理學、人因工程、數據統計、資訊架構等大量的知識將其內化，提出使用上的問題與解決方法，最終目標當然是讓自己做出來的介面掌握了， 好的UX設計的11項準則。

● 文獻參考：

https://zh.wikipedia.org/wiki/%E4%BA%BA%E5%9B%A0%E5%B7%A5%E7%A8%8B%E5%AD%A6
https://zh.wikipedia.org/wiki/%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97
https://econsultancy.com/the-attributes-of-usability-and-how-to-exploit-them/

製作網站、eDM或是簡報，常常需要Icon（圖示）的支援，讓整體更加精美，而這些Icon可以從哪裡獲得？

以下推薦給你具備高質感的Icon網站，裡面有非常多免費的Icon可以使用，甚至PNG、PSD等多種格式喔！

FLATICON

在Fliters選擇Feee，就可以直接查看免費的Icon有哪些，支援PNG、SVG、EPS、PSD與BASE64，還可在下載之前先變換Icon顏色以及旋轉再儲存。看到喜歡的Icon也能將它放到收藏清單中。

https://www.flaticon.com/

ICONFINDER

免費Icon也直接幫你建好一個分類篩選好了，只要到網站就可以看到。圖樣豐富，支援PNG及SVG，也可將喜歡的直接加入收藏清單中。

https://www.iconfinder.com/

Noun Project

基本下載，也就是免費下載，是沒有自定義功能（變換顏色、旋轉）的，僅能以黑色下載。需要符合創用CC的規範標示原創者姓名。

https://thenounproject.com/

將這些網站儲存到書籤，日後就能夠在設計時，為你的作品增添一下質感囉！