স্টাইলিং পরিষ্কার ফ্ল্যাট-ডিজাইন বোতামগুলি যাতে সামর্থ্য দেখায় এবং দেখতে 'ভাল ডিজাইন করা'

Question

আমি সম্প্রতি একটি ছোট সিএসএস কাঠামো শুরু করেছি। ( http://mincss.com কারও আগ্রহী হলে) আমি দ্রুত কয়েকটি বোতামের জন্য প্রাথমিক নকশাটি বের করে দিয়েছিলাম। ইউএক্স স্ট্যাকএক্সচেঞ্জ (এবং প্রচুর ভাল প্রতিক্রিয়া প্রাপ্ত) সম্পর্কে প্রতিক্রিয়া জিজ্ঞাসা করার পরে, তাদের উন্নতি করার জন্য অতিরিক্ত পরামর্শের জন্য আমাকে এখানে আসার পরামর্শ দেওয়া হয়েছিল।

ইউএক্সস্ট্যাকএক্সচেঞ্জের প্রতিক্রিয়া পরে এখনই তারা এগুলি দেখতে দেখতে। আমি কালো সীমানা সরালাম, একটি 3px "ছায়া" যুক্ত করেছি, এবং 1px বেভেলটি সরিয়েছি:

আমি ফ্ল্যাট ডিজাইনের চেহারা নিয়ে যাচ্ছি।

আমার কাছে বাকী 3 টি প্রশ্ন রয়েছে:

• এই বোতামগুলি কি যথেষ্ট সামর্থ্য দেখায়? (এটি ফ্ল্যাট ডিজাইনে সমস্যা বলে মনে হচ্ছে)
• আপনি কি একটি ছোট গ্রেডিয়েন্ট যুক্ত করার পরামর্শ দিবেন?
• তারা কি ভাল ডিজাইন করা দেখায়? (বিষয়গত আমি জানি, কিন্তু আমি এটি জিজ্ঞাসা করার আরও ভাল উপায় সম্পর্কে চিন্তা করতে পারি না)

আমি আনন্দের সাথে এই বোতামগুলির কোনও প্রতিক্রিয়া (এবং সম্ভবত ব্যবহার করব) স্বাগত জানাব।

Comments

আপনি যদি ছায়া রাখতে চান তবে এটিকে সত্য আলফা ছায়া বানানোর কথা বিবেচনা করুন। আরজিবিএ (0,0,0, .2) এর মতো কিছু না যদি আলফা না হয় তবে অনেক হালকা ধূসর বিবেচনা করুন।

— DA01

Answer 1

আমি মনে করি খুব সূক্ষ্ম গ্রেডিয়েন্টটি অবশ্যই বোতামগুলির নান্দনিকতার উন্নতি করবে। যেহেতু উইন্ডোজ 8 "মেট্রো" শৈলী এই শৈলীর একটি বড় প্রবক্তা, তাই আমি এটি উদাহরণ হিসাবে ব্যবহার করব:

প্রথম নজরে "টাইলস" দেখতে দেখতে এগুলি একদম সমতল রঙ, তবে আপনি যদি ঘনিষ্ঠভাবে দেখেন তবে খুব সামান্য গ্রেডিয়েন্ট বাম থেকে ডানে চলে যাচ্ছে। এটি অন্যের তুলনায় কারও পক্ষে বেশি লক্ষণীয়, তবে তাদের সকলের কাছে এটি রয়েছে। যিসেলা যেমন বলেছিলেন, আপনি চান এই গ্রেডিয়েন্টটি সবে লক্ষণীয়, প্রায় অবচেতন।

Comments

এখানে এর আগে: i.imgur.com/LVVVWd8.png এবং এর পরে রয়েছে: i.imgur.com/jDb07Y2.png আপনি কী মনে করেন? (এটি ব্যাকগ্রাউন্ড:-ওয়েবেকিট-গ্রেডিয়েন্ট (লিনিয়ার, বাম কেন্দ্র, ডান কেন্দ্র, (আরজিবি (44, 175, 73)), থেকে (আরজিবি (53, 206, 86)))

— ওয়ান ভার্সেটিগ

Answer 2

যেমনটি আপনি উল্লেখ করেছেন, ফ্ল্যাট বোতামগুলি ডিজাইন করার সময় আপনার কয়েকটি জিনিস লক্ষ্য করা উচিত। প্রথমটি হচ্ছে, আমি বলব: এটি কি বোতামের মতো দেখাচ্ছে?

এটি অগত্যা এমন কিছু নয় যা কেবলমাত্র বোতামের উপর নির্ভর করে, তবে আপনার ইউআই এর বাকি উপাদানগুলিতে। আপনি যদি ফ্ল্যাট বোতাম ব্যবহার করছেন তবে আমি আপনাকে অন্য কোথাও অনুরূপ আকার / শৈলী এড়ানো পরামর্শ দিচ্ছি। আপনাকে ভিজ্যুয়াল ভোকাবুলারি বজায় রাখা দরকার যাতে লোকেরা তত্ক্ষণাত এই উপাদানগুলিকে বোতাম হিসাবে স্বীকৃতি দিতে পারে অন্য কিছু নয়।

এর জন্য ছায়াগুলি ভাল, কারণ তারা ভলিউমের ছাপ দেয়। অতএব, এগুলি দেখতে আরও সহজ। এছাড়াও, আমরা যে প্রভাব আছে বোতাম ব্যবহার করতে ব্যবহৃত হয়। আমি তবে এমন রঙ ব্যবহার করা বিবেচনা করব যা বোতামের রঙের অনুরূপ। উদাহরণস্বরূপ, লাল বোতামের জন্য কালো ব্যবহার করার পরিবর্তে, 50% অস্বচ্ছতা সহ একটি লাল ব্যবহার করুন। বোতামগুলি আরও সুস্পষ্ট করার জন্য আরেকটি বিকল্প হ'ল একটি আইকন যুক্ত করা (সাদা, শক্ত)।

আমি গ্রেডিয়েন্টগুলির সাথে খুব সতর্ক থাকব । এগুলি খারাপ হওয়ার কারণে নয়, তবে বর্তমানের সুপার সিম্পল ফ্ল্যাট ট্রেন্ডের কারণে তারা এগুলি ভাল মানায় না। বিশেষত যদি আপনি ব্যবহার করেন এমন রঙ বা শেডগুলি খুব আলাদা। একটি ছোট গ্রেডিয়েন্ট সত্যই সুন্দর দেখতে পারে তবে এটি ক্ষুদ্র, সবেমাত্র লক্ষণীয় হতে হবে।

সংক্ষেপে, আমি তাদের চেহারা পছন্দ করি। আমি কেবল ছায়ার রঙকে হালকা কিছুতে পরিবর্তন করব এবং সম্ভবত পূর্বগ্রন্থটি খুব হালকা করে সাদা করব। ফন্টটি দুর্দান্ত এবং আপনি ভাল প্যাডিং ব্যবহার করছেন, তাই খুব ভাল কাজ! আমি দেখতে পাচ্ছি যে আপনি সেগুলিকে সাইটে ব্যবহার করছেন তবে তাদের নীচে আপনার কাছে পেস্টেল রঙের বিজ্ঞপ্তির একটি সেট রয়েছে যা আসলে কিছুটা মিল দেখাচ্ছে। আমি তাদের স্টাইলটি পুনর্বিবেচনা করবো, কারণ তারা কিছুটা বিভ্রান্ত হতে পারে এবং আমি পুরো সাইট জুড়ে একই রঙগুলি ব্যবহার করার চেষ্টা করব (সমস্ত প্যাসেল বা সমস্ত বিপরীতে)।

Comments

আমি রঙিন ছায়া সম্পর্কে আপনার ধারণা নিয়েছি: i.imgur.com/525NqBJ.png আমি একমত যে কোনও গ্রেডিয়েন্ট ছোট হতে হবে; আমি মনে করি না আমি একটি যুক্ত করব। আপনি বোতামগুলির বৃত্তাকার কোণগুলি সম্পর্কে কী ভাবেন? আপনি কীভাবে মনে করেন আমার বিজ্ঞপ্তিগুলি পরিবর্তন করা উচিত? ধন্যবাদ!

— ওয়ান ভার্সটিগ

নিবন্ধন করুন আমি তাদের পছন্দ করি. বৃত্তাকার কোণগুলিও সাধারণত দেখতে সুন্দর লাগে, আপনার অন্যান্য উপাদানগুলিতেও এগুলি যুক্ত করার বিষয়টি বিবেচনা করা প্রয়োজন (ইনপুট, সম্ভবত?)। বিজ্ঞপ্তিগুলি সম্পর্কে, একই রঙের গা shade় শেডযুক্ত 1px সীমানা সম্পর্কে কীভাবে? ভালো কিছু এই

— Yisela

Answer 3

আমি যখন এই জাতীয় ন্যূনতম বোতামগুলি তৈরি করতে সম্মান জানাতে পারি তখন আপনি একটি কাঠামো তৈরির সময় আপনাকে কীভাবে / কীভাবে বিভিন্ন ওয়েবসাইটে ওয়েব প্রয়োগ করা যায় তা বিবেচনা করা দরকার। আপনি যদি বোতাম সরবরাহ করছেন তবে আপনাকে অবশ্যই টেবিল, ফর্ম ইত্যাদির মতো অন্য যে কোনও কিছু ব্যবহার করতে পারে তার সম্পর্কে সরবরাহ করতে হবে (যা আমি নিশ্চিত যে আপনি এখনও কাজ করছেন)।

আপনার যদি ইতিমধ্যে না থাকে তবে বুটস্ট্র্যাপটি একবার দেখুন । বুটস্ট্র্যাপ একটি আশ্চর্যজনকভাবে সহজ এবং পরিষ্কার সিএসএস ফ্রেমওয়ার্ক যা সহজেই অন্য কোনও ওয়েবসাইটের সাথে অভিযোজিত বা সংহত হতে পারে এবং আপনাকে কিছু ধারণা দিতে পারে।

এখন পর্যন্ত এই আসল বোতামগুলি আমি একটি সীমানা দিয়ে ঘুরে দেখব, কারণ এটি উপাদানটিকে আবদ্ধ করতে সহায়তা করে এবং একটি সীমানা অনেকগুলি বোতামের কাছে বেশ সাধারণ। আমি ওয়েবসাইটটি দেখেছি এবং আমি হোভার / ক্লিকের রাজ্যগুলি পছন্দ করি এবং আমার মনে হয় আপনি সেগুলি দিয়ে ভাল করেছেন।

আপনি যদি গ্রেডিয়েন্টগুলি পরিচয় করিয়ে দিতে চান তবে সামঞ্জস্য থাকুন এবং নিশ্চিত হন যে আপনি সেগুলি অন্যান্য উপাদানগুলিতেও ব্যবহার করেছেন, অন্যথায় আপনার প্রতিযোগিতামূলক গভীরতা থাকবে যা কেবল বিভ্রান্তিকর হবে।

Comments

আমি বুটস্ট্র্যাপ দেখেছি (এর মতো শক্ত নয়) এবং এর আগে কিছু সাইট তৈরি করেছি। বুটস্ট্র্যাপের সাথে আমার সমস্যাটি হ'ল এটি একটি হ্রাসযুক্ত কাঠামো - বেশ কয়েক দশক কিলোবাইট - এবং আজকাল এটি খুব সাধারণ। আমি ফর্মগুলি (পৃষ্ঠায় আরও নিচে) পাশাপাশি টেবিলগুলি তৈরি করেছি। আমি যখন ইউএক্স স্ট্যাকএক্সচেঞ্জে জিজ্ঞাসা করলাম তখন বেশিরভাগ লোক সীমান্তটি খনন করতে বলেছিল, মজার বিষয় - যা আমি করেছি। আমি মনে করি না আমি গ্রেডিয়েন্টগুলি পরিচয় করিয়ে দেব। আপনি এই সীমানা পছন্দ করেন? i.imgur.com/OlOy5pN.png

— ওভেন

Answer 4

বোতামগুলি দেখতে দুর্দান্ত, তবে সাধারণ ফ্ল্যাট স্টাইলে যে ধরণের বোতামগুলি সাশ্রয় দেখায় এবং অনুভব করে তা একবার ছায়ার অংশটি মূল উপাদানটির (নীচে) বোতামের নীচে একটি ছোট স্ট্রিপ হয় এবং বেশিরভাগটি একটি গা dark় শেড হয় বোতামের রঙ।