ลักษณะทั่วไปของเว็บ UI

ฉันต้องนำเสนอต้นแบบของเว็บแอปในวันต่อ ๆ ไปให้กับลูกค้าคนหนึ่งของฉันสิ่งนี้คือฉันไม่เก่ง CSS และที่แย่ที่สุดคือฉันแทบไม่เคยพอใจกับผลลัพธ์ที่ได้รับเลย

การเข้ารหัสตรรกะทางธุรกิจไม่ใช่เรื่องท้าทายสำหรับฉัน แต่การออกแบบ UI ใช้เวลามากกว่า 80% ของเวลาของฉัน ฉันไม่ต้องการอะไรที่น่าทึ่งเพียงแค่สภาพแวดล้อมที่สะอาดสวยงามและเรียบร้อยตัวอย่าง:

นี่เป็นปัญหาที่เกิดขึ้นซ้ำซากที่ฉันเคยพบฉันหวังว่าการพัฒนา UI ของเว็บจะมีรูปแบบเริ่มต้นที่เปลือยเปล่าน้อยลงวิธีการที่คล้ายกับVisual StudioหรือiPhone SDKจะมีประโยชน์มากสำหรับฉัน

ตัวอย่างด้านบนที่สร้างขึ้นด้วยBalsamiq Mockupsเป็นตัวอย่างที่ยอดเยี่ยมมี "ส่วนประกอบ" ที่พบบ่อยที่สุดทั้งหมดและที่ดีที่สุดคือมีสไตล์ที่ดูดีเพียงแบบเดียวให้เลือก

มีอะไรแบบนี้สำหรับเว็บไหม? กรอบ CSS หรือ Javascript UI ที่เป็นกลาง แต่ดี?

ตัวเลือกจนถึงตอนนี้:

• Bootstrap
• Qooxdoo
• jQuery UI
• jQuery Tools
• MochaUI
• ต่อ JS
• Yahoo! ไลบรารีส่วนต่อประสานผู้ใช้
• บลูทริป
• พิมพ์เขียว
• Uki ( สาธิต )
• Napkee
• YAML
• พื้นฐาน
• iPlotz
• Sproutcore
• ForeUI

ฉันสนใจที่จะทราบว่ามีเฟรมเวิร์ก UI เฉพาะ CSS หรือไม่

ฉันพบว่าหน้านี้มีรายการ Web UI Libraries ที่ดีมาก แต่ส่วนใหญ่ (อย่างน้อยก็ดี) ดูเหมือนจะเฉพาะกับ Java มีทางเลือกอื่นที่ดีพอ ๆ กันใน CSS หรือ JS ล้วนหรือไม่

PS: ฉันไม่สนใจ AJAX เอฟเฟกต์พฤติกรรมและอื่น ๆ ... ข้อกังวลหลัก (เท่านั้น) ของฉันคือสไตล์

ขอบคุณสำหรับคำแนะนำทุกคน!

หลังจากพิจารณาอย่างรอบคอบเกี่ยวกับไลบรารี UI ทั้งหมดที่แนะนำฉันได้ข้อสรุปว่า ExtJS และ Qooxdoo เป็นสิ่งที่ตรงกับความต้องการของฉันมากที่สุด jQuery UI ดูเหมือนจะมีแนวโน้ม แต่จะมีองค์ประกอบลดลงเท่านั้น

เท่าที่ไลบรารี CSS เท่านั้นฉันพบว่า BlueTrip / BluePrint และธีมที่แนะนำโดย tambler นั้นดีที่สุด นอกเหนือจากนั้น Flex และ Napkee ก็คุ้มค่าที่จะสำรวจ

ได้เวลาเรียนรู้ ExtJS ทันที! =)

ฉันไม่อยากเชื่อเลยว่าไม่มีใครพูดถึง:

http://www.extjs.com/

มันเป็นเฟรมเวิร์ก js เชิงพาณิชย์ แต่ราคาไม่แพงและทำให้การรวม UI ที่ดีเป็นเรื่องง่าย มีชุดองค์ประกอบที่สมบูรณ์มากขึ้นจากนั้น jqueryui และได้รับการออกแบบมาเพื่อสร้างแอปทั้งหมด ฉันเล่นกับมันเพียงเล็กน้อย แต่ฉันรักมันมาก ฟรีสำหรับใช้ส่วนตัว

หากคุณต้องการสัมผัสกับ UI ที่สมบูรณ์ที่พัฒนาด้วย EXT ให้ลองใช้ URL นี้:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

การรวมกันของ960gsสำหรับรูปแบบและjQuery-UIสำหรับการจัดแต่งทรงผมอาจเป็นสิ่งที่คุณต้องการ

คุณยังสามารถพิจารณากรอบ CSS พิมพ์เขียวแทน 960gs

แล้วการใช้dojoและdijitล่ะ?

Dijit เป็นวิธีที่รวดเร็วในการสร้างวิดเจ็ตและองค์ประกอบต่างๆ นอกจากนี้ยังมาพร้อมกับ 3 ธีมเริ่มต้นซึ่งง่ายต่อการปรับเปลี่ยน

รายการวิดเจ็ตต่างๆที่ดีที่นี่

จับคู่กับผู้ที่เชี่ยวชาญในการออกแบบ UI

หากคุณจัดการกับตรรกะทางธุรกิจได้ดีขึ้นเวลาของคุณจะดีกว่าในการเขียนโค้ดตรรกะทางธุรกิจเพื่อให้คุณสามารถเชี่ยวชาญ สิ่งนี้จะทำให้คุณต้องเรียนรู้วิธีการติดต่อกับคนอื่นที่เชี่ยวชาญในการนำเสนอ ( xmlและjsonเป็นวิธีการทั่วไป)

ตรรกะทางธุรกิจและการนำเสนอแตกต่างกันมาก การออกแบบระบบที่ไม่เพียง แต่ดูดี แต่ใช้งานง่ายและใช้งานง่ายนั้นค่อนข้างยาก ยากพอ ๆ กันและใช้เวลานานพอ ๆ กับการสร้างผลงานภายในของแอปพลิเคชันที่ซับซ้อน

อินเทอร์เฟซที่ดีนั้นไม่ง่ายเหมือนการรวม css framework

ฉันคิดว่าตัวเองเป็นโปรแกรมเมอร์ที่มีความคิดสร้างสรรค์มากกว่าและสามารถนำเสนอได้ดี ฉันบังเอิญโชคดีพอที่จะข้ามเส้นทางไปกับใครบางคนที่ก่อนอื่น ... มีแรงบันดาลใจมากและอย่างที่สองก็เก่งเรื่อง 'ตรรกะทางธุรกิจ' เขามีประสบการณ์มากขึ้นในการวางแผนและใช้ระบบที่ซับซ้อนในขณะที่ฉันเน้นไปที่การออกแบบอินเทอร์เฟซเป็นหลัก

หากคุณมีประสิทธิผลมากขึ้นในการทำสถาปัตยกรรมระบบการวางแผนการพัฒนาอะไรก็ตาม ... คุณควรผลักดันตัวเองไปในทิศทางนั้น แม้ว่าโครงการพัฒนาเดี่ยวจะสามารถตอบสนองได้ดี แต่ฉันก็มองว่ามันไม่มีประสิทธิภาพ เป็นเรื่องยากมากที่จะมีใครมีทักษะในการพัฒนาแอปพลิเคชันระดับสูงแบบเดี่ยว ๆ

ความท้าทายคือการค้นหาคนที่คุณทำงานได้ดี

ตรวจสอบGoogle Web Toolkit มีรูปลักษณ์เริ่มต้นที่ค่อนข้างสะอาด พวกเขามีตัวอย่าง โดยเฉพาะอย่างยิ่งตัวอย่างShowcaseของพวกเขาแสดงให้เห็นถึงวิดเจ็ตที่มีอยู่ทั้งหมดและสไตล์ css ที่ใช้เพื่อให้ได้รูปลักษณ์

มีกรอบงานบางส่วนที่มุ่งเป้าไปที่ (G) UI Design; Qooxdoo , JQuery UIและMochaUIเป็นเพียงไม่กี่ตัว (แม้ว่าสุดท้ายจะเป็นแนวคิดที่พิสูจน์ได้มากกว่าเฟรมเวิร์กที่ใช้งานได้) เฟรมเวิร์กเหล่านี้มักจะมีองค์ประกอบที่ขับเคลื่อนด้วย JS หลายแบบ (องค์ประกอบฟอร์มเช่นช่องป้อนข้อมูลและปุ่มส่ง แต่องค์ประกอบอื่น ๆ เช่นแท็บด้วย อย่างไรก็ตามยังคงขึ้นอยู่กับคุณที่จะจัดวางองค์ประกอบเหล่านี้และอาจจัดสไตล์ให้เป็นที่ชื่นชอบของคุณ

บางทีการทำความคุ้นเคยกับ CSS framework (เช่น960GS ) อาจช่วยเสริม JS UI Frameworks ข้างต้น

(เพื่อเป็นการปฏิเสธความรับผิดชอบส่วนบุคคลฉันมีประสบการณ์น้อยมากกับกรอบใด ๆ ที่กล่าวถึงข้างต้น แต่ฉันแน่ใจว่า Google หรือ SO สามารถให้คำตอบที่ฉันทำไม่ได้)

สิ่งนี้จะไม่ช่วยคุณในโครงการปัจจุบันของคุณ แต่ควรพิจารณาสำหรับโครงการในอนาคต หลังจากใช้เวลาหลายปีในการสร้างแอปพลิเคชัน GUI ใน HTML 4 และต่อสู้กับข้อ จำกัด ของ CSS และ HTML อยู่ตลอดเวลาฉันคิดว่าจะลองใช้ Adobe Flex สิ่งที่ต้องปรับปรุง!

แทนที่จะปลอมตัวควบคุมเพจแบบแท็บหรือตารางข้อมูลด้วย Flex หรือ Silverlight มาร์กอัปของคุณสามารถระบุการควบคุมเพจแบบแท็บหรือตารางข้อมูลได้ และเฟรมเวิร์กมาพร้อมกับรูปแบบเริ่มต้นที่น่าเบื่อ แต่ก็ไม่แย่เลย ฉันไม่ได้บอกว่าสิ่งเหล่านี้แทนที่ HTML อย่างสมบูรณ์ แต่ถ้าคุณต้องการวิดเจ็ตและเลย์เอาต์ GUI ฉันเชื่อว่ามันเป็นทางเลือกที่ดีกว่ามาก

คุณอาจพิจารณาเรียกดูไซต์ต่อไปนี้:

http://themeforest.net/category/site-templates/admin-skins

มีธีม "การดูแลระบบ" มากมายสำหรับการซื้อที่นี่ซึ่งอาจเหมาะกับความต้องการของคุณ

การจำลองโครงร่างเป็นวิธีที่ยอดเยี่ยมในการเริ่มต้น

หลังจากใช้เฟรมเวิร์ก UI ส่วนใหญ่ที่กล่าวถึงที่นี่ฉันขอแนะนำให้คุณไปที่ jQueryUi ด้วยเหตุผลต่อไปนี้

1. jQueryUI CSS framework ดูแล CSS ที่ดูสม่ำเสมอและดูดีสำหรับคุณ (มันง่ายมากแค่ทำมาร์กอัปและใช้คลาส)

2. jQueryUI มี tabcontrol และรวบรวมวิธีง่ายๆในการจัดรูปแบบฟอร์ม

หากคุณกำหนดเป้าหมายที่ทันสมัย, ที่ไม่ใช่ IE เบราว์เซอร์แล้วคุณควรตรวจสอบSproutCore สำหรับการจำลองฉันใช้ม็อกกิ้งเบิร์ด

เฟรมเวิร์ก PHP ที่ค่อนข้างใหม่ออกแบบมาโดยเฉพาะสำหรับการพัฒนาซอฟต์แวร์ที่เน้น UI องค์ประกอบที่คุณมีที่นี่รวมถึงแท็บฟิลเตอร์และกริดจะรวมอยู่ด้วยและจะนำคุณไปใช้งานโค้ดประมาณ 20 บรรทัด

http://agiletoolkit.org/

คุณเคยลองAxureหรือยัง? เป็นเครื่องมือสำหรับสร้าง wireframes ต้นแบบและข้อกำหนดสำหรับแอปพลิเคชันและเว็บไซต์อย่างรวดเร็ว

มันทำงานในลักษณะเดียวกันกับ Balsamiq แต่ช่วยให้คุณสามารถส่งออก wireframes / ต้นแบบของคุณเป็น HTML, CSS และ Javascript

จากนั้นคุณสามารถอัปโหลดไปยังเซิร์ฟเวอร์หรือเรียกใช้บนคอมพิวเตอร์ของคุณเพื่อเป็นตัวอย่างการทำงาน

คุณสามารถสร้างแบบฟอร์มลิงก์แท็บโรลโอเวอร์เอฟเฟกต์ Javascript

หากคุณกำลังใช้ Balsamic Mockups สำหรับต้นแบบของคุณแล้วคุณควรพิจารณาNapkee หากต้องการอ้างอิงเว็บไซต์ "Napkee ช่วยให้คุณสามารถส่งออก Balsamiq Mockups เป็น HTML / CSS / JS และ Adobe Flex 3 ได้เพียงคลิกปุ่ม"

เมื่อสักครู่ที่ผ่านมาฉันพบว่าไม่พบอะไรเลยฉันจึงถือโอกาสเรียนรู้ css แต่ตั้งแต่นั้นมาดูเหมือนว่าจะมีความก้าวหน้าอย่างมากในเรื่องนี้

• สรุปปัญหาของคุณมีหน้าวิกิพีเดีย
• มีyaml-cssซึ่งใช้ yaml และเปลี่ยนเป็น css
• มีพื้นฐานแต่ถือว่ามีความรู้ css อยู่บ้าง
• ฉันยังขอแนะนำให้มองหาที่ของ Adobe Dreamweaver พวกเขามีเครื่องมือสร้าง css และ style จำนวนมากซึ่งผลิตโค้ดที่อ่านง่ายและเข้ากันได้กับ w3c

ฉันหวังว่าจะช่วยได้

การรวมกันของ 960gs สำหรับเลย์เอาต์และเครื่องมือ jQuery-UI หรือ Jquery นั้นยอดเยี่ยมมากฉันใช้มันเกือบทุกโปรเจ็กต์ แต่ฉันต้องการเพิ่มในhttp://easyframework.com/ แม้ว่ามันจะไม่เหมาะกับธุรกิจก็ตามดังนั้นอย่าลืมตรวจสอบ ใบอนุญาต แต่ฉันชอบมัน

ฉันเพิ่งค้นพบเว็บไซต์ที่สวยงามชื่อ iplotz.com ซึ่งคุณสามารถสร้างจำลองแอปพลิเคชัน / เว็บไซต์ / โครงการออนไลน์ได้โดยไม่ต้องติดตั้งอะไรเลย นอกจากนี้ยังมีการควบคุมทั่วไปส่วนใหญ่พร้อมด้วยคุณสมบัติอื่น ๆ อีกมากมายสำหรับการจัดการโครงการทั้งหมดและแบ่งปันกับผู้อื่นทางออนไลน์

ฉันต้องยอมรับว่าฉันยังไม่ได้ลองด้วยตัวเอง แต่ฉันดูมันเล็กน้อยและมันก็ดูดีมาก ฉันอาจจะใช้มันในไม่ช้าพอ

Sassดูเหมือนว่ามันมีศักยภาพในการบรรเทาอาการปวดหัว css ได้

ฉันต้องการเพิ่มBootstrapซึ่งใช้งานง่ายและ front-end framework ที่ทรงพลังเพื่อการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น

ฉันชอบRocketCSS การออกแบบที่ดีสะอาดให้มันไป